/* ============================================================
   TRACK EDITOR — The Nunatack Project
   Proyecto independiente — sin dependencias de la web editorial
   ------------------------------------------------------------ */

@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-regular-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-medium-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-semibold-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/montserrat/montserrat-bold-700.woff2") format("woff2");
}
@font-face {
  font-family: "Varien";
  font-display: swap;
  src: url("../fonts/Varien.woff2") format("woff2");
}

:root {
  --c-white: #ffffff;
  --c-tan: #fefffb;
  --c-tan-fixed: #d7d0c9;
  --c-export: #c2c8ca;
  --c-export-hover: #99d98c;
  --c-dark: #313330;
  --c-grey: #eaeaea;
  --c-profile: #c2c8ca;
  --c-dark-grey: #c2c8ca;
  --c-olive: #c2c8ca;
  --c-donate: #ff5f88;
  --c-donate-dark: #bb4965;
  --c-tool-icon: #4d4d4d;
  --c-title-bg: #4d4d4d;
  --c-title-text: #ffffff;
  --c-error: #c0392b;
  --c-muted: #a9a29a;
  --c-disabled: #c3bbb0;
  --c-cream: #f6f6f6;
  --c-olive-tint: #eef0ea;
  --c-olive-hover: #a6c96a;
  --c-olive-dark: #4c5245;
  --c-conform: #a6c96a;
  --c-conform-dark: #88a557;
  --c-conform-hover: #88a557;
  --c-map-bg: #e6e2de;
  --c-tan-line: #c2c8ca;
  --c-hairline: rgba(49, 51, 48, 0.1);
  --c-chart-label-bg: rgba(255, 255, 255, 0.72);
  --c-overlay-text: rgba(255, 255, 255, 0.75);
  --c-shadow-xs: rgba(49, 51, 48, 0.08);
  --c-shadow-sm: rgba(49, 51, 48, 0.12);
  --c-shadow-md: rgba(49, 51, 48, 0.35);
  --c-shadow-lg: rgba(49, 51, 48, 0.4);
  --c-shadow-marker: rgba(49, 51, 48, 0.45);
  --c-scrim: rgba(49, 51, 48, 0.5);
  --c-surface: var(--c-white);
  --c-text: var(--c-dark);
  color-scheme: light;

  --font-ui: "Montserrat", sans-serif;
  --font-track: "Varien", sans-serif;
  --sidebar-left-w: 240px;
  --sidebar-right-w: 320px;
  --border-fat: 22px;
  --panel-gap: 1rem;
}

/* ============================================================
   Tema intermedio ("Terra") — activado con <html data-theme="terra"> */
:root[data-theme="terra"] {
  color-scheme: light;
  --c-surface: #d8d0c6;
  --c-text: #232120;
  --c-grey: #ccc4bb;
  --c-tan: #bfb6ad;
  --c-dark-grey: #988582;
  --c-olive: #5e4348;
  --c-muted: #5e4348;
  --c-disabled: #988582;
  --c-cream: #ccc4bb;
  --c-olive-tint: #f1f1f1;
  --c-tan-line: #988582;
  --c-hairline: rgba(35, 33, 32, 0.1);
  --c-tool-icon: #5e4348;
  --c-chart-label-bg: rgba(216, 208, 198, 0.72);
  --c-title-bg: #5e4348;
  --c-export: #bfb6ad;
  --c-export-hover: #a6c96a;
}

/* ============================================================
   Tema oscuro — activado con <html data-theme="dark"> */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-surface: #34362f;
  --c-text: #efe9df;
  --c-grey: #454740;
  --c-tan: #454740;
  --c-dark-grey: #585a4f;
  --c-olive: #6a6a6a;
  --c-muted: #a39c8f;
  --c-disabled: #6f6a5f;
  --c-cream: #3d3f38;
  --c-olive-tint: #37402f;
  --c-tan-line: #52544a;
  --c-hairline: rgba(239, 233, 223, 0.1);
  --c-tool-icon: #ded9cd;
  --c-chart-label-bg: rgba(52, 54, 47, 0.72);
  --c-export: #6a6a6a;
  --c-export-hover: #a6c96a;
  --c-title-bg: #6a6a6a;
}

* {
  box-sizing: border-box;
}

.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;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-dark);
  color: var(--c-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

body {
  border: var(--border-fat) solid var(--c-surface);
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   App shell
   ------------------------------------------------------------ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-left-w) 1fr;
  width: 100%;
  height: 100%;
  background: var(--c-surface);
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar--left {
  padding: 0;
}

/* ============================================================
   Sidebar izquierda
   ------------------------------------------------------------ */

.logo-box {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0.4rem 10px 0;
  background: var(--c-surface);
  margin: 0 0 1rem 0;
}

.logo-box__datetime {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

.sidebar-left__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 0.4rem;
}

.logo-box__img {
  width: auto;
  height: 100px;
  object-fit: contain;
  cursor: pointer;
}

.btn-new {
  flex-shrink: 0;
  width: 100%;
  padding: 12px;
  background: var(--c-grey);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background-color 0.15s ease;
  border-bottom: 0.5px solid var(--c-surface);
}

.btn-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
}

.btn-new:hover {
  background: var(--c-dark-grey);
  color: var(--c-text);
}

.btn-row {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.btn-row--themes {
  grid-template-columns: 1fr 1fr 1fr;
}

.btn-io {
  width: 100%;
  padding: 12px;
  background: var(--c-grey);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid var(--c-surface);
}

.btn-row > :not(:last-child) {
  border-right: 2px solid var(--c-surface);
}

.btn-io--compact {
  padding: 8px;
  font-size: 0.62rem;
}

.btn-io:hover {
  background: var(--c-dark-grey);
  color: var(--c-text);
}

.btn-io.is-active {
  background: var(--c-dark-grey);
  color: var(--c-white);
}

.btn-io.is-active:hover {
  background: var(--c-grey);
  color: var(--c-white);
}

#btn-export {
  background: var(--c-export);
}

#btn-export:hover {
  background: var(--c-export-hover);
  color: var(--c-white);
}

button.btn-donate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 0;
  background: var(--c-donate);
  border: 1px solid var(--c-donate-dark);
  color: var(--c-white);
  margin-bottom: 1px;
}

button.btn-donate:hover {
  background: var(--c-white);
  color: var(--c-donate);
}

:root[data-theme="dark"] button.btn-donate {
  background: var(--c-white);
  color: var(--c-donate);
}

:root[data-theme="dark"] button.btn-donate:hover {
  background: var(--c-donate);
  color: var(--c-white);
}

@keyframes heart-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}

button.btn-donate:hover .btn-icon {
  animation: heart-pulse 0.7s ease-in-out infinite;
}

.tool-row {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--c-hairline);
}

.tool-btn {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: var(--c-dark-greygrey);
  color: var(--c-text);
  border-right: 1px solid var(--c-surface);
  transition: background-color 0.15s ease;
}

.tool-btn:last-child {
  border-right: none;
}

.tool-btn:hover {
  background: var(--c-grey);
  color: var(--c-white);
}

.tool-btn.is-active {
  background: var(--c-olive);
}

.tool-btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--c-tool-icon);
}

:root[data-theme="terra"] .tool-btn.is-active .tool-btn__icon {
  background-color: var(--c-grey);
}

.track-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid;
  border-color: var(--c-grey);
  margin: 0.4rem 0 0;
  padding: 0.4rem 0;
}

.map-search {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 0.4rem;
}

.map-search__input {
  display: block;
  width: 100%;
  padding: 7px 24px 7px 26px;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  color: var(--c-text);
  border: 1px solid var(--c-tan-line);
  background: var(--c-surface);
}

.map-search__icon {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  fill: var(--c-muted);
  pointer-events: none;
}

.map-search__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--c-muted);
}

.map-search__clear:hover {
  color: var(--c-error);
}

.map-search__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-tan-line);
  border-top: none;
  box-shadow: 0 4px 10px var(--c-shadow-sm);
}

.map-search__result {
  padding: 7px 8px;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--c-text);
  cursor: pointer;
  border-bottom: 1px solid var(--c-hairline);
}

.map-search__result:last-child {
  border-bottom: none;
}

.map-search__result:hover {
  background: var(--c-cream);
}

.route-search-activity {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.route-search-activity__btn {
  flex: 1 1 0;
  text-align: center;
}

.route-plan-marker {
  width: 32px;
  height: 32px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("../img/icon-position.svg");
  mask-image: url("../img/icon-position.svg");
  filter: drop-shadow(0 1px 3px var(--c-shadow-marker));
}

.route-plan-point-row__coord {
  margin: 4px 0 0;
  font-size: 0.7rem;
  color: var(--c-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Panel "New track" > Start/Destination point: input de coordenadas
   "lat, lon" editable (para pegar una coordenada copiada de Google Maps u
   otra fuente) con un botón-lápiz a la derecha que aplica el valor tecleado. */
.route-plan-coord-field {
  position: relative;
  margin-top: 4px;
}

.route-plan-coord-field .route-plan-coord-field__input {
  margin-top: 0;
  padding-right: 28px;
}

.route-plan-coord-field__edit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: var(--c-muted);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("../img/icon-edit.svg");
  mask-image: url("../img/icon-edit.svg");
}

.route-plan-coord-field__edit:hover {
  background-color: var(--c-text);
}

.route-plan-range-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.route-plan-range-row input {
  flex: 1 1 0;
}

.nearby-routes-results {
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--c-tan-line);
}

.nearby-routes-result {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--c-hairline);
}

.nearby-routes-result:last-child {
  border-bottom: none;
}

.nearby-routes-result:hover {
  background: var(--c-cream);
}

.nearby-routes-result.is-active {
  background: var(--c-olive);
}

.nearby-routes-result.is-active .nearby-routes-result__label,
.nearby-routes-result.is-active .nearby-routes-result__import,
.nearby-routes-result.is-active .nearby-routes-result__status {
  color: var(--c-white);
}

.nearby-routes-result.is-loading .nearby-routes-result__label {
  cursor: progress;
  opacity: 0.6;
  pointer-events: none;
}

.nearby-routes-result__status {
  display: none;
  flex-shrink: 0;
  padding-right: 4px;
  font-size: 0.65rem;
  color: var(--c-muted);
  white-space: nowrap;
}

.nearby-routes-result.is-loading .nearby-routes-result__status {
  display: inline;
}

.nearby-routes-result__label {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 8px;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-routes-result__import {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-right: 4px;
  color: var(--c-muted);
}

.nearby-routes-result__import:hover {
  color: var(--c-text);
}

.track-list__empty {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.72rem;
  color: var(--c-muted);
  font-style: italic;
  text-align: center;
}

/* Enlace suelto dentro de un párrafo (p.ej. "New track" > Edit > Points) —
   mismo tratamiento sobrio que .info-link, pero display:inline para no
   romper el flujo del texto que lo rodea. */
.inline-link-btn {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-style: normal;
  color: var(--c-text);
  text-decoration: underline;
  cursor: pointer;
}

.inline-link-btn:hover {
  color: var(--c-olive-hover);
}

.track-list__brand {
  display: block;
  width: 40%;
  margin: auto auto 1rem;
  flex-shrink: 0;
}

.track-list__brand-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2rem;
}

:root[data-theme="dark"] .track-list__brand-img {
  filter: brightness(0) invert(1);
}

.tool-panel {
  padding: 4px 14px 10px;
}

.draw-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin: 1rem 0 0.1rem 0;
}

.panel-title {
  flex-shrink: 0;
  margin: 1rem 0 0.1rem 0;
  padding: 6px 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--c-muted);
}

.draw-tabs__btn {
  flex: 1 1 auto;
  padding: 6px 4px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-tan-line);
}

.draw-tabs__btn.is-active {
  background: var(--c-olive);
  border-color: var(--c-olive);
  color: var(--c-white);
}

.checkbox-dropdown {
  margin: 2px 0 6px;
}

.checkbox-dropdown--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.checkbox-dropdown__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  font-size: 0.7rem;
  font-family: var(--font-ui);
  color: var(--c-text);
  border: 1px solid var(--c-tan-line);
  background: var(--c-surface);
  cursor: pointer;
  list-style: none;
}

.checkbox-dropdown__summary::-webkit-details-marker {
  display: none;
}

.checkbox-dropdown__summary::after {
  content: "▾";
  color: var(--c-muted);
}

.checkbox-dropdown[open] > .checkbox-dropdown__summary::after {
  content: "▴";
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--c-tan-line);
  border-top: none;
  background: var(--c-cream);
}

.checkbox-list__item label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-family: var(--font-ui);
  color: var(--c-text);
  cursor: pointer;
}

.checkbox-list__item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid var(--c-tan-line);
  border-radius: 2px;
  background: var(--c-tan);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

.checkbox-list__item input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  box-shadow: inset 1em 1em var(--c-dark);
  transition: transform 0.1s ease-in-out;
}

.checkbox-list__item input[type="checkbox"]:checked::before {
  transform: scale(1);
}

:root[data-theme="dark"] .checkbox-list__item input[type="checkbox"]::before {
  box-shadow: inset 1em 1em var(--c-olive);
}

/* Desplegable de opción única (p.ej. "Difficulty") construido con
   <details>/<summary> en vez de <select> nativo: el popup de un <select> lo
   pinta el sistema operativo y no admite estilos por tema (Safari en
   particular lo ignora casi por completo), así que para poder pintarlo
   igual en claro/oscuro/terra hace falta que sea DOM normal. */
.select-dropdown {
  margin-top: 4px;
}

.select-dropdown__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  color: var(--c-text);
  border: 1px solid var(--c-tan-line);
  background: var(--c-surface);
  cursor: pointer;
  list-style: none;
}

.select-dropdown__summary::-webkit-details-marker {
  display: none;
}

.select-dropdown__summary::after {
  content: "▾";
  color: var(--c-muted);
}

.select-dropdown[open] > .select-dropdown__summary::after {
  content: "▴";
}

.select-dropdown__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 4px;
  max-height: 180px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--c-tan-line);
  border-top: none;
  background: var(--c-cream);
}

.select-dropdown__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  color: var(--c-text);
  background: transparent;
  border: none;
  cursor: pointer;
}

.select-dropdown__option:hover {
  background: var(--c-olive-tint);
}

.select-dropdown__option.is-active {
  background: var(--c-olive);
  color: var(--c-white);
  font-weight: 700;
}

.draw-hint {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 0.66rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--c-text);
  background: var(--c-cream);
  border-left: 2px solid var(--c-olive);
}

.waypoint-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.waypoint-form__label {
  display: block;
  margin: 8px 0 0;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
}

.waypoint-form__input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 8px;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  color: var(--c-text);
  border: 1px solid var(--c-tan-line);
  background: var(--c-surface);
}

.waypoint-form__input--textarea {
  resize: vertical;
  min-height: 56px;
}

.waypoint-form__input option {
  background-color: var(--c-surface);
  color: var(--c-text);
}

/* "Coordinate" tool (Tools tab): campo editable con lat/lon (mismo botón-
   lápiz que route-plan-coord-field__edit) — escribir un valor válido y
   confirmarlo (Enter, el lápiz, o quitar el foco) lleva el mapa hasta ahí. */
.coord-tool__field {
  margin: 10px 0;
}

.waypoint-form__colors {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  margin: 12px 0;
}

.waypoint-color-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  border: 2px solid transparent;
}

.waypoint-color-swatch.is-active {
  border-color: var(--c-text);
}

.waypoint-form__icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}

/* Título de un grupo de iconos (Basic, Shapes, Activity...) cuando viene
   detrás de la rejilla del grupo anterior: sin este respiro extra los
   bloques se leen como una lista continua y el agrupado no se nota. */
.waypoint-form__icons + .waypoint-form__label {
  margin-top: 14px;
}

.waypoint-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px 4px;
  border: 1px solid var(--c-tan-line);
  background: var(--c-surface);
}

.waypoint-icon-btn img {
  width: 32px;
  height: 32px;
}

.waypoint-icon-btn span {
  font-size: 0.56rem;
  color: var(--c-text);
  text-transform: capitalize;
}

.waypoint-icon-btn.is-active {
  border-color: var(--c-olive);
  background: var(--c-olive-tint);
}

.route-profile-estimate {
  margin: 8px 0 0;
  padding: 6px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-text);
  background: var(--c-olive-tint);
  border: 1px solid var(--c-olive);
  text-align: center;
}

.waypoint-form__actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.waypoint-form__actions .layer-style-btn {
  flex: 1 1 auto;
  text-align: center;
}

.waypoint-select-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  max-height: 160px;
  overflow-y: auto;
}

.waypoint-select-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  font-size: 0.7rem;
  color: var(--c-text);
  background: var(--c-cream);
}

.waypoint-select-list__remove {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--c-muted);
}

.waypoint-select-list__remove:hover {
  color: var(--c-error);
}

.highlight-list__add {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--c-muted);
}

.highlight-list__add:hover {
  color: var(--c-olive);
}

.highlight-list__add:disabled {
  color: var(--c-olive);
  opacity: 0.6;
}

/* "Clear photos" (Geotag Photos, Tools tab) — mismo layer-style-btn que el
   resto de acciones de la sección, pero su hover vira a rojo para leerse
   como la acción destructiva/secundaria que es, distinta de "Open photo
   folder"/"Position photos"/"Download geotagged photos". El selector con
   tipo (button.geotag-photos__clear:hover) sube la especificidad por
   encima de .layer-style-btn:hover para poder pisarlo sin depender del
   orden en la hoja de estilos. */
button.geotag-photos__clear:hover {
  background: var(--c-error);
  border-color: var(--c-error);
  color: var(--c-white);
}

.track-name-list[hidden] {
  display: none;
}

.track-name-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 7px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-tan);
  cursor: pointer;
}

.track-name-item:hover {
  background: var(--c-cream);
}

.track-name-item.is-active {
  color: var(--c-white);
  margin: 0 0.4rem;
}

.track-name-item__close {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--c-muted);
}

.track-name-item.is-active .track-name-item__close {
  color: var(--c-white);
}

.track-name-item__visibility {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
}

.track-name-item.is-active .track-name-item__visibility {
  color: var(--c-white);
}

.track-name-item.is-hidden {
  opacity: 0.5;
}

.track-name-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.track-name-item__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-panel__title {
  margin: 18px 0 6px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-title-text);
  background-color: var(--c-title-bg);
  padding: 0.4rem 0.6rem;
}

.layer-panel__styles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
}

.layer-style-btn {
  text-align: left;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-cream);
  border: 1px solid var(--c-tan-line);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  border-radius: 4px;
}

.layer-style-btn:hover {
  background: transparent;
}

.layer-style-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.layer-style-btn:disabled:hover {
  background: transparent;
}

.layer-style-btn.is-active {
  background: var(--c-olive);
  border-color: var(--c-olive);
  color: var(--c-white);
  font-weight: 700;
}

.layer-style-btn--block {
  display: block;
  width: 100%;
  margin: 1rem auto;
  text-align: center;
}

.panel-divider {
  height: 1px;
  margin: 12px 0;
  background: var(--c-hairline);
}

.simplify-tolerance {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 2px 6px;
}

.simplify-tolerance__label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--c-text);
}

.simplify-tolerance__count {
  color: var(--c-muted);
  font-weight: 500;
}

.simplify-tolerance__input {
  width: 100%;
  accent-color: var(--c-olive);
}

.track-width {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 2px 6px;
}

.track-width__label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--c-text);
}

.track-width__value {
  color: var(--c-muted);
  font-weight: 500;
}

.track-width__input {
  width: 100%;
  accent-color: var(--c-olive);
}

/* "Sunrise & sunset" (pestaña Weather): dos filas de 3 columnas (sol y
   luna) bajo el título — salida/puesta centradas (mismo par valor+
   .stats-box__desc que .stats-box) y un icono 32x32 en la tercera —
   checkboxes + botón de punto, fecha + slider debajo. */
.sun-line__times {
  display: flex;
  gap: 8px;
  margin: 2px 0 10px;
}

.sun-line__times-col {
  flex: 1 1 0;
  text-align: center;
}

.sun-line__times-value {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-text);
  padding-top: 1rem;
}

/* .stats-box__desc trae un margin-top negativo pensado para pegarse a una
   cifra grande (1.4rem+); aquí el valor es más pequeño y se solaparía —
   se sobrescribe solo el margen, el resto (tamaño/color) se queda igual. */
.sun-line__times-col .stats-box__desc {
  margin-top: 2px;
}

.sun-line__icon {
  width: 58px;
  height: 58px;
}

.sun-line__date {
  margin: 4px 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c-text);
  text-align: center;
}

.sun-line__input {
  width: 100%;
  accent-color: var(--c-olive);
}

/* "Layer options" (Tools tab): controles de la capa Elevation colors —
   rampa, opacidad y color de las curvas de nivel. Ver renderLayerOptionsTool
   en tracks.js. Grid de 2 columnas: texto a la izq, control a la der; cada
   fila se añade en pareja (label + control) así que basta con omitir un par
   para que esa fila desaparezca entera (color de curvas sin Contour lines). */
.layer-options__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 12px;
  padding: 2px 2px 8px;
}

.layer-options__row-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--c-text);
}

.layer-options__ramps {
  display: flex;
  gap: 4px;
}

.layer-options__ramp-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--c-tan-line);
  border-radius: 3px;
  cursor: pointer;
}

.layer-options__ramp-btn.is-active {
  border: 2px solid var(--c-text);
}

.layer-options__opacity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.layer-options__opacity-input {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--c-olive);
}

.layer-options__opacity-value {
  flex: 0 0 auto;
  min-width: 2.4em;
  text-align: right;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--c-muted);
}

.layer-options__colors {
  display: flex;
  gap: 4px;
}

/* Cuadrado redondeado, no círculo — mismo lenguaje visual que
   .waypoint-color-swatch en la pestaña "edit track". */
.layer-options__color-btn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--c-tan-line);
  border-radius: 4px;
  cursor: pointer;
}

.layer-options__color-btn.is-active {
  border: 2px solid var(--c-text);
}

#track-list-default > .layer-panel__title {
  padding: 7px;
  margin: 0 7px;
}

#track-list-default > .panel-divider {
  margin: 8px 14px 0;
}

.layer-panel__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  padding: 4px 0;
}

.layer-panel__toggle:first-of-type {
  padding-top: 8px;
}

.layer-panel__toggle:has(input:disabled) {
  opacity: 0.5;
  cursor: default;
}

/* "Surface type breakdown" (panel Info, entre las stats y "Waypoints") —
   barra apilada + leyenda con el % asfaltado/sin asfaltar/desconocido del
   track, ver renderSurfaceBreakdownSection en tracks.js. Colores fijos a
   propósito (igual que SLOPE_COLOR_EXPRESSION en map.js): son datos, no
   chrome de la interfaz, así que no cambian con el tema. */
.surface-breakdown {
  margin: 6px 0 4px;
  font-size: 0.7rem;
  color: var(--c-text);
}

.surface-breakdown--status {
  color: var(--c-muted);
  font-style: italic;
}

/* Cabecera del breakdown en tres columnas (icono / % / km / tipo), sobre la
   rejilla de .sun-line__times. Tipografía más contenida que en Info: aquí
   conviven tres cifras con su descripción en un panel estrecho. */
.surface-breakdown__cols {
  margin: 0 0 10px;
}

.surface-breakdown__cols .sun-line__times-value {
  padding-top: 4px;
  font-size: 1.1rem;
}

/* Los km, pegados debajo del porcentaje — más pequeños que .stats-box__desc
   (que aquí lleva el nombre del tipo de superficie, la etiqueta "principal"
   de la columna) para no competir con ella. */
.surface-breakdown__km {
  margin: 1px 0 0;
  font-size: 0.92rem;
  color: var(--c-muted);
}

/* Aviso de qué parte del reparto es estimada (sin tag surface en OSM) — va
   bajo la barra, en el tono apagado de las notas al pie del panel. */
.surface-breakdown__note {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--c-muted);
}

.surface-breakdown__icon {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto;
  object-fit: contain;
}

.surface-breakdown__bar {
  display: flex;
  height: 10px;
  margin-bottom: 6px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--c-tan-line);
}

.surface-breakdown__segment--paved {
  background: #4d4d4d;
}

.surface-breakdown__segment--unpaved {
  background: #b58c5a;
}

.surface-breakdown__segment--unknown {
  background: #c2c8ca;
}

.stats-box {
  flex-shrink: 0;
  height: 22vh;
  min-height: 130px;
  max-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: var(--c-surface);
  color: var(--c-text);
  padding: 16px 18px;
  margin-right: 0.4rem;
}

.stats-box__line {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
}

.stats-box__line--lg {
  font-size: 1.8rem;
  line-height: 2rem;
  font-weight: bold;
}

.stats-box__line:not(.stats-box__line--lg) {
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: var(--c-muted);
}

.stats-box__unit {
  font-weight: 400;
  font-size: 0.8em;
}

/* Margen superior negativo: acerca la descripción a SU cifra (el gap de
   6px de .stats-box ya separa por su cuenta un grupo cifra+descripción del
   siguiente) — sin esto, con 8 líneas en vez de las 4 de antes, el bloque
   se queda unos px más alto que el hueco fijo de .stats-box. */
.stats-box__desc {
  margin: -9px 0 0;
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--c-muted);
}

/* ============================================================
   Zona central — mapa + perfil
   ------------------------------------------------------------ */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.map-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--c-surface);
  overflow: hidden;
  padding: 0.4rem;
}

.map-area__map {
  position: absolute;
  inset: 0;
  background: var(--c-map-bg);
  border-radius: 8px;
}

.map-bbox-select {
  position: absolute;
  z-index: 5;
  border: 2px solid var(--c-olive);
  background: rgba(168, 204, 108, 0.2);
  pointer-events: none;
}

/* Retícula del "Coordinate" tool (Tools tab) — dos líneas de 1px que siguen
   el ratón sobre el mapa (ver setCrosshair en map.js). pointer-events:none
   en todo el árbol para que el click siga llegando al canvas de MapLibre
   debajo, que es quien realmente reporta la coordenada. */
.map-crosshair {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.map-crosshair__line {
  position: absolute;
  background: rgba(166, 201, 106, 0.9);
}

.map-crosshair__line--h {
  left: 0;
  right: 0;
  height: 1px;
}

.map-crosshair__line--v {
  top: 0;
  bottom: 0;
  width: 1px;
}

.maplibregl-ctrl-attrib {
  font-family: var(--font-ui);
  font-size: 0.62rem;
}

/* 96px despeja la banda de anuncios (80px + su margen inferior de
   0.4rem) pegada al borde del mapa — de lo contrario la escala y el botón
   de atribución (maplibregl-ctrl-attrib-button, dentro de este mismo
   contenedor) quedarían tapados detrás, ya que .ads-layer ocupa el 100%
   del ancho y por tanto también la esquina inferior derecha. */
.maplibregl-ctrl-bottom-right {
  bottom: 96px;
}

.maplibregl-ctrl-scale {
  font-family: var(--font-ui);
}

.maplibregl-popup-content {
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-dark);
}

.map-bullet {
  width: 18px;
  height: 18px;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px var(--c-shadow-lg));
  transition: opacity 0.1s ease;
}

.waypoint-marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px var(--c-shadow-marker);
}

.waypoint-marker__icon {
  width: 78%;
  height: 78%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  pointer-events: none;
}

.waypoint-marker--dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--c-white);
  box-shadow: 0 1px 4px var(--c-shadow-marker);
  filter: none;
}

/* Tooltip al pulsar un icono de foto en el mapa ("Geotag Photos" — ver
   buildPhotoMarkerEl en map.js): miniatura + nombre + coordenadas. Margen
   negativo para que la miniatura llegue al borde del popup, cancelando el
   padding que .maplibregl-popup-content aplica a todos los popups del mapa. */
.photo-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -6px -10px;
}

.photo-popup__thumb {
  display: block;
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
}

.photo-popup__name {
  margin: 6px 10px 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--c-text);
}

.photo-popup__coords {
  margin: 2px 10px 6px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--c-muted);
}

.track-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 86px;
  margin: 0 0.4rem 0.4rem 0.4rem;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.track-tabs[hidden] {
  display: none;
}

/* Banda de patrocinadores/publicidad, pegada al borde inferior del mapa —
   por eso track-tabs (arriba) y la leyenda de elevación (más abajo) tienen
   que dejarle sitio con su propio "bottom" en vez de partir de 0. Fondo
   blanco semitransparente (no c-surface: es fija, no debe cambiar con el
   tema claro/oscuro — son anuncios, no chrome de la interfaz) para que
   quede legible tanto si el logo trae fondo transparente como blanco. */
.ads-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  margin: 0 0.4rem 0.4rem 0.4rem;
  padding: 0.4rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 1);
  /* Por encima de los overlays del mapa, para que la banda no quede tapada
     justo en la primera pantalla, que es cuando más se ve. */
  z-index: 11;
}

.ads-layer[hidden] {
  display: none;
}

/* Cinta que desplaza los logos de derecha a izquierda en bucle continuo, uno
   tras otro, para que cada uno tenga su turno a tamaño legible en vez de
   encogerse todos a la vez para caber a un tiempo.

   El bucle lo monta initAdsMarquee (tracks.js): el marcado trae UNA pasada de
   logos y el JS la clona hasta cubrir de sobra el ancho visible, mide lo que
   ocupa una pasada completa (incluido el gap que la separa de la siguiente) y
   lo publica en --ads-shift. La animación desplaza exactamente esa distancia,
   así que al volver a "from" el clon siguiente cae justo donde estaba el
   original: sin salto ni hueco, con el número de logos que haya.

   Antes esto era un translateX(-50%) sobre un marcado con las imágenes
   duplicadas a mano, y fallaba por dos motivos: el gap entre las dos mitades
   hacía que el 50% no cayera en el punto de repetición (de ahí el salto), y
   con pocos logos la cinta no llegaba a cubrir la banda (de ahí el hueco en
   blanco). width:max-content + flex-shrink:0 evitan que el flex del padre
   intente encogerla para caber. */
.ads-layer__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 20px;
  width: max-content;
  /* Altura explícita: el height:100% de los logos se resuelve contra ESTA
     caja, y sin ella la cinta crecía hasta el alto natural de los PNG (120px)
     y se salía de la banda. Con 100% hereda el alto útil de .ads-layer
     (descontado su padding, que es border-box). */
  height: 100%;
  /* Valores de arranque: los reescribe initAdsMarquee con el ancho real de
     una pasada y su duración proporcional. Sin JS la cinta simplemente no se
     mueve, que es preferible a moverse dando saltos. */
  --ads-shift: 0px;
  animation: ads-scroll var(--ads-duration, 32s) linear infinite;
}

/* Pausa al pasar el ratón — para poder fijarse en un logo (o pulsarlo, si
   algún día lleva enlace) sin que se mueva debajo del cursor mientras se
   mira. */
.ads-layer:hover .ads-layer__track {
  animation-play-state: paused;
}

@keyframes ads-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--ads-shift) * -1));
  }
}

/* Respeta "reducir movimiento" del sistema: la banda se queda quieta y
   muestra los primeros logos, en vez de desplazarse sin parar. */
@media (prefers-reduced-motion: reduce) {
  .ads-layer__track {
    animation: none;
  }
}

/* Cada logo a su tamaño real (el alto de la banda, ancho según su propia
   proporción — add-01 es el doble de ancho que add-02/add-03, así que sale
   el doble de grande) en vez de repartir el mismo hueco a todos.
   object-fit:contain reencaja cada imagen dentro de esa altura fija sin
   deformarla. flex-shrink:0 para que ninguna se achique al ir todas en una
   fila más ancha que el propio contenedor (que es justo el punto: por eso
   se desplaza en vez de encajar entera). */
.ads-layer img {
  height: 100%;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Círculo blanco dentro de la propia banda (esquina superior derecha) —
   fondo blanco fijo (no c-surface) + sombra para que se lea bien encima de
   un logo con fondo transparente o de cualquier color. */
.ads-layer__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--c-muted);
  font-size: 0.62rem;
  line-height: 1;
  box-shadow: 0 1px 3px var(--c-shadow-xs);
  z-index: 1;
}

.ads-layer__close:hover {
  color: var(--c-error);
}

/* Al cerrar la banda de anuncios (ver tracks.js, marca .map-area con esta
   clase), track-tabs/la leyenda de elevación/el control de escala bajan a
   ocupar el hueco que deja — mismos valores que tenían antes de que
   existiera .ads-layer. */
.map-area.ads-collapsed .track-tabs {
  bottom: 0;
}

.map-area.ads-collapsed .elevation-legend {
  bottom: 46px;
}

.map-area.ads-collapsed .maplibregl-ctrl-bottom-right {
  bottom: 40px;
}

.ads-layer__close[hidden] {
  display: none;
}

/* Botón minimalista para volver a abrir la banda de anuncios una vez
   cerrada — mismo sitio, mismo margen que .ads-layer, pero solo lo justo
   para leerse como una pestaña discreta, no como una acción principal. */
.ads-reopen-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 0.4rem 0.4rem 0;
  padding: 4px 12px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-tan);
  box-shadow: 0 1px 3px var(--c-shadow-xs);
  /* Mismo nivel que .ads-layer, y por la misma razón: por debajo queda
     tapado por los overlays del mapa en la pantalla inicial. */
  z-index: 11;
}

.ads-reopen-btn:hover {
  color: var(--c-text);
}

.ads-reopen-btn[hidden] {
  display: none;
}

/* Leyenda de "Elevation colors" (map.js) — flotante, justo encima de
   .track-tabs (172px de bottom despeja su pill + la banda de anuncios de
   abajo, más el margen de esta misma regla, sin depender de que track-tabs
   esté visible o no en ese momento). */
.elevation-legend {
  position: absolute;
  left: 0;
  bottom: 132px;
  margin: 0 0 0 0.4rem;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--c-surface);
  border: 1px solid var(--c-tan);
  padding: 7px 10px;
  box-shadow: 0 1px 3px var(--c-shadow-xs);
  z-index: 2;
}

.elevation-legend[hidden] {
  display: none;
}

.elevation-legend__bar {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 4px;
}

.elevation-legend__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--c-muted);
}

/* Leyenda de "Slope angle" — mismo contenedor flotante que
   .elevation-legend__bar/__ticks (ver renderElevationLegend, map.js), pero
   con 4 bandas discretas en vez de un degradado continuo. */
.elevation-legend__slope-row {
  display: flex;
  gap: 6px;
}

.elevation-legend__slope-chip {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.elevation-legend__slope-swatch {
  width: 100%;
  height: 10px;
  border-radius: 3px;
}

.elevation-legend__slope-label {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--c-muted);
}

.track-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--c-surface);
  border: 1px solid var(--c-tan);
  padding: 5px 12px 5px 8px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--c-text);
  box-shadow: 0 1px 3px var(--c-shadow-xs);
  cursor: pointer;
}

.track-tab.is-active {
  color: var(--c-white);
}

.track-tab__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.track-tab__close {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--c-muted);
}

.track-tab.is-active .track-tab__close {
  color: var(--c-white);
}

.track-tab__visibility {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
}

.track-tab.is-active .track-tab__visibility {
  color: var(--c-white);
}

.track-tab.is-hidden {
  opacity: 0.5;
}

.profile-panel {
  flex-shrink: 0;
  height: 22vh;
  min-height: 130px;
  max-height: 190px;
  display: flex;
  border-top: 1px solid var(--c-hairline);
  background: var(--c-surface);
}

.profile-chart {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.profile-chart__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.profile-chart__grid {
  stroke: var(--c-hairline);
  stroke-width: 1;
}

.profile-chart__area {
  stroke: none;
  fill: var(--c-profile);
  opacity: 0.9;
}

:root[data-theme="terra"] .profile-chart__area {
  fill: var(--c-olive);
}

.profile-chart__line {
  fill: none;
  stroke-width: 1;
}

/* Segunda línea de "Compare tracks" (Tools tab) — discontinua para
   distinguirla de la línea del track activo; el color lo pone tracks.js
   inline (stroke), como ya hace con .profile-chart__line. */
.profile-chart__line--compare {
  stroke-dasharray: 4 3;
}

/* Bandas de "Climbs" (Tools tab) — el fill lo pone tracks.js inline según
   categoría del puerto (ver CLIMB_CATEGORY_COLORS), aquí solo la opacidad
   para que el terreno debajo siga siendo legible. */
.profile-chart__climb-band {
  stroke: none;
  opacity: 0.25;
}

/* Filete de tipo de superficie: 5px de alto en la base del perfil, con
   rectángulos de color para cada tramo según paved/unpaved/unknown. Oculto
   por defecto hasta que el usuario lo activa desde la leyenda (Surface type)
   o desde el clic en "Calculate Surface Type" del panel Tools. */
.profile-chart__surface {
  stroke: none;
}

/* Línea que despega el filete del relleno del perfil — ver
   .profile-chart__surface-sep en renderProfile. */
.profile-chart__surface-sep {
  fill: var(--c-surface);
}

.profile-chart__grid-label {
  position: absolute;
  left: 6px;
  transform: translateY(calc(-100% - 2px));
  padding: 0 4px 1px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-chart-label-bg);
  pointer-events: none;
  z-index: 1;
}

.profile-chart__bullet {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

/* Línea vertical + caja de valor al pasar el ratón (updateScrub, tracks.js)
   — igual patrón opacity 0/1 que .profile-chart__bullet, misma capa. */
.profile-chart__vline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ffffff;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.profile-chart__value-box {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  background: var(--c-dark);
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

/* Caja con el nombre del waypoint, cuando la línea blanca del hover pasa
   sobre uno (ver updateScrub) — arriba en vez de abajo (como
   .profile-chart__value-box) para que ambas cajas puedan verse a la vez sin
   solaparse. */
.profile-chart__waypoint-box {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  background: var(--c-dark);
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

/* Iconos de waypoints sobre el perfil de Elevation (toggle "Waypoints" en
   profile-legend, ver renderProfileWaypoints en tracks.js), en su distancia
   y altura reales sobre la curva — sin tooltip ni enlace, pero al pasar la
   línea del hover por encima aparece su nombre en
   .profile-chart__waypoint-box. Círculo blanco detrás + icono enmascarado
   encima, mismo patrón que .waypoint-marker/.waypoint-marker__icon (map.js,
   marcadores del mapa), a un tamaño más pequeño para caber en el gráfico. */
.profile-chart__waypoints {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.profile-chart__waypoint {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 1px 4px var(--c-shadow-marker);
}

.profile-chart__waypoint-icon {
  width: 18px;
  height: 18px;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.profile-legend {
  flex-shrink: 0;
  width: 148px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-align: right;
  align-items: flex-start;
}

.profile-legend li {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--c-olive);
  letter-spacing: 0.01em;
  cursor: pointer;
}

.profile-legend li:hover {
  color: var(--c-text);
}

.profile-legend li.is-active {
  color: var(--c-text);
  font-weight: 700;
}

.profile-legend li.is-disabled {
  color: var(--c-disabled);
  cursor: default;
  pointer-events: none;
}

/* ============================================================
   Sidebar derecha — panel flotante sobre el mapa
   ------------------------------------------------------------ */

.sidebar--right {
  position: absolute;
  top: var(--panel-gap);
  right: var(--panel-gap);
  width: var(--sidebar-right-w);
  z-index: 3;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-hairline);
  box-shadow: 0 4px 16px var(--c-shadow-sm);
  background: var(--c-surface);
}

.info-toggle-input {
  display: none;
}

.info-header {
  flex-shrink: 0;
  height: 38px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 0 0;
  background: var(--c-tan);
  color: var(--c-text);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.info-tabs {
  display: flex;
  flex: 1 1 auto;
  gap: 1px;
}

.info-tabs__btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.info-tabs__btn:hover {
  color: var(--c-text);
  background: var(--c-dark-grey);
}

.info-tabs__btn.is-active {
  color: var(--c-text);
  background: var(--c-surface);
  border-bottom-color: var(--c-olive);
}

.info-tabs__btn.is-active:hover {
  background: var(--c-surface);
}

.info-toggle-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.info-toggle-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: var(--c-tool-icon);
}

.info-toggle-btn--close {
  display: none;
}

.info-toggle-btn--open {
  width: 20px;
  height: 20px;
  font-size: 0.9rem;
}

.sidebar--right:has(.info-toggle-input:checked) .info-toggle-btn--close {
  display: flex;
}

.sidebar--right:has(.info-toggle-input:checked) .info-toggle-btn--open {
  display: none;
}

.info-collapse {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.sidebar--right:has(.info-toggle-input:checked) .info-collapse {
  height: min(75vh, 640px);
}

.info-body,
.weather-body,
.tools-body {
  height: 100%;
  background: var(--c-surface);
  overflow-y: auto;
  padding: 10px 18px;
}

.tab-banner {
  display: block;
  width: 100%;
  height: auto;
  padding: 0 10px;
}

.info-support {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 12px;
}

.info-support__text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--c-text);
}

.info-share {
  padding-top: 12px;
}

.info-share__label {
  margin: 0 0 6px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}

.info-share__row {
  display: flex;
  gap: 6px;
}

.info-share__btn {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-grey);
  color: var(--c-text);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.info-share__btn:hover {
  background: var(--c-dark-grey);
}

.info-share__btn.is-copied {
  background: var(--c-olive);
  color: var(--c-white);
}

.info-share__btn .btn-icon {
  width: 16px;
  height: 16px;
}

.info-follow {
  padding-top: 12px;
}

.info-follow__label {
  margin: 0 0 6px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}

.info-follow__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-follow__icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: middle;
  object-fit: contain;
  fill: currentColor;
}

.info-follow__list .layer-style-btn {
  background: var(--c-grey);
  color: var(--c-text);
  border-color: var(--c-dark-grey);
  text-align: left;
  text-decoration: none;
  margin: 0;
}

.info-follow__list .layer-style-btn:hover {
  background: var(--c-dark-grey);
  border-color: var(--c-grey);
}

.info-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 4px;
}

.info-contact__title {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}

.info-contact__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--c-text);
}

.info-contact__input {
  padding: 6px 8px;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  color: var(--c-text);
  border: 1px solid var(--c-tan-line);
  background: var(--c-surface);
  resize: vertical;
}

.info-contact__submit {
  margin-top: 6px;
  padding: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--c-white);
  background: var(--c-olive);
  transition: background-color 0.15s ease;
}

.info-contact__submit:hover {
  background: var(--c-olive-hover);
}

.info-contact__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.info-contact__response {
  font-size: 0.68rem;
  line-height: 1.4;
}

.info-contact__response .form-msg--success {
  color: var(--c-olive);
}

.info-contact__response .form-msg--error {
  color: var(--c-error);
}

.maplibregl-ctrl-top-right {
  top: calc(2 * var(--panel-gap) + 38px);
}

.map-area:has(.info-toggle-input:checked) .maplibregl-ctrl-top-right {
  top: calc(2 * var(--panel-gap) + 38px + min(60vh, 480px));
}

.info-basic {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
}

.info-basic dt {
  font-size: 0.68rem;
  color: var(--c-muted);
}

.info-basic dd {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-text);
  text-align: right;
}

.info-basic--stats {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-hairline);
}

/* Tabla lado a lado de "Compare tracks" (Tools tab) — misma tipografía que
   .info-basic, en formato tabla porque aquí son dos columnas de valores
   (track activo / track elegido), no una sola. */
.compare-stats {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
}

.compare-stats th,
.compare-stats td {
  padding: 4px 2px;
  font-size: 0.68rem;
  text-align: right;
}

.compare-stats th:first-child,
.compare-stats td:first-child {
  text-align: left;
  color: var(--c-muted);
  font-weight: 400;
}

.compare-stats tr:first-child th {
  padding-bottom: 6px;
  font-weight: 700;
  border-bottom: 1px solid var(--c-hairline);
}

.compare-stats tbody td,
.compare-stats tr:not(:first-child) td {
  font-weight: 600;
  color: var(--c-text);
}

/* Filas de la tabla "Segments" (panel Info): son clicables (llevan el cursor
   del perfil al inicio del tramo) y se iluminan con el color del segmento
   mientras el cursor del perfil pasa por él — ese fondo lo pone tracks.js
   punto por punto, aquí solo va lo que no depende del color. */
.compare-stats__row--climb {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.compare-stats__row--climb:hover {
  background-color: var(--c-hairline);
}

.weather-forecast {
  width: 100%;
  margin-top: 30px;
  padding-top: 10px;
  border-top: 1px solid var(--c-hairline);
  border-collapse: collapse;
  table-layout: fixed;
}

.weather-forecast th,
.weather-forecast td {
  padding: 4px 2px;
  font-size: 0.64rem;
  line-height: 1.3;
  text-align: center;
}

.weather-forecast thead th {
  padding-bottom: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-hairline);
}

.weather-forecast tbody tr:not(:first-child) td {
  padding-top: 7px;
}

.weather-forecast tbody td {
  font-weight: 600;
  color: var(--c-text);
}

.weather-forecast__icon {
  line-height: 1;
  cursor: default;
}

.weather-forecast__icon-img {
  width: 40px;
  height: 40px;
}

/* "Current weather - track" (pestaña Weather): icono de la condición actual
   centrado bajo el título, con su leyenda de texto debajo (mismo estilo que
   .stats-box__desc, solo centrado en vez de heredar la alineación normal). */
.weather-current__icon {
  display: block;
  width: 58px;
  height: 58px;
  margin: 4px auto 0;
}

/* .stats-box__desc trae un margin-top negativo pensado para pegarse a una
   cifra grande justo encima; aquí encima hay un icono de 58px, no texto, así
   que se necesita separación positiva en vez de solaparse — y, al ser la
   única leyenda "suelta" (sin una cifra al lado marcando el tamaño de letra
   de referencia), sube también el tamaño de fuente para que no quede
   perdida bajo el icono. */
.weather-current__caption {
  margin-top: 3px;
  font-size: 1rem;
  text-align: center;
  color: var(--c-text);
}

/* Icono de actividad en la cabecera de Info — mismo tamaño y centrado que
   .weather-current__icon. Es un <img> y no una máscara: img/icon-activity-*.svg
   son insignias hexagonales a dos tonos (hexágono claro + pictograma oscuro),
   que una máscara aplanaría a un hexágono macizo; tracks.js elige el src
   según track.cmt (ver ACTIVITY_ICONS). */
.info-activity-icon {
  display: block;
  width: 58px;
  height: 58px;
  margin: 12px auto 0;
  object-fit: contain;
}

.info-name {
  margin: 20px 0 10px 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-text);
}

.info-link {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-muted);
  text-decoration: none;
}

/* Fecha/Actividad: mismo tamaño/peso que un valor de .info-basic dd (de
   donde salieron), pero sin dt — el propio texto ya dice qué es. */
/* Fecha + dificultad en una sola línea (panel Info): la dificultad se empuja
   sola a la derecha con margin-left:auto, así queda igual de pegada al borde
   tanto si hay fecha como si no. */
.info-meta-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.info-meta-row .info-meta-line,
.info-meta-row .info-difficulty {
  margin-bottom: 0;
}

.info-meta-row .info-difficulty {
  margin-left: auto;
}

.info-meta-line {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-text);
}

/* La fecha, ya dentro de la cabecera centrada (bajo la actividad), conserva
   la tipografía de .info-meta-line y solo cambia de alineación. */
.info-meta-line--center {
  text-align: center;
}

/* Estrellas del rating (panel Info, a la izquierda de la dificultad): cinco
   ★ grises con una copia verde superpuesta y recortada por ancho, para poder
   pintar medias estrellas (4,5 / 5) sin un glifo aparte. */
.info-rating {
  display: inline-flex;
  gap: 2px;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--c-dark-grey);
}

.info-rating__star {
  position: relative;
  display: inline-block;
}

.info-rating__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--c-conform);
}

/* Dificultad del track (panel Info): misma tipografía y alineación a la
   derecha que un dd de .info-basic, pero suelto — ya no lleva etiqueta
   "Difficulty" a la izquierda, así que no necesita la rejilla del dl. */
.info-difficulty {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: right;
  color: var(--c-text);
}

.info-desc {
  margin: 8px 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--c-text);
  white-space: pre-line;
}

.info-waypoint-group {
  margin: 14px 0 0;
}

.info-waypoint-group.is-hidden {
  opacity: 0.5;
}

.info-waypoint-group.is-collapsed .info-waypoint-list {
  display: none;
}

.info-waypoint-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 2px;
  background-color: var(--c-cream);
  border: 1px solid var(--c-tan-line);
}

.info-waypoint-group__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text);
}

.info-waypoint-group__label-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1px 3px;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-tan-line);
}

.info-waypoint-group__rename {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  color: var(--c-text);
  opacity: 0.7;
}

.info-waypoint-group__rename:hover {
  opacity: 1;
}

.info-waypoint-group__collapse {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-text);
}

.info-waypoint-group__toggle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-tool-icon);
}

.info-waypoint-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-waypoint-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-waypoint-list__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 90%;
  mask-size: 90%;
}

.info-waypoint-list__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--c-text);
}

.info-waypoint-list__name:hover {
  color: var(--c-olive);
  text-decoration: underline;
}

/* ============================================================
   Modal de confirmación — genérico, centrado en pantalla
   ------------------------------------------------------------ */

.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.confirm-modal {
  width: 280px;
  background: var(--c-surface);
  padding: 20px 22px;
  box-shadow: 0 8px 30px var(--c-shadow-md);
  border: 1px solid var(--c-text);
  border-radius: 4px;
}

.confirm-modal--wide {
  width: 480px;
}

.confirm-modal__logo {
  display: block;
  height: 160px;
  width: auto;
  margin: 1rem auto;
}

.confirm-modal__text {
  margin: 0 0 16px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--c-text);
}

/* Párrafo destacado del modal (el de apoyo al proyecto en Export): mismo
   texto, un punto más grande y con algo más de aire debajo para que no se
   lea como una nota al pie más. */
.confirm-modal__text--lead {
  font-size: 0.92rem;
  line-height: 1.4;
  margin-bottom: 20px;
}

/* Modal "Share": nombre del track en negrita y sus stats en un tamaño más
   grande, a modo de cabecera. */
.confirm-modal__share-name {
  margin: 4px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-text);
}

.confirm-modal__share-stats {
  margin: 2px 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
}

/* Input de solo lectura + "Copy link" en la misma fila, 70/30 — flex-basis:0
   con flex-grow 7/3 reparte el espacio sobrante en esa proporción sin
   importar el contenido de cada uno. */
.confirm-modal__link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.confirm-modal__link-row .waypoint-form__input {
  flex: 7 1 0;
  margin-top: 0;
}

.confirm-modal__link-row .layer-style-btn {
  flex: 3 1 0;
  text-align: center;
}

/* "Copy link": icono + texto centrados. */
.confirm-modal__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

/* FAQ desplegable al final de la modal "Info GEPYX" (ver buildFaqAccordion
   en tracks.js) — <details>/<summary> nativos, sin JS propio de apertura. */
.confirm-modal__faq {
  margin: 16px 0 0;
  padding-top: 12px;
}

.confirm-modal__faq-item {
  border-bottom: 1px solid var(--c-hairline);
}

.confirm-modal__faq-item summary {
  padding: 8px 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
}

.confirm-modal__faq-item summary::-webkit-details-marker {
  display: none;
}

.confirm-modal__faq-item summary::after {
  content: "+";
  float: right;
  color: var(--c-muted);
}

.confirm-modal__faq-item[open] summary::after {
  content: "\2212";
}

.confirm-modal__faq-item p {
  margin: 0 0 10px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--c-muted);
}

.confirm-modal__actions {
  display: flex;
  gap: 8px;
}

.confirm-modal__actions .layer-style-btn {
  flex: 1 1 auto;
  text-align: center;
}

.confirm-modal__actions--stacked {
  flex-direction: column;
}

.confirm-modal__actions-row {
  display: flex;
  gap: 8px;
}

.confirm-modal__actions-row .layer-style-btn {
  flex: 1 1 auto;
  text-align: center;
}

.confirm-modal__confirm {
  background: var(--c-conform);
  border-color: var(--c-conform-dark);
  color: var(--c-white);
  font-weight: 700;
}

.confirm-modal__confirm:hover {
  background: var(--c-conform-hover);
  border-color: var(--c-conform-hover);
}

/* ============================================================
   Overlay móvil
   ------------------------------------------------------------ */

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  overflow-y: auto;
  background: var(--c-dark);
  color: var(--c-white);
  border: 2px solid var(--c-olive);
}

/* ===== Pantalla 1: menú de inicio ("GPXIA is a track editor...") ===== */

.mobile-home {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  text-align: center;
  background: url("../img/mobile-bg.webp") center / cover no-repeat;
}

.mobile-home[hidden] {
  display: none;
}

.mobile-home__logo {
  width: min(150px, 40vw);
  height: auto;
  object-fit: contain;
}

.mobile-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.mobile-home__text {
  margin: 0;
  padding: 10px;
  max-width: 380px;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--c-overlay-text);
  font-weight: bold;
}

.mobile-home__brand {
  color: var(--c-olive);
  font-weight: 700;
}

.mobile-home__illustration {
  width: 100%;
  max-width: 360px;
  height: auto;
}

.mobile-home__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin-top: 4px;
}

.mobile-home__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-home__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 10px;
  background: var(--c-olive);
  color: var(--c-white);
  font-size: 0.8rem;
  font-weight: 700;
  transition: background-color 0.15s ease;
}

.mobile-home__btn:hover {
  background: var(--c-olive-hover);
}

.mobile-home__btn--donate {
  background: var(--c-donate);
}

.mobile-home__btn--donate:hover {
  filter: brightness(0.92);
}

.mobile-home__btn--follow {
  justify-content: space-between;
  text-align: left;
}

.mobile-home__btn[hidden] {
  display: none;
}

@keyframes mobile-follow-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

.mobile-home__btn--pulse {
  animation: mobile-follow-pulse 0.9s ease-in-out 3;
}

.mobile-home__follow-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mobile-home__follow-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.mobile-home__follow-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-home__icon-badge {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}

.mobile-home__footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 360px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--c-muted);
}

/* Fila de acciones del pie: "Keep screen on" + "Install app" al 50% cada uno.
   El grid es auto-ajustable a propósito — el botón de instalar se oculta si el
   navegador no lo soporta o la app ya está instalada (ver tracks.js), y
   entonces 1fr reparte todo el ancho al que queda, sin dejar un hueco. */
.mobile-home__footer-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* flex:1 en vez de columnas de grid: un botón con [hidden] desaparece del
   reparto (display:none), así que al ocultarse "Install app" el de wake lock
   se queda con todo el ancho. Con grid, la columna del oculto seguía contando
   y dejaba medio pie vacío. min-width:0 para que el texto largo no fuerce
   una columna más ancha que la otra. */
.mobile-home__footer-actions > .mobile-home__wakelock-btn {
  flex: 1 1 0;
  min-width: 0;
}

/* .mobile-home__wakelock-btn declara display:flex, que gana al display:none
   que el atributo [hidden] trae de la hoja del navegador — sin esto el botón
   de instalar seguía ocupando su mitad del pie aunque estuviera oculto. */
.mobile-home__wakelock-btn[hidden] {
  display: none;
}

.mobile-home__wakelock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--c-olive);
  border-radius: 10px;
  background: transparent;
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: center;
}

.mobile-home__wakelock-btn.is-active {
  background: var(--c-olive);
  color: var(--c-dark);
}

.mobile-home__wakelock-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mobile-home__footer-links {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.mobile-home__footer-link {
  min-height: 44px;
  text-align: left;
  color: var(--color-white);
}

#mobile-about-contact {
  text-align: right;
}

/* ===== Pantalla 2: seguir track ===== */

.mobile-follow {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.mobile-follow[hidden] {
  display: none;
}

.mobile-follow__topbar {
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--c-dark);
  flex-shrink: 0;
}

.mobile-follow__logo {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}

.mobile-follow__topbar-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.mobile-follow__substatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  background: var(--c-olive);
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--c-white);
  transition: background-color 0.2s ease;
}

#mobile-follow-substatus.is-off-track {
  background: var(--c-error);
}

.mobile-follow__substatus-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mobile-follow__substatus-gps {
  flex-shrink: 0;
  color: var(--c-olive-dark);
  font-weight: bold;
}

.mobile-follow__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
}

.mobile-follow__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  fill: var(--c-white);
  transition: transform 0.15s linear;
}

.mobile-follow__icon-btn--compass {
  width: 44px;
  height: 44px;
}

.mobile-follow__icon--compass {
  width: 48px;
  height: 48px;
}

.mobile-follow__map-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.mobile-follow__map {
  width: 100%;
  height: 100%;
}

.mobile-follow__side-actions {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 0 8px 8px 0;
  background: rgba(49, 51, 48, 0.8);
  box-shadow: 0 2px 8px var(--c-shadow-md);
}

.mobile-follow__side-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.mobile-follow__side-btn[hidden] {
  display: none;
}

.mobile-follow__side-pause-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-follow__side-pause-options[hidden] {
  display: none;
}

.mobile-follow__map-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--c-dark);
  color: var(--c-white);
  font-size: 0.68rem;
  font-weight: 700;
  box-shadow: 0 2px 6px var(--c-shadow-md);
}

.mobile-follow__map-btn.is-paused {
  background: var(--c-olive);
}

.mobile-follow__map-btn[hidden] {
  display: none;
}

.mobile-follow__map-btn--danger {
  background: var(--c-error);
}

.mobile-follow__map-btn--success {
  background: var(--c-olive);
}

.mobile-follow__pause-options {
  display: flex;
  gap: 8px;
}

.mobile-follow__pause-options[hidden] {
  display: none;
}

.mobile-follow__pause-options .mobile-follow__map-btn {
  padding: 9px 14px;
}

.mobile-follow__stats {
  min-height: 80px;
  display: grid;
  grid-template-columns: 20fr 80fr 20fr;
  align-items: center;
  padding: 8px;
  background: var(--c-dark);
  flex-shrink: 0;
}

#mobile-screen-tracklist .mobile-follow__stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Va al final de .mobile-tracklist__list (lo crea renderMobileTracklist), no
   en la barra de stats: el margin auto lo centra ahí dentro, donde antes lo
   centraba el flex del contenedor de stats, y el margen superior lo separa
   del último track de la lista. */
.mobile-tracklist__delete-all {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 60%;
  margin: 18px auto 4px;
  padding: 10px;
  border-radius: 10px;
  background: var(--c-error);
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.78rem;
  text-align: center;
}

.mobile-follow__next-wp {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding-bottom: 6px;
  font-size: 0.78rem;
  color: var(--c-white);
}

.mobile-follow__next-wp[hidden] {
  display: none;
}

.mobile-follow__stats-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-follow__stats-col--data {
  flex-direction: column;
  gap: 4px;
}

.mobile-follow__stats-direction-icon {
  width: 48px;
  height: 48px;
  transition: transform 0.15s linear;
}

.mobile-follow__stats-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
}

.mobile-follow__stats-row[hidden] {
  display: none;
}

.mobile-follow__stats-row--current {
  gap: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-white);
}

.mobile-follow__stats-row--current > span {
  padding: 0 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.mobile-follow__stats-row--current > span:first-child {
  padding-left: 0;
}

.mobile-follow__stats-row--current > span:last-child {
  padding-right: 0;
  border-right: none;
}

.mobile-follow__stats-row--total {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-muted);
}

.mobile-follow__progress {
  height: 8px;
  background: var(--c-olive-dark);
  flex-shrink: 0;
  overflow: hidden;
}

.mobile-follow__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--c-olive);
  transition: width 0.3s ease;
}

.mobile-stats__progress {
  width: calc(100% + 40px);
  margin: -6px -20px 0;
}

.mobile-stats__profile {
  flex: 0 0 110px;
  width: calc(100% + 40px);
  margin: 12px -20px 0;
  background: transparent;
}

.mobile-elevation-profile .profile-chart__area {
  fill: var(--c-olive);
}

.mobile-follow__profile {
  position: relative;
  flex: 0 0 12px;
  cursor: pointer;
}

.mobile-follow__profile-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: var(--c-white);
  overflow: hidden;
  transition:
    height 0.25s ease,
    background 0.25s ease;
}

.mobile-follow__profile.is-expanded .mobile-follow__profile-inner {
  height: 110px;
  background: transparent;
  overflow: visible;
}

.mobile-map-waypoint {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--c-white);
  box-shadow: 0 1px 4px var(--c-shadow-marker);
}

.mobile-map-bullet {
  width: 20px;
  height: 20px;
}

/* ===== Pantalla 3: stats en vivo ===== */

.mobile-stats {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 20px 20px 0;
  text-align: center;
  background: url("../img/mobile-bg.webp") center / cover no-repeat;
}

.mobile-stats[hidden] {
  display: none;
}

.mobile-stats__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.mobile-stats__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-stats__logo {
  height: 22px;
  width: auto;
}

.mobile-stats__hero-value {
  margin: 0;
  font-size: 5.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-white);
}

.mobile-stats__hero-speed-wrap {
  position: relative;
  display: inline-block;
}

.mobile-stats__speed-trend {
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 4px;
  transform: translateY(-50%);
}

.mobile-stats__speed-trend-icon {
  display: block;
  width: 32px;
  height: 32px;
}

.mobile-stats__direction {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 8px;
  transform: translateY(-50%);
}

.mobile-stats__direction-icon {
  display: block;
  width: 42px;
  height: 42px;
  transition: transform 0.15s linear;
}

.mobile-stats__hero-value--time {
  font-size: 2.4rem;
  margin-top: 10px;
}

.mobile-stats__hero-label {
  margin: 0;
  font-size: 0.7rem;
  color: var(--c-overlay-text);
}

.mobile-settings__panel.mobile-stats__panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px;
  margin: 0 12px;
  overflow-y: auto;
  background: transparent;
}

.mobile-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 12px;
}

.mobile-stats__cell-value {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--c-white);
  line-height: 1;
}

.mobile-stats__cell-label {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--c-overlay-text);
}

.mobile-stats__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.mobile-stats__weather {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-stats__weather-col .mobile-stats__cell-value {
  font-size: 1.15rem;
}

.mobile-stats__row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-stats__row-label {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-white);
}

/* Bandas de segmentos de esta pantalla: van POR ENCIMA de la silueta y
   recortadas a ella (ver el clipPath en index.html). Al quedar contenidas
   dentro del relleno ya no invaden el fondo de la pantalla, así que admiten
   algo más de color que cuando ocupaban todo el alto del gráfico — aun así
   por debajo del .25 de escritorio, que tiene mucha más altura. */
.mobile-stats__profile .profile-chart__climb-band {
  opacity: 0.35;
}

/* Crédito bajo los botones del pie de la pantalla de inicio — más apagado y
   pequeño que ellos, para cerrar la columna sin competir por la atención. */
.mobile-home__credit {
  margin: 2px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--c-white);
  text-align: center;
}

/* La ficha de Track info se construye con las clases del panel Info de
   escritorio, que allí viven dentro de un panel con padding propio; aquí el
   contenedor es el panel en blanco pelado, así que el margen lo pone esto. */
#mobile-trackinfo-body,
#mobile-weather-body {
  padding: 18px 16px 24px;
}

/* Banner de cabecera de la pantalla Desktop: a todo el ancho del panel, sin
   el padding lateral que llevan los párrafos. */
.mobile-info__banner {
  display: block;
  width: 65%;
  height: auto;
  margin: 1rem auto;
}

/* Párrafo destacado de la pantalla Desktop: la frase que resume para qué
   sirve el editor de escritorio, por delante del detalle que va debajo. */
/* Punto del color de la categoría del segmento (mismos colores que las bandas
   del perfil y que la tabla Segments de escritorio, ver CLIMB_CATEGORY_COLORS)
   — lo pinta updateMobileStatsSegment, aquí solo va la forma. */
.mobile-stats__segment-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: baseline;
  background: var(--c-muted);
}

.mobile-stats__row-values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-white);
}

.mobile-stats__row-values--plain {
  gap: 24px;
}

.mobile-stats__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.mobile-stats__arrow-icon {
  display: block;
  width: 32px;
  height: 32px;
  background-color: var(--c-white);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.mobile-stats__arrow-icon--prev {
  -webkit-mask-image: url("../img/mobile-icon-back.svg");
  mask-image: url("../img/mobile-icon-back.svg");
}

.mobile-stats__arrow-icon--next {
  -webkit-mask-image: url("../img/mobile-icon-next.svg");
  mask-image: url("../img/mobile-icon-next.svg");
}

/* ===== Pantalla de resumen (Stop) ===== */

.mobile-stop__panel {
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  overflow-y: auto;
  --c-cream: #f4f1ee;
}

.mobile-stop__title-wrap {
  position: relative;
  margin: 0 0 18px;
}

.mobile-stop__title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 38px 10px 14px;
  border: 1px solid var(--c-tan-line);
  border-radius: 8px;
  background: var(--c-cream);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-dark);
  text-align: left;
}

.mobile-stop__title:focus {
  outline: none;
  border-color: var(--c-olive);
}

.mobile-stop__title-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
}

.mobile-stop__title::placeholder {
  color: var(--c-muted);
}

.mobile-stop__grid {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 18px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  font-size: 0.85rem;
}

.mobile-stop__row-label {
  padding: 4px 0;
  border-bottom: 1px solid var(--c-hairline);
  color: var(--c-muted);
  text-align: right;
}

.mobile-stop__row-value {
  padding: 4px 0;
  border-bottom: 1px solid var(--c-hairline);
  font-weight: 700;
  color: var(--c-dark);
  text-align: left;
  font-size: 1rem;
}

.mobile-stop__actions {
  display: flex;
  margin-top: auto;
  padding-top: 22px;
  gap: 10px;
}

.mobile-stop__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
}

.mobile-stop__action[hidden] {
  display: none;
}

.mobile-stop__action-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.mobile-stop__action--delete {
  flex: 0 0 48px;
  padding: 0;
}

.mobile-stop__action--delete .mobile-stop__action-icon {
  width: 32px;
  height: 32px;
}

.mobile-stop__action--export,
.mobile-stop__action--share {
  flex: 1 1 0;
}

.mobile-stop__action--export {
  background: var(--c-olive);
}

.mobile-stop__action--share {
  background: var(--c-dark);
}

.mobile-settings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mobile-settings__back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.mobile-settings__back-btn img {
  width: 32px;
  height: 32px;
}

.mobile-settings__header-icons {
  display: flex;
  gap: 8px;
}

.mobile-settings__placeholder-icon {
  width: 32px;
  height: 32px;
  background: #a8a8a8;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.mobile-settings__placeholder-icon--filled {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  clip-path: none;
}

.mobile-settings__placeholder-icon--filled img {
  width: 44px;
  height: 44px;
}

.mobile-settings__panel {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-radius: 12px;
  background: var(--c-white);
  --c-surface: var(--c-white);
  --c-text: var(--c-dark);
  --c-muted: #a9a29a;
  --c-tan-line: #d9cec2;
  --c-olive-tint: #eef0ea;
}

.mobile-settings__menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-dark);
  border-bottom: 1px solid var(--c-hairline);
  text-align: left;
}

.mobile-settings__menu-item-chevron {
  color: var(--c-muted);
  font-size: 1.1rem;
  line-height: 1;
}

.mobile-settings__brand {
  display: block;
  width: 80%;
  margin: auto auto 8px;
}

.mobile-settings__brand-img {
  display: block;
  width: 30%;
  height: auto;
  margin: 1rem auto;
}

.mobile-settings__brand-text {
  margin: 0;
  padding: 0 14px 16px;
  font-size: 0.72rem;
  color: var(--c-muted);
  font-style: italic;
  text-align: center;
}

/* ===== Pantalla: Track list ===== */
.mobile-tracklist__list {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  background: var(--c-white);
}

.mobile-follow__blank-panel {
  width: 100%;
  height: 100%;
  background: var(--c-white);
}

#mobile-screen-about .mobile-follow__map-wrap,
#mobile-screen-desktop .mobile-follow__map-wrap,
#mobile-screen-trackinfo .mobile-follow__map-wrap,
#mobile-screen-weather .mobile-follow__map-wrap {
  display: flex;
  flex-direction: column;
  /* El texto + FAQ ya no cabe en una pantalla — sin esto se salía del
     recuadro y tapaba (sin verse) el logo de Nunatack que va debajo. */
  overflow-y: auto;
}

#mobile-screen-about .mobile-follow__blank-panel,
#mobile-screen-desktop .mobile-follow__blank-panel,
#mobile-screen-trackinfo .mobile-follow__blank-panel,
#mobile-screen-weather .mobile-follow__blank-panel {
  flex: 1 1 auto;
  height: auto;
  /* Fondo fijo en blanco pase lo que pase el tema activo (igual que
     .mobile-settings__panel / .mobile-waypoint-form__panel) — sin fijar
     --c-text aquí, en tema oscuro el texto del FAQ salía casi blanco sobre
     este fondo blanco fijo (--c-text seguía el tema global, no este panel). */
  --c-surface: var(--c-white);
  --c-text: var(--c-dark);
  --c-muted: #a9a29a;
  --c-tan-line: #d9cec2;
  --c-olive-tint: #eef0ea;
}

.mobile-info__logo {
  display: block;
  width: 65%;
  height: auto;
  margin: 1.5rem auto 1rem;
}

.mobile-info__text {
  margin: 0;
  padding: 0 20px 14px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--c-muted, #a9a29a);
  text-align: left;
}

/* Frase de entrada de la pantalla Desktop: centrada y más grande que el
   cuerpo, para que se lea antes que el párrafo largo de debajo. El
   text-align pisa el "left" de .mobile-info__text — misma especificidad (una
   clase cada una), así que TIENE que ir después de ella en el archivo.
   Los saltos de línea los marca el propio <br> del HTML, así que se deja
   balance para que ninguna línea suelta quede descolgada si el <br> cae
   distinto en una pantalla estrecha. */
.mobile-info__text--lead {
  margin-top: 18px;
  padding-bottom: 18px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-dark);
  text-align: center;
  text-wrap: balance;
}

/* FAQ de Settings > Info (mobile) — mismo acordeón que .confirm-modal__faq
   (buildFaqAccordion en tracks.js), con el padding lateral de
   .mobile-info__text para que quede alineado con los párrafos de arriba. */
.mobile-info__faq {
  margin: 4px 0 0;
  padding: 8px 20px 4px;
}

.mobile-info__panel {
  background: var(--c-white);
  padding: 20px 20px 24px;
  --c-surface: var(--c-white);
  --c-text: var(--c-dark);
  --c-muted: #a9a29a;
  --c-tan-line: #d9cec2;
  --c-olive-tint: #eef0ea;
}

.mobile-info__brand {
  display: block;
  width: 50%;
  margin: 0 auto;
}

.mobile-info__brand-img {
  display: block;
  width: 60%;
  height: auto;
  margin: 0 auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mobile-tracklist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(49, 51, 48, 0.1);
}

.mobile-tracklist__item-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 4px 16px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-dark);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-tracklist__item-load {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: 6px;
}

.mobile-tracklist__item-load-icon {
  width: 22px;
  height: 22px;
  background-color: var(--c-dark);
  -webkit-mask-image: url("../img/mobile-icon-next.svg");
  mask-image: url("../img/mobile-icon-next.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ===== Pantalla: Map layers ===== */
.mobile-maplayers__list {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  background: var(--c-white);
}

.mobile-maplayers__item {
  display: block;
  width: 100%;
  padding: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-dark);
  text-align: left;
  border-bottom: 1px solid rgba(49, 51, 48, 0.1);
}

.mobile-maplayers__item.is-active {
  background: var(--c-olive);
  color: var(--c-white);
}

/* ===== Pantalla: Waypoints list ===== */
.mobile-waypointslist__list {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  background: var(--c-white);
}

.mobile-waypointslist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(49, 51, 48, 0.1);
}

.mobile-waypointslist__item-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.mobile-waypointslist__item-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 8px 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-dark);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La barra inferior es un grid de 3 columnas (20/80/20) pensado para las
   cifras de la pantalla de mapa: un botón suelto caía en la primera columna,
   con el 14% del ancho y descentrado. En estas dos pantallas la barra solo
   lleva el interruptor, así que pasa a ser un flex centrado. */
#mobile-screen-waypointslist .mobile-follow__stats,
#mobile-screen-segmentslist .mobile-follow__stats {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Interruptor "mostrar/ocultar en el mapa" en la barra inferior de Waypoints
   list y Segments list. Mismo lenguaje que los botones del pie de la pantalla
   de inicio (borde oliva, relleno al activarse), centrado en la barra. */
.mobile-list__toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  min-height: 44px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid var(--c-olive);
  border-radius: 10px;
  background: transparent;
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.78rem;
  text-align: center;
}

.mobile-list__toggle-btn.is-active {
  background: var(--c-olive);
  color: var(--c-dark);
}

/* Fila de Segments list: misma caja que .mobile-waypointslist__item, pero con
   la franja de color de la categoría a la izquierda y dos líneas de texto
   (nombre + cifras) en vez de un icono y una sola línea. */
.mobile-segmentslist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(49, 51, 48, 0.1);
}

.mobile-segmentslist__item-bar {
  flex-shrink: 0;
  width: 6px;
  align-self: stretch;
  min-height: 34px;
  border-radius: 3px;
  background: var(--c-muted);
}

.mobile-segmentslist__item-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* El nombre reusa .mobile-waypointslist__item-name; aquí solo se le quita el
   relleno vertical para que las dos líneas queden juntas. */
.mobile-segmentslist__item-body .mobile-waypointslist__item-name {
  padding: 0;
}

.mobile-segmentslist__item-stats {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-waypointslist__item-goto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.mobile-waypointslist__item-goto-icon {
  width: 22px;
  height: 22px;
  background-color: var(--c-dark);
  -webkit-mask-image: url("../img/mobile-icon-next.svg");
  mask-image: url("../img/mobile-icon-next.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.mobile-waypointslist__empty {
  margin: 0;
  padding: 24px 16px;
  font-size: 0.8rem;
  color: var(--c-muted, #a9a29a);
  text-align: center;
}

/* ===== Pantalla: Compass — brújula de pantalla completa (icon-compass.svg,
   girado por handleMobileOrientation en tracks.js), rumbo en grados/punto
   cardinal, coordenadas y altitud actuales. Fondo en degradado (a diferencia
   del blanco liso de Track/Waypoints list) para diferenciarla como una
   herramienta "de instrumento" en vez de un listado. */
.mobile-compass-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  /* Colores fijos (no tokens de tema): esta pantalla es la única que lleva
     este degradado propio, igual de fijo pase lo que pase el tema activo
     que el fondo blanco de .ads-layer (ver comentario allí). */
  background: linear-gradient(180deg, #cbe4e1, #8aa3a6);
  text-align: center;
}

.mobile-compass-screen__dial {
  width: 90%;
  aspect-ratio: 1;
  margin-bottom: 14px;
}

.mobile-compass-screen__icon {
  width: 100%;
  height: 100%;
  /* Misma transición que .mobile-follow__icon--compass (el icono compacto
     del modo seguimiento) — evita que la aguja salte de golpe entre lecturas
     del sensor, aquí más perceptible por el tamaño grande del icono. */
  transition: transform 0.15s linear;
}

.mobile-compass-screen__heading {
  margin: 0;
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--c-dark);
}

.mobile-compass-screen__coords,
.mobile-compass-screen__altitude {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--c-white);
}

/* ===== Pantalla: nuevo waypoint ===== */

.mobile-waypoint-form__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 20px 16px;
  background: var(--c-white);
  --c-surface: var(--c-white);
  --c-text: var(--c-dark);
  --c-muted: #a9a29a;
  --c-tan-line: #d9cec2;
  --c-olive-tint: #eef0ea;
  overflow: hidden;
}

.mobile-waypoint-form__icon-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 6px;
  overflow-y: auto;
}

/* ===== Pantalla: nuevo track ===== */

.mobile-new-track__panel {
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  overflow-y: auto;
}

/* ===== Pantalla: Track setup (Settings)  ===== */
.mobile-tracksetup__panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 20px 20px 16px;
  background: var(--c-white);
  overflow-y: auto;
  --c-surface: var(--c-white);
  --c-text: var(--c-dark);
  --c-muted: #a9a29a;
  --c-tan-line: #d9cec2;
  --c-olive-tint: #eef0ea;
  --c-cream: #f4f1ee;
}

#mobile-tracksetup-reverse {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
}

#mobile-screen-tracksetup .mobile-follow__stats {
  display: flex;
  align-items: center;
}

.mobile-tracksetup__gotomap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 60%;
  padding: 12px;
  margin: 0 auto;
  border-radius: 10px;
  background: var(--c-olive);
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}

.mobile-form__save {
  display: block;
  flex-shrink: 0;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  background: var(--c-olive);
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}

@media (min-width: 901px) and (max-width: 1280px) {
  :root {
    --sidebar-left-w: 200px;
    --sidebar-right-w: 190px;
    --panel-gap: 0.75rem;
  }
}

@media (max-width: 900px) {
  .mobile-overlay {
    display: flex;
  }
  .app {
    display: none;
  }
  :root,
  :root[data-theme="terra"],
  :root[data-theme="dark"] {
    --c-olive: #a8cc6c;
  }
  .waypoint-form__colors {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  }
}

.mobile-rotate-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px;
  background: var(--c-dark);
  color: var(--c-white);
  text-align: center;
}

.mobile-rotate-lock__icon {
  width: 72px;
  height: 72px;
  color: var(--c-olive);
}

.mobile-rotate-lock__text {
  max-width: 320px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 900px) and (orientation: landscape) {
  .mobile-overlay {
    display: none;
  }
  .mobile-rotate-lock {
    display: flex;
  }
}

/* ===== Arrastrar y soltar un GPX sobre la ventana =====
   Overlay que aparece mientras se arrastra un archivo (ver tracks.js). Va por
   debajo de .mobile-rotate-lock (100000), que debe seguir tapándolo todo, y
   por encima del resto de capas flotantes. pointer-events: none es lo que
   mantiene vivo el arrastre: si el overlay capturase el ratón, el navegador
   lanzaría un dragleave nada más aparecer y se apagaría solo. */
.gpx-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  background: rgb(0 0 0 / 0.45);
}

.gpx-drop-overlay[hidden] {
  display: none;
}

.gpx-drop-overlay__box {
  padding: 28px 36px;
  border: 2px dashed var(--c-white);
  border-radius: 14px;
  background: rgb(0 0 0 / 0.35);
  text-align: center;
}

.gpx-drop-overlay__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-white);
}

.gpx-drop-overlay__hint {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--c-white);
  opacity: 0.75;
}