/* Fishingpoints — tema azul, claro u oscuro (lo elige js/theme.js: data-theme en <html>). El mapa ocupa todo el fondo; previsión, mis puntos, mis rutas, configuración y
   las páginas legales salen como paneles encima.
   Escritorio (desde 960 px): menú en una columna lateral y paneles a su derecha.
   Móvil (hasta 959 px): barra de navegación flotante y paneles a pantalla completa.

   Orden del fichero: variables (las del tema claro y, debajo, las del oscuro), base, estructura (menú, escenario, paneles), piezas comunes, mapa, medir y rutas,
   previsión, mapas pequeños y ventanas, mis puntos y mis rutas, páginas legales, configuración y, al final, los
   bloques de escritorio, de móvil y de Safari del iPhone (los colores de sus barras).
   Cada selector se define una sola vez; las media queries pequeñas van junto a su componente. */

/* ==================== Variables ==================== */

:root {
  --bg: #eef4fa;
  --surface: #ffffff;
  --surface-2: #f5f9fc;
  --line: #dbe6f0;
  --line-soft: #e9f0f6;

  --text: #0f2a43;
  --text-dim: #4d6680;
  --text-faint: #8299ae;

  --accent: #0a64ad;
  --accent-2: #1a8fd6;
  --accent-soft: #e2f0fb;
  --head-1: #0a4f8f;
  --head-2: #0f72c0;
  --head-3: #35a4e4;

  --accent-fill: #0a64ad;       /* fondos de azul con texto blanco: botones, pestaña activa, marcadores */
  --accent-fill-hover: #0f72c0;
  --head-bar: #0a64ad;          /* cabeceras en el móvil y barras del navegador (theme-color) */

  --good: #17915a;
  --mid: #c98a04;
  --mid-text: #9a6a00;
  --low: #d9423f;
  --low-hover: #c23633;
  --low-soft: #fdeeed;
  --notice-bg: #fff7e0;
  --notice-text: #7a5600;

  /* Gráficas (app.js las dibuja con estas variables) */
  --chart-line: #0a64ad;
  --chart-axis: #b4c7d9;
  --chart-now: #0a4f8f;

  --skel-shine: #e6eef6;
  --seg-on: #ffffff;            /* opción marcada de los selectores */
  --tip-bg: #0f2a43;            /* etiqueta de las gráficas (los avisos van en el azul de la app, --head-bar) */
  --label-bg: rgba(255, 255, 255, 0.94);
  --attrib-bg: rgba(255, 255, 255, 0.8);  /* créditos de los mapas pequeños (los de Leaflet) */
  --attrib-text: #333;
  --attrib-link: #0078a8;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%234d6680' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); /* flecha del desplegable de estaciones, en --text-dim */
  --overlay: rgba(15, 42, 67, 0.45);

  --radius: 18px;
  --radius-sm: 12px;
  --pill: 999px;
  --side-w: 232px;
  --drawer-w: 500px;
  --shadow: 0 1px 2px rgba(15, 42, 67, 0.06), 0 6px 20px -10px rgba(15, 42, 67, 0.18);
  --shadow-float: 0 4px 16px -4px rgba(15, 42, 67, 0.3);
  --shadow-modal: 0 20px 60px -10px rgba(15, 42, 67, 0.5);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;
}
@media (min-width: 1400px) { :root { --drawer-w: 560px; } }
html { color-scheme: light; }

/* Modo oscuro: azul marino de noche, con el mismo azul de la app en las cabeceras. Los azules y los colores de la
   puntuación, más claros para que se lean sobre el fondo oscuro; los rellenos con texto blanco, algo más oscuros. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1520;
  --surface: #122131;
  --surface-2: #192b3d;
  --line: #253a50;
  --line-soft: #1c2f42;

  --text: #e4edf6;
  --text-dim: #a3b6ca;
  --text-faint: #6f869d;

  --accent: #5cb4f2;
  --accent-2: #3d9fe6;
  --accent-soft: #15314b;
  --head-1: #072c52;
  --head-2: #0b4a85;
  --head-3: #176fae;
  --accent-fill: #1669b3;
  --accent-fill-hover: #1d7ac7;
  --head-bar: #0c4a85;

  --good: #36c47f;
  --mid: #e8ab2c;
  --mid-text: #e8ab2c;
  --low: #f0625d;
  --low-hover: #d9504b;
  --low-soft: #3a1b1f;
  --notice-bg: #33290e;
  --notice-text: #f1cd78;

  --chart-line: #5cb4f2;
  --chart-axis: #3a5169;
  --chart-now: #a6d8fb;

  --skel-shine: #22364b;
  --seg-on: #2b425a;
  --tip-bg: #2a4058;
  --label-bg: rgba(18, 33, 49, 0.94);
  --attrib-bg: rgba(18, 33, 49, 0.8);
  --attrib-text: #a3b6ca;
  --attrib-link: #5cb4f2;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23a3b6ca' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  --overlay: rgba(2, 8, 15, 0.6);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px -10px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 4px 16px -4px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 20px 60px -10px rgba(0, 0, 0, 0.75);
}

/* ==================== Base ==================== */

* { box-sizing: border-box; }
/* El fondo de la página también colorea las barras del navegador en el móvil: ver Safari del iPhone, al final */
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body.modal-open { overflow: hidden; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--text-faint); font-size: 13px; line-height: 1.45; }

/* ==================== Estructura ==================== */

/* ---------- Menú principal (columna lateral en escritorio, barra flotante en móvil: ver al final) ---------- */

.mainnav {
  position: fixed; z-index: 1000;
  left: 0;
  display: flex; align-items: center;
}
.brand, .map-head { display: none; }
.navitem {
  flex: 1;
  max-width: 140px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0;
  color: var(--text-faint);
  text-decoration: none;
  font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm);
}
.navitem svg { width: 24px; height: 24px; }
.navitem[aria-current="page"] { color: var(--accent); }
.nav-toggle, .nav-lang, .nav-theme { display: none; border: 0; background: none; text-align: left; } /* idioma, tema y contraer: solo escritorio */
/* Botón del tema: la luna para pasar a oscuro y el sol para volver a claro */
.nav-theme .icon-sun, html[data-theme="dark"] .nav-theme .icon-moon { display: none; }
html[data-theme="dark"] .nav-theme .icon-sun { display: block; }

/* ---------- Escenario: el mapa de fondo ---------- */

.stage { position: fixed; top: 0; left: 0; right: 0; }
.map { position: absolute; inset: 0; background: var(--bg); } /* el fondo se ve mientras cargan las imágenes */

/* ---------- Paneles (previsión, mis puntos, mis rutas, configuración y páginas legales) ---------- */

.drawer {
  position: absolute; z-index: 1100; /* por encima de los controles de Leaflet (1000) */
  top: 0; bottom: 0; left: 0;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: none;     /* sin rebote al llegar arriba o abajo */
  background: var(--bg); /* aparece sin animación */
}
/* Fondo fijo detrás del panel: si el navegador rebota igualmente (Safari antiguo), no se ve el mapa. Con
   cabecera azul es azul arriba (la continúa) y claro abajo. En el móvil no se usa (ver al final). */
.app.has-drawer .stage::before {
  content: "";
  position: absolute; z-index: 1099;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  background: var(--bg);
  pointer-events: none;
}
.app[data-drawer="prevision"] .stage::before,
.app[data-drawer="puntos"] .stage::before,
.app[data-drawer="rutas"] .stage::before,
.app[data-drawer="configuracion"] .stage::before,
.app[data-drawer="legal"] .stage::before { background: linear-gradient(var(--head-1) 50%, var(--bg) 50%); }

/* Cabecera azul común: previsión, mis puntos, mis rutas, configuración, páginas legales y la ventana del
   calendario (en el móvil, azul liso: ver Safari del iPhone) */
.fc-head, .page-head, .cal-band {
  background: linear-gradient(165deg, var(--head-1) 0%, var(--head-2) 55%, var(--head-3) 100%);
  color: #fff;
}

/* ==================== Piezas comunes ==================== */

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 18px;
  border-radius: var(--pill);
  font-weight: 600; font-size: 15px;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.btn-fill { background: var(--accent-fill); color: #fff; }
.btn-fill:hover { background: var(--accent-fill-hover); }
.btn-outline { background: var(--surface); border-color: var(--line); color: var(--accent); cursor: pointer; }
.btn-outline:hover { border-color: var(--accent-2); }
.btn-danger-fill { background: var(--low); color: #fff; }
.btn-danger-fill:hover { background: var(--low-hover); }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }

/* Botón redondo translúcido sobre las cabeceras azules: compartir, recargar y cerrar */
.head-btn {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.18); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.head-btn svg { width: 20px; height: 20px; }
.head-btn:hover { background: rgba(255, 255, 255, 0.3); }
.head-btn.is-spinning svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Buscador (mapa y Mis puntos: el mismo componente) ---------- */

input[type="search"], input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  outline: none;
}
input[type="search"]:focus, input[type="text"]:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Barra en píldora con la lupa a la izquierda y una X propia a la derecha (mismo tamaño, color y trazo que la
   lupa; se oculta la X del navegador), y un botón Buscar opcional al lado. Sin resaltado al escribir: el cursor
   ya indica dónde se escribe. La sombra la pone solo el del mapa, que flota sobre el satélite. */
.searchbar { position: relative; display: flex; gap: 8px; }
.searchbar-field { position: relative; flex: 1; min-width: 0; display: flex; }
.searchbar-field > svg { position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; color: var(--text-faint); pointer-events: none; }
.searchbar input {
  min-height: 46px; padding-left: 44px; padding-right: 44px;
  border: 0; border-radius: var(--pill);
}
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.searchbar input[type="search"]:focus, .searchbar input[type="search"]:focus-visible { outline: none; box-shadow: none; }
.search-clear {
  position: absolute; right: 8px; top: 5px;
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
}
.search-clear svg { width: 20px; height: 20px; }
.search-clear:hover { color: var(--text-dim); }
/* Resultados: lista desplegable que flota bajo la barra, por encima de lo que haya debajo */
.search-results {
  position: absolute; z-index: 10; top: 100%; left: 0; right: 0;
  margin-top: 8px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.search-results li + li { border-top: 1px solid var(--line-soft); }
.search-results button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 11px 16px;
}
.search-results button:hover { background: var(--surface-2); }
.search-results .msg { padding: 11px 16px; color: var(--text-dim); font-size: 14px; }

/* ---------- Píldora deslizante de los selectores ----------
   Un único fondo por selector (menú, pestañas, días y selectores de las tarjetas) que se mueve hasta la
   opción activa: ver slideIndicator en app.js. Safari, con la píldora en una capa de composición dentro de
   barras con scroll, la pintaba por encima del texto aunque el z-index dijera lo contrario: cada selector
   aísla su apilamiento y las opciones van en su propia capa, siempre encima de la píldora. */
.mainnav, .subtabs, .seg, .days { isolation: isolate; }
.seg, .days { position: relative; } /* el menú (fixed) y las pestañas (sticky) ya son contenedores posicionados */
.navitem, .subtabs a, .seg-btn, .day { position: relative; z-index: 1; transition: color 0.2s ease; transform: translateZ(0); }
.ind {
  position: absolute; top: 0; left: 0; z-index: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.32s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.32s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.2s;
}
.ind.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .ind { transition: none; } }
.mainnav > .ind { background: var(--accent-soft); border-radius: var(--pill); }
.subtabs > .ind { background: var(--accent-fill); border-radius: var(--pill); }
.seg > .ind { background: var(--seg-on); border-radius: var(--pill); box-shadow: 0 1px 3px rgba(15, 42, 67, 0.15); }
.days > .ind { background: var(--surface); border-radius: 14px; }

/* ---------- Aviso flotante ---------- */

.toast {
  position: fixed; z-index: 3100;
  left: 50%; transform: translateX(-50%);
  max-width: min(92vw, 460px);
  padding: 11px 18px;
  border-radius: 14px;
  background: var(--head-bar); color: #fff; /* el azul de la app (el de las cabeceras); en oscuro, el suyo */
  font-size: 14px; text-align: center;
  box-shadow: var(--shadow-float);
}

/* ==================== Mapa ==================== */

.leaflet-container { font: 13px/1.4 var(--font); cursor: pointer; }
.leaflet-grab { cursor: pointer; }
.leaflet-dragging .leaflet-grab { cursor: grabbing; }
.leaflet-control-attribution { font-size: 10px; }
/* Créditos del mapa principal, abajo a la derecha: los que piden las condiciones de cada capa (Leaflet pone y quita
   los de las capas que se ven). Pequeños y en una caja discreta. */
.map .leaflet-control-attribution { max-width: calc(100vw - 16px); padding: 1px 6px; border-radius: 6px 0 0 0; line-height: 1.35; } /* en una línea mientras quepa */
/* En los mapas grandes del radar y del viento, también abajo a la derecha: la hora y el zoom suben lo que midan */
#radar-big .leaflet-control-attribution, #wind-big .leaflet-control-attribution { padding: 1px 6px; border-radius: 6px 0 0 0; line-height: 1.35; }
/* Y en los mapas pequeños de Tiempo, igual pero sin la esquina redondeada */
.radar-mini .leaflet-control-attribution { padding: 1px 6px; border-radius: 0; line-height: 1.35; }
/* Ventanas de los marcadores y créditos de los mapas pequeños, con los colores del tema */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text); }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-faint); }
.leaflet-container .leaflet-control-attribution { background: var(--attrib-bg); color: var(--attrib-text); }
.leaflet-control-attribution a { color: var(--attrib-link); white-space: nowrap; } /* «Open-Meteo» sin partir por el guion */
/* Modo oscuro: el callejero, en oscuro (colores invertidos, con el agua otra vez azul). El satélite, tal cual. */
html[data-theme="dark"] .tiles-street { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7); }

/* ---------- Buscador: el común (ver Piezas comunes), colocado encima del mapa ---------- */

.map-search {
  position: absolute; z-index: 500;
  top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; right: 68px;
  max-width: 460px;
}
.map-search input, .map-search input[type="search"]:focus, .map-search input[type="search"]:focus-visible { box-shadow: var(--shadow-float); }

/* ---------- Botones y capas ---------- */

.map-tools {
  position: absolute; z-index: 500;
  right: 12px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
}
.map-tools-top { top: calc(12px + env(safe-area-inset-top, 0px)); }
.map-tools-bottom { bottom: 28px; }
.map-compass { display: none; } /* solo en el móvil: ver Móvil */
.tool {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0;
  color: var(--text);
}
.tool + .tool { border-top: 1px solid var(--line-soft); }
.tool svg { width: 22px; height: 22px; }
.tool:hover, .tool[aria-expanded="true"] { color: var(--accent); }
.tool[aria-pressed="true"] { color: #fff; background: var(--accent-fill); }
.tool-measure[aria-pressed="true"] { border-radius: 0 0 14px 14px; } /* el último botón de su grupo */

.layers {
  position: absolute; right: 52px; top: 0;
  width: 260px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
}
.layers-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); margin: 4px 0 6px; }
.layers label { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.layers label.is-off { color: var(--text-faint); cursor: default; }
.layers input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }
.layers-note { margin: -2px 0 6px 28px; font-size: 12px; line-height: 1.35; color: var(--text-faint); }
/* Créditos de los mapas que se ven */

/* ---------- Avisos sobre el mapa ---------- */

.map-hint {
  position: absolute; z-index: 500;
  left: 50%; transform: translateX(-50%);
  bottom: 28px;
  max-width: calc(100% - 140px);
  padding: 10px 18px;
  border-radius: var(--pill);
  background: var(--head-bar); /* como los avisos flotantes, pero translúcido como antes (88 %) */
  background: color-mix(in srgb, var(--head-bar) 88%, transparent);
  color: #fff; font-size: 14px; font-weight: 600; text-align: center;
  pointer-events: none;
}

/* ---------- Medir y rutas (en el móvil, la tarjeta va sobre la barra: ver Móvil) ---------- */

/* Mapa mientras se edita una ruta (is-measuring) y se dibuja (is-drawing): cada clic añade un punto, así que
   los demás marcadores no se pueden pulsar */
#map.is-drawing, #map.is-drawing .leaflet-grab { cursor: crosshair; }
#map.is-drawing .measure-hit { cursor: crosshair; }
#map.is-measuring .leaflet-marker-pane > * { pointer-events: none !important; }

/* Puntos de la ruta; el primero, relleno. Sin dibujar, el primero y el último (para seguir por ahí), con anillo */
.measure-pt {
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--accent);
  box-shadow: 0 1px 4px rgba(15, 42, 67, 0.4);
}
.measure-pt.is-first { background: var(--accent); border-color: #fff; }
#map.is-measuring .measure-pt { cursor: move; }
#map.is-measuring .measure-pt.is-end { cursor: pointer; transform-origin: center; box-shadow: 0 0 0 4px rgba(26, 143, 214, 0.35), 0 1px 4px rgba(15, 42, 67, 0.4); }
/* Con el dedo: el marcador es más grande (32 px, en app.js) para acertar al tocarlo, pero se ve un punto de
   18 px en medio; el resto es transparente */
@media (pointer: coarse) {
  .measure-pt, .measure-pt.is-first, #map.is-measuring .measure-pt.is-end { background: none; border: 0; box-shadow: none; }
  .measure-pt::after {
    content: ''; position: absolute; inset: 7px;
    border-radius: 50%; background: #fff; border: 2.5px solid var(--accent);
    box-shadow: 0 1px 4px rgba(15, 42, 67, 0.4);
  }
  .measure-pt.is-first::after { background: var(--accent); border-color: #fff; }
  #map.is-measuring .measure-pt.is-end::after { box-shadow: 0 0 0 5px rgba(26, 143, 214, 0.35), 0 1px 4px rgba(15, 42, 67, 0.4); }
}

/* Distancia y rumbo de cada tramo; la del tramo que se está trazando, junto al cursor (encima y a la derecha,
   para no taparlo) */
.measure-label-icon { background: none; border: 0; }
.measure-label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  padding: 2px 8px; border-radius: var(--pill);
  background: var(--label-bg); color: var(--text);
  font-size: 12px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(15, 42, 67, 0.3);
}
.measure-label.is-preview { transform: translate(14px, calc(-100% - 10px)); }

/* Tarjeta de abajo: nombre y Guardar (o el nombre y cerrar, al ver una ruta), largo total y ayuda */
.measure-card {
  position: absolute; z-index: 500;
  left: 50%; transform: translateX(-50%);
  bottom: 28px;
  width: min(440px, calc(100% - 140px));
  padding: 12px 14px 14px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
}
.measure-head { display: flex; align-items: center; gap: 8px; }
/* Nombre de la ruta: el mismo campo que el buscador (píldora sin borde ni resaltado al escribir), en gris
   porque la tarjeta es blanca */
.measure-head input[type="text"] {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 18px;
  border: 0; border-radius: var(--pill); background: var(--bg);
  font-size: 15px;
}
.measure-head input[type="text"]:focus, .measure-head input[type="text"]:focus-visible { outline: none; box-shadow: none; }
.measure-head .btn { flex: none; min-height: 46px; }
.measure-head .btn:disabled { opacity: 0.45; cursor: default; }
.measure-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cerrar la ruta que se ve: el círculo con la X de las cabeceras, en gris porque la tarjeta es blanca */
.measure-close { margin: -2px -2px -2px 0; background: var(--bg); color: var(--text-dim); }
.measure-close:hover { background: var(--line); color: var(--text); }
.measure-body { margin-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
/* Deshacer, a la derecha de las cifras (con teclado, también Ctrl+Z o ⌘Z) */
.measure-body .btn { flex: none; gap: 6px; margin-bottom: 5px; } /* su borde de abajo, en la línea de las letras de «Cantidad de puntos» */
.measure-body .btn svg { width: 16px; height: 16px; }
.measure-body .btn:disabled { opacity: 0.45; cursor: default; }
.measure-k { display: block; color: var(--text-dim); font-size: 12px; }
.measure-total { display: block; font-size: 28px; font-weight: 750; letter-spacing: -0.6px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.measure-hint { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--text-faint); font-size: 12px; line-height: 1.4; }

/* Ventanitas del clic derecho: coordenadas exactas de un punto (el campo como el del buscador y Aplicar a su
   derecha) y añadir un punto en medio de un tramo (solo el botón) */
.coord-pop .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--shadow-float); }
.coord-pop .leaflet-popup-content { margin: 12px 12px 10px; width: 300px !important; }
.coord-title { display: block; margin-bottom: 8px; font-size: 14px; }
.coord-row { display: flex; gap: 8px; }
.coord-row input[type="text"] {
  flex: 1; min-width: 0; min-height: 42px; padding: 0 16px;
  border: 0; border-radius: var(--pill); background: var(--bg);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.coord-row input[type="text"]:focus { outline: none; box-shadow: none; }
.coord-row .btn { flex: none; }
.coord-err { margin: 8px 0 0 !important; color: var(--low); font-size: 13px; font-weight: 600; }
.coord-help { margin: 8px 0 0 !important; color: var(--text-faint); font-size: 12px; line-height: 1.4; }
.insert-pop .leaflet-popup-content { margin: 8px; width: auto !important; }

/* ---------- Marcadores ---------- */

.spot-marker { background: none; border: 0; }
.pin {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--accent-fill);
  border: 2.5px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  display: flex; align-items: center; justify-content: center;
}
/* El contenido (nota o chincheta) centrado como bloque, no sobre la línea base del texto */
.pin b {
  display: flex; align-items: center; justify-content: center;
  transform: rotate(45deg);
  color: #fff; font-size: 13px; font-weight: 750; letter-spacing: -0.3px; line-height: 1;
}
.pin b svg { display: block; }
/* Puntos guardados que no se están viendo: colores invertidos */
.pin.is-saved { background: #fff; border-color: var(--accent-fill); }
.pin.is-saved b { color: var(--accent-fill); }
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: #2f8cff; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47, 140, 255, 0.25); }

/* Estaciones de mareas (boya) y puertos (ancla); el que se está viendo, relleno de azul */
.station-marker { background: none; border: 0; }
.station-marker span {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--accent-fill); border: 2px solid var(--accent-fill);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.station-marker svg { width: 20px; height: 20px; }
.station-marker.is-on span { background: var(--accent-fill); color: #fff; border-color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); transform: scale(1.15); }
.station-pop { display: flex; flex-direction: column; gap: 4px; min-width: 170px; font: 14px/1.35 var(--font); }
.station-pop b { font-size: 15px; color: var(--text); }
.station-pop span { color: var(--text-faint); font-size: 12px; margin-bottom: 6px; }
.station-pop .btn { color: #fff; }

/* ==================== Previsión ==================== */

/* ---------- Cabecera: punto, botones y días ---------- */

.fc-head { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 6px; }
.fc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fc-title-wrap { min-width: 0; }
.fc-top h1 { font-size: 28px; font-weight: 750; letter-spacing: -0.8px; line-height: 1.15; }
.head-actions { display: flex; gap: 8px; flex: none; }

/* Título = nombre del punto, y a la vez el selector para cambiarlo */
.spot-pick { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; max-width: 100%; }
.spot-pick svg { width: 16px; height: 16px; flex: none; opacity: 0.9; }
.spot-pick-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font-weight: 600; font-size: 15px; line-height: 1.5;
}
.spot-pick svg.spot-pick-caret { width: 10px; height: 6px; margin-left: 2px; opacity: 1; }
/* Desplegable real: invisible y encima de todo el selector, para que al pulsar se abra la lista */
.spot-pick select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; font-size: 15px;
  appearance: none; -webkit-appearance: none;
}
.spot-pick select option { color: var(--text); }
.spot-pick select:focus, .spot-pick select:focus-visible { outline: none; box-shadow: none; } /* sin recuadro de enfoque sobre el azul */
.spot-pick-title { margin-top: 0; gap: 8px; min-height: 40px; }
.spot-pick-title .spot-pick-text { font-size: 26px; font-weight: 750; letter-spacing: -0.7px; line-height: 1.2; }
.spot-pick-title svg.spot-pick-caret { width: 13px; height: 8px; margin-left: 0; margin-top: 3px; }
@media (max-width: 400px) { .spot-pick-title .spot-pick-text { font-size: 23px; } }

.days {
  display: flex; gap: 2px;
  margin: 14px -12px 0; padding: 0 8px 10px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 8px;   /* al ajustarse, cada día conserva el mismo hueco lateral que "Hoy" */
  overscroll-behavior-x: contain;
}
@media (hover: hover) { .days { cursor: grab; } }
.days.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.days.is-dragging .day { pointer-events: none; }
.days::-webkit-scrollbar { display: none; }
.day {
  flex: 0 0 auto; width: 54px;
  scroll-snap-align: start;
  display: grid; grid-template-rows: 22px 16px 20px; justify-items: center; align-items: center; row-gap: 1px;
  padding: 7px 4px 6px;
  border: 0; border-radius: 14px;
  background: none; color: rgba(255, 255, 255, 0.72);
}
/* Tres huecos de altura fija en todas las pestañas: número, día de la semana y marca */
.day .day-n { font-size: 18px; font-weight: 700; color: #fff; line-height: 22px; }
.day .day-wd { font-size: 12px; font-weight: 600; line-height: 16px; text-transform: capitalize; }
.day .day-mark { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; line-height: 0; }
.day .day-mark .dot { width: 6px; height: 6px; border-radius: 50%; opacity: 0.95; }
.day .day-mark .wx { width: 20px; height: 20px; margin: 0; }
.day .day-mark .mini-moon { width: 13px; height: 13px; }
.day[aria-pressed="true"] { color: var(--accent); }
.day[aria-pressed="true"] .day-n { color: var(--text); }
/* Botón del calendario al final de la fila: mismo ancho y alto que un día, solo el icono centrado */
.day.day-cal { display: flex; align-items: center; justify-content: center; color: #fff; }
.day.day-cal svg { width: 20px; height: 20px; } /* mismo tamaño y trazo que compartir y recargar */
.day.day-cal:hover { background: rgba(255, 255, 255, 0.14); }
/* Los días, el mismo fondo al pasar el ratón; el elegido no, que ya lleva la píldora */
@media (hover: hover) {
  .day:not(.day-skel):not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, 0.14); }
}

/* ---------- Pestañas ---------- */

.subtabs {
  position: sticky; top: 0; z-index: 50;
  display: flex; gap: 4px;
  padding: 8px 10px;
  overflow-x: auto; scrollbar-width: none;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a {
  flex: none;
  padding: 8px 13px;
  border-radius: var(--pill);
  color: var(--text-dim);
  font-weight: 600; font-size: 14px;
  text-decoration: none;
}
.subtabs a:hover { background: var(--surface); }
.subtabs a[aria-current="page"] { color: #fff; }
.subtabs a[aria-current="page"]:hover { background: none; }
/* Pestañas centradas; con márgenes automáticos (y no justify-content) para que, si no caben,
   se pueda seguir deslizando hasta la primera sin que quede cortada. */
.subtabs > a:first-of-type { margin-left: auto; }
.subtabs > a:last-of-type { margin-right: auto; }

/* ---------- Contenido: tarjetas ---------- */

.fc-body { position: relative; padding: 12px 12px 28px; overflow-x: clip; } /* al deslizar entre pestañas en el móvil, la de al lado se coloca aquí dentro y no ensancha la página */
.panel { display: grid; gap: 12px; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-width: 0;
}
.card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 4px; }
.card-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 10px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.card-head .card-title { margin: 0; }
/* La etiqueta de la cabecera (p. ej. «Regulares») no ensancha la cabecera: el título queda donde en el resto */
.card-head .chip { margin: -4px 0; }
.mini-title { font-size: 14px; font-weight: 700; margin: 16px 0 4px; color: var(--text-dim); }
/* Espacio bajo el título cuando no hay subtítulo: las listas de filas ya traen su relleno, pero los mapas y
   los bloques de datos no. Así todas quedan a ~14 px del título. */
.card-title + .tiles, .card-title + .periods, .card-title + .hourly, .card-title + .radar-mini-wrap { margin-top: 10px; }

.state {
  margin: 12px 0;
  text-align: center;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px 22px;
}
.state h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.state p { color: var(--text-dim); }
.state .btn-row { justify-content: center; margin-top: 16px; }

/* Cargando: silueta de las tarjetas con un brillo que la recorre (en la cabecera, huecos de los días) */
.state.is-loading { margin: 0; padding: 0; background: none; box-shadow: none; text-align: left; }
.skel-panel { display: grid; gap: 12px; }
.skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--skel-shine) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
}
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel, .day-skel i { animation: none; } }
.skel-title { width: 38%; height: 16px; margin-bottom: 14px; }
.skel-line { height: 12px; margin-top: 10px; }
.skel-lines { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 400px) { .skel-lines .skel-line { margin-left: auto; margin-right: auto; } } /* la tarjeta va en columna, centrada */
.skel-lines .skel-line:first-child { height: 18px; margin-top: 0; }
.skel-gauge { flex: none; width: 120px; height: 120px; border-radius: 50%; margin: 6px 10px; }
.skel-chart { height: 180px; border-radius: 12px; }
.skel-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.skel-tiles .skel { height: 62px; border-radius: var(--radius-sm); }
.day-skel { cursor: default; }
.day-skel i {
  display: block; width: 26px; height: 12px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  animation: skel-pulse 1.4s ease-in-out infinite;
}
.day-skel i:first-child { width: 20px; height: 16px; }
.day-skel i:last-child { width: 8px; height: 8px; border-radius: 50%; }
@keyframes skel-pulse { 50% { opacity: 0.45; } }
.notice {
  background: var(--notice-bg); color: var(--notice-text);
  border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 14px;
}
.unsaved {
  display: flex; align-items: center; gap: 12px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px 10px 14px; font-size: 14px;
}
.unsaved span { flex: 1; min-width: 0; }
.unsaved .btn { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* Selector de pestañas dentro de una tarjeta */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--pill); overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-btn { flex: 1 0 auto; border: 0; background: none; padding: 7px 12px; border-radius: var(--pill); font-size: 14px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.seg-btn[aria-pressed="true"] { color: var(--accent); }

/* ---------- Contenido: gráficas ---------- */

.chart {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;          /* deslizar en horizontal mueve el cursor; en vertical, la página */
  user-select: none; -webkit-user-select: none;
  cursor: crosshair;
}
/* Se dibuja al ancho exacto de la caja, sin reescalar ni desenfoque; position: el JS la desplaza la fracción
   de píxel que sobra */
.chart svg { display: block; position: relative; }
.scrub-tip {
  position: absolute; top: 0; left: 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--tip-bg); color: #fff;
  font-size: 13px; line-height: 1.35; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.scrub-tip b { font-weight: 700; margin-right: 4px; }

/* ---------- Contenido: bloques de datos ---------- */

/* Marcador de actividad */
.hero { display: flex; align-items: center; gap: 16px; }
.gauge { flex: none; width: 140px; }
.gauge svg { display: block; width: 100%; height: auto; }
.hero-text h2 { font-size: 20px; font-weight: 750; letter-spacing: -0.4px; line-height: 1.2; }
.hero-text p { color: var(--text-dim); margin-top: 6px; font-size: 14px; }
@media (max-width: 400px) { .hero { flex-direction: column; text-align: center; gap: 8px; } }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--pill);
  font-size: 13px; font-weight: 700;
}
.chip-good { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good); }
.chip-mid { background: color-mix(in srgb, var(--mid) 15%, transparent); color: var(--mid-text); }
.chip-low { background: color-mix(in srgb, var(--low) 13%, transparent); color: var(--low); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
@media (max-width: 480px) { .tiles-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; }
.tile span { display: block; font-size: 12px; font-weight: 600; color: var(--text-faint); }
.tile b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -0.4px; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile small { display: block; font-size: 12px; color: var(--text-dim); }
.tile-main { background: var(--accent-soft); }
.tile-main b { color: var(--accent); font-size: 24px; }
.tiles-5 .tile { padding: 8px; text-align: center; }
.tiles-5 .tile b { font-size: 16px; }
.tiles-3 .tile b { font-size: 17px; }
.tiles-3 .tile-main b { font-size: 19px; }
@media (max-width: 400px) { .tiles-3 { gap: 6px; } .tiles-3 .tile { padding: 8px 9px; } .tiles-3 .tile b { font-size: 15px; } .tiles-3 .tile-main b { font-size: 17px; } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; }
.stat span { display: block; font-size: 12px; color: var(--text-faint); font-weight: 600; }
.stat b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -0.4px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat small { display: block; color: var(--text-dim); font-size: 12px; }

/* Listas de filas */
.rows > li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.rows > li:first-child { border-top: 0; }
.rows .k { color: var(--text-dim); flex: 1; min-width: 0; }
.rows .v { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.rows .v small { display: block; font-weight: 400; color: var(--text-faint); font-size: 12px; }
.arrow { display: inline-block; vertical-align: -2px; margin-right: 5px; color: var(--accent); }

/* Periodos solunares y pleamares y bajamares (con su altura) */
.periods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.period { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; }
.period h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); margin-bottom: 6px; }
.period p { font-weight: 650; font-variant-numeric: tabular-nums; }
.period p + p { margin-top: 2px; }
.period .none { color: var(--text-faint); font-weight: 400; }
.period .h { font-weight: 500; color: var(--text-dim); margin-left: 4px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.sw-major { background: rgba(26, 143, 214, 0.28); }
.sw-minor { background: rgba(26, 143, 214, 0.13); }

/* Por qué esta puntuación */
.factors > li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.factors > li:first-child { border-top: 0; }
.factors .name { font-weight: 650; }
.factors .pts { color: var(--text-dim); font-size: 14px; font-variant-numeric: tabular-nums; }
.factors .pts b { color: var(--text); }
.factors .muted { grid-column: 1 / -1; }
.fbar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.fbar i { display: block; height: 100%; border-radius: 3px; background: var(--accent-2); }

/* Listas de días solo informativas (Próximos días, Luna en los próximos días): sin hover ni acción */
.week > li.wrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  border-top: 1px solid var(--line-soft);
}
.week > li.wrow:first-child { border-top: 0; }
.week .dname { flex: 1; min-width: 0; font-weight: 600; }
.week .dname small { display: block; font-weight: 400; color: var(--text-faint); font-size: 13px; }
.week .is-cur .dname { color: var(--accent); }
.score-chip { flex: none; min-width: 44px; text-align: center; padding: 4px 8px; border-radius: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }
.mini-moon { flex: none; width: 26px; height: 26px; }

/* Tabla horaria (tiempo y olas). Va de borde a borde de la tarjeta. La primera columna (nombres de fila y su
   celda de cabecera) queda fija con fondo opaco desde el mismo borde, así nada de lo que se desliza asoma
   por detrás. */
.hourly { overflow-x: auto; margin: 0 -16px; padding: 0; scrollbar-width: thin; }
.hourly table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-variant-numeric: tabular-nums; }
.hourly th, .hourly td { padding: 7px 8px; text-align: center; white-space: nowrap; font-size: 14px; }
.hourly thead th { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.hourly tr > :first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface);
  padding-left: 16px; padding-right: 12px;
  text-align: left;
  box-shadow: 1px 0 0 var(--line), 6px 0 8px -6px rgba(15, 42, 67, 0.18);
}
.hourly tbody th { font-weight: 600; color: var(--text-dim); font-size: 13px; }
.hourly tr > :last-child { padding-right: 16px; }
.hourly tbody tr + tr td, .hourly tbody tr + tr th { border-top: 1px solid var(--line-soft); }
.hourly .now { color: var(--accent); }
.hourly td.now-col { background: var(--accent-soft); }
.wx { width: 26px; height: 26px; display: block; margin: 0 auto; }

/* Tiempo: condiciones y viento */
.wx-now { display: flex; align-items: center; gap: 14px; margin: 6px 0 8px; }
.wx-big .wx { width: 64px; height: 64px; }
.wx-temp { display: block; font-size: 40px; font-weight: 750; letter-spacing: -1.5px; line-height: 1.1; }
.wind { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; }
.wind-dial { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.wind-dial .arrow { margin: 0; vertical-align: 0; }
.wind-name { display: block; font-size: 22px; font-weight: 750; letter-spacing: -0.4px; }

/* Sol: barra de 24 h */
.sunbar { position: relative; height: 14px; margin-top: 8px; border-radius: var(--pill); background: #1d3a57; overflow: hidden; }
.sunbar i { position: absolute; top: 0; bottom: 0; }
.sunbar .tw { background: #6f9cc7; }
.sunbar .day { background: #f7c948; }
.sunbar-now { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--low); }
.sunbar-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Luna */
.moon-hero { display: flex; align-items: center; gap: 18px; }
.moon-hero svg { width: 88px; height: 88px; flex: none; }
.moon-hero h2 { font-size: 21px; font-weight: 750; letter-spacing: -0.4px; }
.moon-hero p { color: var(--text-dim); margin-top: 4px; }

/* Selector de estación de mareas (pestaña Mareas) */
.station-pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.station-pick span { color: var(--text-dim); font-size: 14px; flex: none; }
.station-pick select {
  min-width: 0; max-width: 60%; padding: 7px 28px 7px 12px; border: 0; border-radius: var(--pill);
  background: var(--surface-2) var(--select-arrow) no-repeat right 12px center;
  appearance: none; -webkit-appearance: none; font-size: 14px; font-weight: 600; color: var(--text);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.station-pick select:focus { outline: none; }

/* ==================== Mapas pequeños (radar y viento) y ventanas ==================== */

.radar-mini-wrap { position: relative; }
.wind-map-wrap { position: relative; margin-top: 12px; }
/* isolation: las capas de Leaflet (z-index 400-1000) no pasan por encima de las pestañas fijas al hacer scroll */
.radar-mini { height: 240px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); cursor: pointer; isolation: isolate; }
.radar-mini .leaflet-container, .radar-mini.leaflet-container { cursor: pointer; }
.radar-stamp {
  position: absolute; z-index: 500; left: 10px; bottom: 10px;
  padding: 5px 11px; border-radius: var(--pill);
  background: rgba(15, 42, 67, 0.85); color: #fff; font-size: 12px; font-weight: 600;
  pointer-events: none;
}
/* Pantalla completa, en la esquina superior derecha, con el aspecto de los botones de la cabecera: redondo,
   blanco translúcido e icono blanco. Un ligero desenfoque lo hace legible sobre el satélite. */
.map-expand {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.15s;
}
.map-expand svg { width: 20px; height: 20px; }
.map-expand { -webkit-tap-highlight-color: transparent; }
/* Solo con ratón: en el iPhone el :hover se queda pegado donde se tocó, y el botón de cerrar del viento en grande
   sale justo donde estaba el de abrirlo (parecía ya pulsado) */
@media (hover: hover) { .map-expand:hover { background: rgba(255, 255, 255, 0.3); } }

/* Flechas del viento: el color lo da su fuerza, no el azul de las flechas */
.wind-arrow { background: none; border: 0; }
.wind-arrow span { display: block; line-height: 0; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.85)); }
.wind-arrow .arrow { margin: 0; vertical-align: 0; color: inherit; }

/* ---------- Ventanas: radar, viento y calendario ----------
   El calendario, con la cabecera azul (ver Estructura). El radar y el viento son solo el mapa, sin cabecera:
   cerrar arriba a la derecha y acercar y alejar abajo, en círculos translúcidos como los de la cabecera. */
.modal {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-box {
  width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  padding: 16px;
}

/* Radar y viento: grandes en escritorio, pantalla completa en móvil */
.modal-radar .radar-box { max-width: 960px; height: min(720px, 100%); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.radar-big-wrap { position: relative; flex: 1; min-height: 0; }
.radar-big { position: absolute; inset: 0; background: var(--bg); }
.radar-big-wrap .radar-stamp { left: 12px; bottom: calc(12px + var(--attrib-h, 0px)); }
.radar-close { top: 12px; right: 12px; z-index: 600; } /* el círculo de pantalla completa, con la X */
/* Acercar y alejar: círculos translúcidos, abajo a la derecha, a la altura de la hora, encima de los créditos */
.radar-zoom { top: auto; bottom: calc(12px + var(--attrib-h, 0px)); right: 12px; }
.map-tools.radar-zoom { background: none; box-shadow: none; gap: 8px; }
.radar-zoom .tool {
  width: 40px; height: 40px; border-radius: 50%; border-top: 0;
  background: rgba(255, 255, 255, 0.18); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.15s;
}
.radar-zoom .tool + .tool { border-top: 0; }
.radar-zoom .tool svg { width: 20px; height: 20px; }
@media (hover: hover) { .radar-zoom .tool:hover { background: rgba(255, 255, 255, 0.3); color: #fff; } }
.radar-zoom .tool:hover { color: #fff; } /* sin el azul de .tool:hover en el táctil */
/* Leyendas del viento y del radar (solo en la vista grande) */
.wind-modal-foot { padding: 12px 18px 14px; }
.wind-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--text-dim); }
.wind-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(15, 42, 67, 0.15); }
.wind-legend small { color: var(--text-faint); font-size: 11px; }
.wind-legend-unit { color: var(--text-faint); }
@media (max-width: 600px) {
  .modal.modal-radar { padding: 0; }
  .modal-radar .radar-box { max-width: none; height: 100%; border-radius: 0; }
  .radar-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
  .radar-zoom { right: calc(12px + env(safe-area-inset-right, 0px)); }
  .wind-modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* Calendario: franja azul arriba y cuadrícula en blanco debajo */
#cal .modal-box { padding: 0; }
.cal-band { padding: 14px 14px 12px; }
.cal-head { display: flex; align-items: center; gap: 6px; }
.cal-head h2 { flex: 1; text-align: center; font-size: 18px; font-weight: 750; color: #fff; }
.cal-nav, .cal-close {
  flex: none;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.18); color: #fff;
  transition: background-color 0.15s;
}
.cal-nav svg, .cal-close svg { width: 20px; height: 20px; }
.cal-nav:hover, .cal-close:hover { background: rgba(255, 255, 255, 0.3); }
.cal-close { margin-left: 4px; }
.cal-sub { text-align: center; color: var(--text-faint); font-size: 13px; margin: 2px 0 10px; }
.cal-band .cal-sub { color: rgba(255, 255, 255, 0.78); margin: 4px 0 0; }
.cal-body { padding: 12px 16px 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-week span { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-faint); padding-bottom: 2px; }
.cal-day {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 0 6px; border: 1px solid transparent; border-radius: 10px; background: none;
}
.cal-day:hover { background: var(--surface-2); }
.cal-day .cal-n { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.cal-day b { min-width: 30px; padding: 1px 4px; border-radius: 7px; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cal-day .cal-moon { position: absolute; top: 3px; right: 3px; line-height: 0; }
.cal-day .cal-moon .mini-moon { width: 10px; height: 10px; }
.cal-day.is-today .cal-n { color: var(--accent); font-weight: 800; }
.cal-day.is-sel { border-color: var(--accent-2); background: var(--accent-soft); }
.cal-detail { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.cal-detail:empty { display: none; }
.cal-detail h3 { font-size: 15px; font-weight: 700; }
.cal-detail p { margin-top: 2px; }
/* Compartir: la cabecera del calendario (con un hueco a la izquierda del tamaño de la X, para que el título quede
   centrado) y las dos opciones. También en el móvil es una ventana, no la pantalla entera. */
#share-modal .modal-box { max-width: 400px; padding: 0; }
#share-modal .modal-box:focus { outline: none; } /* recibe el foco al abrir (para el teclado), sin marca */
.cal-head-gap { flex: none; width: 44px; }
.share-body { padding: 16px; display: grid; gap: 10px; }
/* Las opciones, botones como el de deshacer de la medición, a todo el ancho */
.share-opt { gap: 8px; width: 100%; }
.share-opt svg { width: 18px; height: 18px; flex: none; }

/* En móvil ocupa toda la pantalla, como la ventana del radar */
@media (max-width: 600px) {
  .modal#cal { padding: 0; align-items: stretch; }
  #cal .modal-box { max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .cal-band { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .cal-body { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ==================== Mis puntos y Mis rutas ==================== */

/* Página de los paneles sin pestañas (mis puntos, mis rutas, configuración y páginas legales), con la cabecera azul (ver Estructura):
   título en blanco y la X de cerrar translúcida, como en previsión */
.page { padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 32px; }
.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: calc(-18px - env(safe-area-inset-top, 0px)) -16px 16px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px;
}
.page-title { font-size: 28px; font-weight: 750; letter-spacing: -0.8px; }
.page-head .page-title { color: #fff; }
.page .card { margin-top: 16px; }
.page .card-title + p { margin-top: 6px; }

/* Puntos guardados */
.list { margin-top: 8px; }
.list > li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-top: 8px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; vertical-align: 1px; }
.spots:empty { display: none; }
#spots-empty { margin-top: 12px; }
#spots-empty .muted { font-size: 14px; }

/* Tarjeta de cada punto: nombre, nota de hoy y una fila de acciones con solo iconos */
.list > li.spot-card { display: block; padding: 0; overflow: hidden; }
.spot-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.spot-info { flex: 1; min-width: 0; }
.spot-name { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; overflow-wrap: anywhere; }
.spot-name .badge { margin-left: 6px; vertical-align: 2px; font-size: 12px; letter-spacing: 0; }
.spot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 13px; color: var(--text-dim); }
.spot-meta .badge { margin-left: 0; }
.spot-none { color: var(--text-faint); }
.spot-score {
  flex: none; min-width: 52px; height: 44px; padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 22px; font-weight: 750; letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
}
.spot-score.is-empty { color: var(--text-faint); background: var(--surface-2); }
.spot-actions { display: flex; border-top: 1px solid var(--line-soft); }
.spot-actions button {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 4px; border: 0; background: none;
  color: var(--text-dim); font-size: 12px; font-weight: 600;
  transition: color 0.15s, background-color 0.15s;
}
.spot-actions button + button { border-left: 1px solid var(--line-soft); }
.spot-actions svg { width: 22px; height: 22px; }
.spot-actions button:hover { background: var(--surface-2); color: var(--accent); }
.spot-actions .is-danger { color: var(--low); }
.spot-actions .is-danger:hover { color: var(--low); background: var(--low-soft); }
.spot-actions button[aria-expanded="true"] { color: var(--accent); background: var(--surface-2); }

/* Rutas: la misma tarjeta que los puntos, con los botones de GPX y KML al pulsar Exportar */
.route-export { display: flex; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-dim); }
.route-export span { margin-right: 4px; }

/* ==================== Páginas legales ==================== */

.legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.legal-links a { font-size: 14px; font-weight: 600; text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }
.legal { margin-top: 12px; }
.page-head + .legal { margin-top: 0; }
.legal p, .legal li { color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.legal b { color: var(--text); }
.legal h2 { font-size: 16px; font-weight: 700; margin: 20px 0 6px; color: var(--text); }
.legal p + p { margin-top: 8px; }
.legal ul { padding-left: 20px; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal-lead { font-size: 16px !important; color: var(--text) !important; background: var(--accent-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.legal-updated { margin: 10px 4px 0; }

/* ==================== Configuración ==================== */

/* Cada ajuste: su nombre y, debajo, el selector con las opciones (el mismo que el de las pestañas de olas) */
.settings { margin-top: 4px; }
.setting { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.setting:first-child { border-top: 0; }
.setting-name { display: block; margin-bottom: 8px; color: var(--text-dim); font-size: 14px; font-weight: 600; }
#settings-clock { margin-top: 10px; }
/* Idioma (el botón con el globo) e Instalar la app */
.lang-card .btn { gap: 8px; margin-top: 8px; }
.lang-card .btn svg { width: 20px; height: 20px; }
#install-note { margin-top: 8px; }
.install-links { margin-top: 12px; }
/* Derechos de autor: la línea del © y, debajo, los párrafos en pequeño */
.copyright-line { margin-top: 6px; font-size: 14px; color: var(--text-dim); }
.copyright-card .muted { margin-top: 8px; }

/* ==================== Escritorio (desde 960 px) ==================== */

@media (min-width: 960px) {
  /* Menú en una columna lateral, con la marca arriba e idioma, tema, configuración y contraer al pie */
  .mainnav {
    top: 0; bottom: 0;
    width: var(--side-w);
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 4px;
    padding: 20px 14px 14px; /* abajo, con los 10 px del botón, 24 px bajo el último icono: lo mismo que encima del logo */
    border-right: 1px solid var(--line);
    background: var(--surface);
  }
  .mainnav > .ind { border-radius: var(--radius-sm); }
  .brand {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px 20px; /* con los 4 px de separación del menú, 24 px hasta Mapa: lo mismo que encima del logo */
    color: var(--accent);
    text-decoration: none;
    font-size: 20px; font-weight: 750; letter-spacing: -0.4px;
  }
  .brand img { width: 32px; height: 32px; flex: none; }
  .brand span { color: var(--text); }
  .navitem {
    flex: none; max-width: none;
    flex-direction: row; gap: 12px;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--text-dim);
  }
  .navitem:hover { background: var(--surface-2); }
  /* Idioma, tema, configuración y contraer, al pie */
  .nav-lang { display: flex; margin-top: auto; }
  .nav-toggle, .nav-theme { display: flex; }

  /* Menú contraído: solo el logo y los iconos, en una columna estrecha; el mapa gana el resto. Como todo se
     coloca con --side-w, basta con cambiarla. */
  html.nav-collapsed { --side-w: 72px; }
  html.nav-collapsed .mainnav { padding-left: 12px; padding-right: 12px; }
  html.nav-collapsed .brand { padding-left: 8px; padding-right: 8px; }
  html.nav-collapsed .brand span, html.nav-collapsed .nav-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html.nav-collapsed .navitem { justify-content: center; }
  html.nav-collapsed .nav-toggle-chev { transform: rotate(180deg); transform-box: fill-box; transform-origin: center; }

  /* El mapa a la derecha del menú; los paneles, a la izquierda sobre el mapa */
  .stage { left: var(--side-w); bottom: 0; }
  .drawer { width: var(--drawer-w); box-shadow: 12px 0 32px -12px rgba(15, 42, 67, 0.35); } /* sin borde: la sombra lo separa del mapa */
  .app.has-drawer .stage::before { width: var(--drawer-w); }
  /* Con un panel abierto, lo que flota sobre el mapa se aparta a su derecha */
  .app.has-drawer .map-search { left: calc(var(--drawer-w) + 16px); }
  .app.has-drawer .map-hint { left: calc(var(--drawer-w) + (100% - var(--drawer-w)) / 2); }
  .app.has-drawer .measure-card { left: calc(var(--drawer-w) + (100% - var(--drawer-w)) / 2); width: min(440px, calc(100% - var(--drawer-w) - 140px)); }

  .toast { bottom: 28px; left: calc(50% + var(--side-w) / 2); }
}

/* ==================== Móvil (hasta 959 px) ====================
   Pensado para Safari del iPhone, que solo deja pasar el contenido por detrás de su barra translúcida (y la
   encoge al bajar) cuando se desplaza el documento, no una caja con scroll propio: con un panel abierto, el panel
   es la página. Lo que flota sobre el mapa es fijo pieza a pieza (buscador, botones, barra de navegación), sin
   ninguna capa fija a pantalla completa. Los colores de las barras de Safari, en la sección siguiente. */
@media (max-width: 959px) {

  /* ---------- Barra de navegación flotante ----------
     Píldora translúcida con solo los iconos, sin sombra y siempre del mismo tamaño. La píldora de la opción
     activa se desliza de un icono a otro. Sus medidas son variables: de ellas depende lo que va encima. */
  :root {
    --nav-bottom: 2px;                                                /* separación del borde de abajo */
    --nav-item-h: 34px;
    --nav-pad: 3.5px;
    --nav-top: calc(var(--nav-bottom) + var(--nav-item-h) + 2 * var(--nav-pad)); /* alto hasta su borde de arriba */
    --nav-float: calc(var(--nav-top) + 23px);                         /* espacio que reserva el contenido */
  }
  .mainnav {
    left: 50%; bottom: calc(var(--nav-bottom) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    padding: var(--nav-pad) 9px; gap: 10px;
    justify-content: center;
    border-radius: var(--pill);
    background: rgba(15, 42, 67, 0.5);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  }
  .mainnav > .ind { background: rgba(255, 255, 255, 0.24); }
  .navitem {
    flex: none; max-width: none; width: 54px; height: var(--nav-item-h); padding: 0; /* cinco, con Mis rutas */
    justify-content: center; border-radius: var(--pill);
    color: rgba(255, 255, 255, 0.78);
  }
  .navitem svg { width: 18.5px; height: 18.5px; }
  .navitem[aria-current="page"] { color: #fff; }
  .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .toast { bottom: calc(var(--nav-float) + 12px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Mapa ----------
     Forma parte de la página (sin escenario fijo). 100lvh llega solo hasta donde empezaría la barra de Safari
     minimizada, a media altura de la barra grande: se alarga para cubrir esa barra y la franja de la barrita
     de inicio. Lo que sobre queda fuera de la pantalla: la página del mapa no se desplaza. */
  .stage { position: static; }
  .map {
    position: absolute; top: 0; left: 0; right: 0; bottom: auto;
    height: calc(100vh + 80px + env(safe-area-inset-bottom, 0px));
    height: calc(100lvh + 80px + env(safe-area-inset-bottom, 0px));
  }
  .map-search { position: fixed; }
  .map-tools { right: calc(12px + env(safe-area-inset-right, 0px)); }
  .map-tools-top { position: fixed; }
  /* Acercar, alejar, ubicación y la brújula, a la misma altura y 7 px encima de los créditos del mapa, que van 7 px sobre
     la barra. --credits-h, lo que miden (dos o tres líneas), lo pone app.js (fitCredits). */
  .map-tools-bottom { position: fixed; bottom: calc(var(--nav-top) + 14px + var(--credits-h, 29px) + env(safe-area-inset-bottom, 0px)); }
  /* Brújula abajo a la izquierda, con los mismos márgenes que los botones de la derecha y el cristal de la barra
     de navegación. */
  .map-compass {
    display: block; position: fixed; z-index: 500;
    left: calc(12px + env(safe-area-inset-left, 0px));
    bottom: calc(var(--nav-top) + 14px + var(--credits-h, 29px) + env(safe-area-inset-bottom, 0px));
    width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(15, 42, 67, 0.5);
    backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    -webkit-tap-highlight-color: transparent;
  }
  /* Al girar con el móvil (app.js), un pequeño suavizado para que no vaya a saltos */
  .map-compass svg { display: block; width: 100%; height: 100%; font-family: var(--font); transition: transform 0.15s linear; }
  .map-hint { display: none; } /* sin el aviso «Toca el mapa en cualquier sitio…» (en escritorio sí) */

  /* Cabecera azul de la home: logo y nombre arriba y, debajo, el buscador (que va encima de ella, en su hueco).
     Esquinas de abajo redondeadas: el mapa asoma por debajo. Encima del mapa y de sus marcadores (600) y debajo de
     las ventanas de los marcadores (700); buscador y botones, encima de ella. Al ser fija, azul y pegada arriba,
     Safari pinta de azul la zona de la hora (ver Safari del iPhone). --head-h: su alto sin la zona de la hora. */
  :root { --head-h: 118px; }
  .map-head {
    display: block; position: fixed; z-index: 650; top: 0; left: 0; right: 0;
    height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 0 calc(16px + env(safe-area-inset-left, 0px));
    background: var(--head-bar);
    border-radius: 0 0 22px 22px;
    text-align: center; /* logo y nombre centrados */
    box-shadow: 0 6px 20px -8px rgba(15, 42, 67, 0.45);
  }
  .map-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 21px; font-weight: 750; letter-spacing: -0.5px; }
  .map-brand svg { flex: none; display: block; }
  .map-tools-top { z-index: 660; }
  .map-search { z-index: 670; } /* su lista de resultados, por encima de los botones */
  .map-search {
    top: calc(56px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); max-width: none;
  }
  .map-search input, .map-search input[type="search"]:focus, .map-search input[type="search"]:focus-visible { box-shadow: none; } /* sobre el azul, sin sombra */
  .map-tools-top { top: calc(var(--head-h) + 12px + env(safe-area-inset-top, 0px)); }
  /* Móvil en horizontal (poco alto): logo y buscador en una sola fila */
  @media (max-height: 500px) {
    :root { --head-h: 70px; }
    .map-search { top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(230px + env(safe-area-inset-left, 0px)); }
    .map-head { text-align: left; } /* en una fila con el buscador: a la izquierda */
    .map-brand { height: 46px; }
  }
  /* Tarjeta de la ruta: de lado a lado, sobre la barra de navegación. Mientras se ve, tapa los botones de
     abajo (acercar, alejar, mi ubicación y la brújula), que se quitan: el mapa se acerca con dos dedos. */
  .measure-card {
    position: fixed; transform: none; width: auto;
    left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--nav-float) + 10px + env(safe-area-inset-bottom, 0px));
  }
  html.has-measure .map-tools-bottom, html.has-measure .map-compass { display: none; }
  /* Créditos del mapa principal en dos líneas (el ancho lo ajusta app.js, fitCredits), alineados a la derecha como la caja */
  .map .leaflet-control-attribution { text-align: right; border-radius: 6px 0 0 6px; } /* no toca el borde de abajo: redondeada también abajo */
  /* Más baja que en escritorio, para que deje ver el mapa: cifras y huecos más pequeños */
  .measure-card { padding: 10px 12px 12px; }
  .measure-head .btn { min-height: 42px; }
  .measure-head input[type="text"] { min-height: 42px; }
  .measure-body { margin-top: 8px; }
  .measure-total { font-size: 22px; }
  .measure-hint { margin-top: 8px; padding-top: 8px; }
  /* Atribución de los mapas sobre la barrita de inicio; la del mapa principal, justo encima de la barra */
  .leaflet-bottom { bottom: env(safe-area-inset-bottom, 0px); }
  #wind-big .leaflet-bottom, #radar-big .leaflet-bottom, #radar-mini .leaflet-bottom, #wind-mini .leaflet-bottom { bottom: 0; } /* no llegan al borde de la pantalla */
  .map .leaflet-top { position: fixed; }
  .map .leaflet-bottom { position: fixed; bottom: calc(var(--nav-top) + 7px + env(safe-area-inset-bottom, 0px)); } /* centrados entre la barra y los botones */

  /* ---------- Paneles (previsión, mis puntos, configuración y páginas legales): se desplaza la página ---------- */
  html.has-drawer { overscroll-behavior-y: none; } /* en Chrome de Android, sin recargar al tirar hacia abajo */
  html.has-drawer body { overflow: visible; }
  html.has-drawer body.modal-open { overflow: hidden; }
  /* El mapa oculto, más alto que la pantalla, no alarga la página de los paneles cortos: se recorta al alto
     del panel. clip y no hidden, para no romper las pestañas pegadas arriba. */
  html.has-drawer .stage { position: relative; overflow: clip; }
  /* Mapa, buscador y botones, ocultos (sin display: none, para que Leaflet conserve su tamaño). Sin el fondo
     fijo del rebote: ese fondo lo da el de la página. */
  html.has-drawer .stage > :not(.drawer) { visibility: hidden; }
  html.has-drawer .app.has-drawer .stage::before { display: none; }
  html.has-drawer .drawer {
    position: relative; z-index: 2;
    top: auto; bottom: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* ---------- Campos: Safari hace zoom al enfocar uno con letra de menos de 16 px ---------- */
  input, select, .station-pick select, .spot-pick select,
  .measure-head input[type="text"], .coord-row input[type="text"] { font-size: 16px; } /* los de las rutas, más específicos */

  /* ---------- Márgenes: sitio para la barra abajo y, con el iPhone en horizontal, para el notch o la isla ----------
     El fondo llega al borde y el contenido empieza donde acaban. env() vale 0 donde no hay notch. */
  .fc-head {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .subtabs {
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
  }
  .fc-body {
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--nav-float) + 16px + env(safe-area-inset-bottom, 0px));
  }
  .page {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--nav-float) + 16px + env(safe-area-inset-bottom, 0px));
  }
  .page-head {
    margin-left: calc(-16px - env(safe-area-inset-left, 0px));
    margin-right: calc(-16px - env(safe-area-inset-right, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
}

/* ==================== Safari del iPhone y barras del navegador ====================
   Safari 26 tiñe la zona de sus barras (arriba, la de la hora; abajo, la suya) con el fondo de la página. Arriba
   usa antes el color de un elemento fijo pegado al borde: a menos de 4 px, de al menos 3 px de alto, casi todo el
   ancho, que reciba toques y por delante de la página (si es transparente o casi, no cuenta). Abajo solo sirve el
   fondo. Chrome de Android pinta su barra de arriba con <meta name="theme-color">. app.js (syncPageTint) pone las
   clases page-blue y top-blue y el theme-color; todo lo probado, en app.js, sección «Safari del iPhone». */

.top-tint { display: none; }
/* Mide la zona de la hora del iPhone, para saber cuándo quitar la franja de arriba (app.js) */
.safe-probe { position: absolute; top: 0; left: 0; width: 1px; height: env(safe-area-inset-top, 0px); visibility: hidden; pointer-events: none; }

@media (max-width: 959px) {
  /* Cabeceras de los paneles y del calendario: azul liso de la app en lugar del degradado, a juego con la franja
     de arriba */
  .fc-head, .page-head, .cal-band { background: var(--head-bar); }
  /* Mapa con satélite: fondo azul, porque con el gris claro Safari ponía una niebla blanca sobre el mapa */
  html.page-blue, html.page-blue body { background: var(--head-bar); }
  /* Panel abierto: el fondo sigue gris (la barra de abajo, gris) y, mientras la cabecera azul está bajo la zona de
     la hora, esta franja azul por delante: Safari pinta de azul arriba. Azul sobre azul, no se ve; en cuanto la
     cabecera sale de ahí al bajar, se quita y arriba pasa a gris. */
  html.top-blue .top-tint {
    display: block; position: fixed; z-index: 2000; top: 0; left: 0; right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 6px); /* Safari solo la mira si mide al menos 3 px */
    background-color: var(--head-bar);
  }
}