:root {
  --bg: #0f1216;
  --card: #181d24;
  --card2: #1f2530;
  --line: #2a3140;
  --text: #e8ecf2;
  --muted: #8a94a6;
  --accent: #ff6a1a;
  --ok: #34c77b;
  --warn: #f5d33d;
  --bad: #ef4a3c;
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, input { font: inherit; }
[hidden] { display: none !important; }

/* ---------- Cabecera ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--line); background: #12161c;
  flex-wrap: wrap;
}
/* Logotipo (el mismo que la landing): icono + «baibiketrainer» en minúscula, «trainer» en naranja. */
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.01em; font-size: 20px; line-height: 1; }
.brand img { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.brand b { color: var(--accent); font-weight: 800; }
.devices { display: flex; gap: 8px; flex-wrap: wrap; }
.dev {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.dev:hover { border-color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #555; }
.dev.connecting .dot { background: var(--warn); animation: blink 1s infinite; }
.dev.connected .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dev.partial .dot { background: var(--warn); }
@keyframes blink { 50% { opacity: .3; } }

/* Selector de idioma (ES | EU). En euskera la página se oculta hasta traducirla. */
html.i18n-pending body { visibility: hidden; }
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  background: var(--card2); color: var(--muted); border: 0; padding: 7px 10px; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.lang-switch button + button { border-left: 1px solid var(--line); }
.lang-switch button.active { background: var(--accent); color: #111; }
.lang-switch button:not(.active):hover { color: var(--text); }
.lang-switch button:focus-visible, .lang-ask button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Aviso de la primera visita: elegir idioma. */
.banner.lang-ask {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  background: #1c2533; border-color: #34507a; color: var(--text); font-weight: 600;
}
.lang-ask-btns { display: flex; gap: 8px; }
.lang-ask .btn { min-height: 40px; padding-inline: 16px; }
.lang-ask .btn.active { border-color: var(--accent); }

.banner {
  margin: 12px 20px 0; padding: 10px 14px; border-radius: var(--radius);
  background: #3a2a10; border: 1px solid #6b4a14; color: #ffd9a0;
}

/* ---------- Música (music.js) ---------- */
/* Botón de la cabecera: el punto solo se ve (verde) mientras suena algo. */
#btnMusic .dot { display: none; }
#btnMusic.playing .dot { display: block; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.music-modal { z-index: 30; }
.music-box { display: flex; flex-direction: column; gap: 12px; width: min(520px, 100%); height: min(720px, 92dvh); overflow: hidden; }
.music-head { display: flex; align-items: center; justify-content: space-between; }
.music-head h2 { margin: 0; }
.music-head .icon-btn { width: 36px; height: 36px; }
.music-adaptive { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card2); }
.music-adaptive input { margin-top: 2px; flex: none; width: 20px; height: 20px; }
.music-adaptive b { display: block; font-size: 15px; }
.music-adaptive small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.music-now { display: flex; flex-direction: column; gap: 8px; }
.mn-info { min-width: 0; }
.mn-info b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-info small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-controls { display: flex; align-items: center; gap: 8px; }
.mn-controls svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mn-btn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; }
.mn-btn:disabled { opacity: .35; cursor: default; }
.mn-btn.on { color: var(--accent); border-color: var(--accent); }
.mn-play { width: 52px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; }
.mn-play svg { width: 24px; height: 24px; }
#mnVolume { flex: 1; min-width: 60px; accent-color: var(--accent); }
.music-tabs { margin-top: 0; flex: none; }
.music-tabs button { flex: 1; }
.music-pane { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.music-pane[hidden] { display: none; }
.music-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.music-tools .hint { margin: 0; }
.music-tools input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--card2); color: var(--text); font-size: 14px; }
.music-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.music-list h4 { margin: 8px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.music-list h4:first-child { margin-top: 0; }
.ml-row { display: flex; align-items: center; gap: 6px; border-radius: 9px; background: var(--card2); border: 1px solid transparent; }
.ml-row.active { border-color: var(--accent); }
.ml-main { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; cursor: pointer; font: inherit; }
.ml-name { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-row.active .ml-name { color: var(--accent); font-weight: 600; }
.ml-main small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-act { width: 34px; height: 34px; flex: none; margin-right: 4px; }
.ml-act.star { font-size: 17px; color: var(--muted); }
.ml-act.star.on { color: var(--warn); }
.ml-empty { margin: 6px 2px; font-size: 13px; }
.radio-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--card2); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--muted); }
.radio-url summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.radio-url form { margin-top: 8px; }
/* Ficha de una sesión: casilla de música encima del botón Empezar */
.tr-go.has-music { flex-wrap: wrap; }
.tr-music { flex-basis: 100%; font-size: 14px; }
html.mobile .music-modal { padding: 8px; align-items: end; }
html.mobile .music-box { padding: 14px; height: calc(100dvh - 16px - env(safe-area-inset-top)); width: 100%; }
html.mobile .music-head h2 { font-size: 20px; }
html.mobile .music-tools input { font-size: 16px; } /* 16px evita el zoom de iOS */
html.mobile .ml-main { padding-block: 10px; }

/* Versión nueva publicada (update.js) */
.banner.update-bar {
  display: flex; align-items: center; gap: 10px; padding-block: 6px;
  background: #14301f; border-color: #2f6b45; color: #c9f2d6; font-weight: 600;
}
.update-text { flex: 1; min-width: 0; }
.update-bar .btn { min-height: 34px; padding-inline: 14px; flex: none; }
.update-bar .icon-btn { width: 32px; height: 32px; flex: none; }

/* Número de versión, al pie de Ajustes */
.app-version { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* iPhone/iPad: cómo abrir la app en Bluefy */
.ios-warn { position: relative; padding-right: 46px; }
.ios-warn b { color: #fff; }
.ios-warn a { color: inherit; font-weight: 700; }
.ios-warn ol { margin: 8px 0; padding-left: 22px; }
.ios-warn li { margin: 6px 0; }
.ios-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; }
.ios-url { display: flex; gap: 8px; margin-top: 6px; }
.ios-url input {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; font-size: 16px; /* 16px: Safari no hace zoom al tocarlo */
  background: var(--bg); color: var(--text); border: 1px solid #6b4a14;
}
.ios-url .btn { padding: 6px 12px; white-space: nowrap; }

/* ---------- Layout ---------- */
.layout {
  display: grid; gap: 14px; padding: 14px 20px 20px;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto auto auto 1fr; /* la columna lateral no separa los bloques */
  grid-template-areas:
    "route    route"
    "metrics  side"
    "profiles side"
    "controls side";
  align-items: start;
}
.routebar { grid-area: route; }
.metrics  { grid-area: metrics; }
.profiles { grid-area: profiles; }
.controls { grid-area: controls; }
.side     { grid-area: side; display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 980px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "route" "metrics" "profiles" "controls" "side";
    padding-inline: 12px;
  }
}

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.card-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px;
}
.icon-btn {
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  width: 30px; height: 26px; cursor: pointer; font-size: 15px; line-height: 1;
}
.icon-btn:hover { border-color: var(--muted); }

/* ---------- Mapa ---------- */
/* z-index 0 encierra las capas de Leaflet (z-index 400–1000) para que no tapen ventanas superpuestas */
.map { position: relative; z-index: 0; height: 340px; border-radius: 8px; overflow: hidden; background: #1a1f27; margin-bottom: 6px; }
.map-card.expanded {
  position: fixed; inset: 16px; z-index: 25; display: flex; flex-direction: column;
  box-shadow: 0 10px 60px rgba(0,0,0,.6);
}
.map-card.expanded .map { flex: 1; height: auto; }
.leaflet-container { font: 12px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.leaflet-control-attribution { font-size: 9px; }
.map-btn {
  width: 34px; height: 34px; background: #fff; color: #333; font-size: 20px; line-height: 1;
  border: 2px solid rgba(0,0,0,.2); border-radius: 4px; cursor: pointer; background-clip: padding-box;
}
.map-btn.on { background: var(--accent); color: #fff; }
.km-icon {
  background: #fff; color: #111; border: 1px solid #333; border-radius: 8px;
  font: 700 10px/14px system-ui, sans-serif; text-align: center;
}
.flag-icon {
  border-radius: 50%; border: 2px solid #fff; color: #fff; text-align: center;
  font: 800 11px/18px system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.flag-icon.start { background: #34c77b; }
.flag-icon.finish { background: #111; }
.climb-icon span {
  position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap;
  color: #111; font: 800 11px/1 system-ui, sans-serif; padding: 4px 7px; border-radius: 6px;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: pointer;
}
/* Fantasma (salida anterior): punto azul con borde blanco */
.ghost-icon span {
  display: block; width: 18px; height: 18px; border-radius: 50%; background: #4fa3ff; border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.5); opacity: .95;
}
.rider-icon span {
  position: relative; display: block; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
}
/* Flecha de la dirección de la marcha (--dir: ángulo en pantalla) */
.rider-icon span.dir { transform: rotate(var(--dir, 0deg)); }
.rider-icon span.dir i {
  position: absolute; left: 50%; top: -13px; margin-left: -7px;
  border: solid transparent; border-width: 0 7px 11px; border-bottom-color: #fff;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.6));
}
.map-compass { display: flex; align-items: center; justify-content: center; padding: 0; }
.map-compass svg { width: 22px; height: 22px; transition: transform .3s; }
.map-compass .n { fill: #e03b24; }
.map-compass .s { fill: #9aa3ad; }
.map-compass.on .n { fill: #fff; }
.map-compass.on .s { fill: rgba(255,255,255,.55); }
/* Onda animada con transform/opacity: la mueve la GPU sin repintar (ahorra batería). */
.rider-icon span::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; background: var(--accent);
  animation: pulse 1.8s ease-out infinite; z-index: -1; will-change: transform, opacity;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(2.3); opacity: 0; }
}
.climb-pop { line-height: 1.5; }

/* ---------- Mis rutas ---------- */
.rl-count { color: var(--accent); margin-left: 4px; }
.route-list { display: flex; flex-direction: column; gap: 6px; }
.rl-item {
  display: flex; align-items: stretch; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.rl-item.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.rl-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left;
  background: none; border: 0; color: var(--text); padding: 8px 10px; cursor: pointer;
}
.rl-main:hover { background: rgba(255,255,255,.03); }
.rl-main b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-main small { color: var(--muted); font-size: 11px; }
.rl-del { flex: none; display: flex; align-items: center; justify-content: center; height: auto; min-width: 44px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--muted); }
.rl-del:hover { color: var(--text); }
.rl-del.confirm { background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; padding-inline: 8px; }
.rl-save { align-self: flex-start; margin-top: 2px; }
.rl-full { color: var(--warn); }
.rl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rl-load { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.rl-load .hint { margin: 0; }
.rl-backup summary { margin-top: 10px; color: var(--muted); font-size: 12px; cursor: pointer; }
/* Ficha de una ruta (móvil): ocupa la tarjeta de Mis rutas y se ocultan las demás tarjetas de la ruta */
html.rd-open #routeLibCard > :not(#routeDetail) { display: none; }
html.mobile.rd-open[data-tab="train"] [data-m~="route"]:not(#routeLibCard) { display: none !important; }
.route-detail h4 { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.route-detail .hd-head { margin: 10px 0 10px; }
.rd-map { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card2); }
.rd-map canvas { display: block; width: 100%; height: 210px; }
.rd-profile { height: 120px; margin-top: 10px; }
.rd-climbs .climb { cursor: default; }
/* Sin recorrido no hay subidas que enseñar */
html:not(.has-route) #climbsCard { display: none; }

/* ---------- Subidas ---------- */
.climb-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.climb {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; cursor: pointer;
}
.climb:hover { border-color: var(--muted); }
.climb.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.climb.done { opacity: .5; }
.climb .cat {
  flex: none; min-width: 34px; text-align: center; padding: 3px 5px; border-radius: 6px;
  color: #111; font-weight: 800; font-size: 12px;
}
.climb-main { display: flex; flex-direction: column; min-width: 0; }
.climb-main small { color: var(--muted); font-size: 11px; }

/* ---------- Recorrido ---------- */
.routebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.route-name { font-size: 18px; font-weight: 700; }
.route-stats { color: var(--muted); }
.elev-note { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 3px; }
.elev-note .elev-doubt { display: block; color: #ffd27a; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.route-actions { display: flex; gap: 8px; }

/* ---------- Botones ---------- */
.btn {
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  padding: 9px 16px; border-radius: 10px; cursor: pointer; font-weight: 600;
}
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { background: #3a1a1a; border-color: #6b2a2a; color: #ffb3ab; }
.btn.ghost { background: transparent; }

/* ---------- Métricas ---------- */
.metrics {
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; min-width: 0;
}
.tile .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tile .value {
  font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tile .value small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.tile .sub { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.tile .sub b { color: var(--text); font-variant-numeric: tabular-nums; }

.tile.grade, .tile.big { grid-column: span 2; }
.tile.grade .value, .tile.big .value { font-size: 56px; line-height: 1.1; }
.tile.grade { transition: background-color .6s, border-color .6s; }
.tile.grade .value small { font-size: 22px; }
#powerTile { transition: border-color .4s; border-width: 1px; }

@media (max-width: 640px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile .value { font-size: 24px; }
  .tile.grade .value, .tile.big .value { font-size: 44px; }
}

/* ---------- Perfiles ---------- */
.profile-head { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.profile-head span:first-child { text-transform: uppercase; letter-spacing: .08em; }
canvas { display: block; width: 100%; }
.cv-zoom { height: 200px; margin-bottom: 14px; }
.cv-full { height: 130px; cursor: crosshair; }
.cv-map { height: 240px; }

/* ---------- Controles ---------- */
.controls { display: flex; gap: 10px; flex-wrap: wrap; }
.controls .btn { flex: 1 1 120px; padding: 12px; font-size: 15px; }

/* ---------- Formularios ---------- */
.field { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; }
.field b { color: var(--text); }
.field input[type=number], .field input[type=date], .field input[type=text] {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
}
.field input[type=range] { display: block; width: 100%; margin-top: 6px; accent-color: var(--accent); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.hint { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* ---------- Modal / toast / drop ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); display: grid; place-items: center; z-index: 20; padding: 16px;
}
.modal-box {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  width: min(460px, 100%); max-height: 92dvh; overflow-y: auto;
}
.modal-box h2 { margin: 0 0 14px; }
/* Compartir: por encima del resumen final */
.share-modal { z-index: 30; }
.share-modal .modal-box { display: flex; flex-direction: column; gap: 10px; }
.share-modal h2 { margin: 0; }
/* La vista previa se encoge con la pantalla para que la ventana quepa sin desplazar */
.share-img {
  display: block; height: min(calc(100dvh - 365px), 440px); width: auto; max-width: 100%; aspect-ratio: 4 / 5;
  object-fit: contain; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line); background: var(--card2);
}
.share-row { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.share-row > span { flex: none; width: 72px; }
.share-row input[type=text] {
  flex: 1; min-width: 0; padding: 8px 10px; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
}
.share-what { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--text); font-size: 14px; }
.share-actions { display: flex; gap: 8px; }
.share-actions .btn { flex: 1; }
.share-actions .btn.primary { flex: 2; }
.share-modal .hint { margin: 0; }
html.mobile .share-modal { padding: 10px; }
html.mobile .share-modal .modal-box { padding: 14px; }
html.mobile .share-modal h2 { font-size: 20px; }
html.mobile .share-row input[type=text] { font-size: 16px; } /* 16px evita el zoom de iOS */
html.mobile .share-actions .btn { min-height: 46px; }
.badge.shared { background: rgba(61,127,196,.2); color: #8fbfff; }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.summary div { background: var(--card2); border-radius: 10px; padding: 8px 12px; }
.summary span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.summary b { font-size: 20px; font-variant-numeric: tabular-nums; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  background: #222a36; border: 1px solid var(--line); padding: 10px 18px; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4); max-width: calc(100% - 32px);
}
.toast.error { border-color: var(--bad); color: #ffb3ab; }

.dropzone {
  position: fixed; inset: 12px; border: 3px dashed var(--accent); border-radius: 20px;
  background: rgba(15,18,22,.85); display: grid; place-items: center;
  font-size: 26px; font-weight: 700; z-index: 40; pointer-events: none;
}

/* =====================================================================
   Elementos comunes a las dos vistas
   ===================================================================== */
button { touch-action: manipulation; }
.map-wrap { position: relative; }
.tabbar, .map-hud { display: none; }
html:not(.mobile) .m-only { display: none !important; }

.segmented { display: flex; margin-top: 6px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.segmented button {
  flex: 1; background: var(--card2); color: var(--muted); border: 0; padding: 8px 4px; cursor: pointer; font-size: 13px;
}
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.active { background: var(--accent); color: #fff; font-weight: 700; }

/* ---------- Zonas de entrenamiento ---------- */
.tile.zones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.zone-row { flex: 1 1 300px; min-width: 0; transition: opacity .3s; }
.zone-row.off { opacity: .45; }
.zone-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.zone-name { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-pct { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zone-bar { display: flex; gap: 3px; height: 30px; margin-bottom: 6px; }
.zone-seg {
  position: relative; flex: 1; display: grid; place-items: center; border-radius: 6px;
  background: var(--c); opacity: .22; color: #111; font: 800 11px system-ui, sans-serif;
  transition: opacity .3s, transform .3s, box-shadow .3s;
}
.zone-seg.active { opacity: 1; transform: scaleY(1.18); box-shadow: 0 0 14px var(--c); }
.zone-seg .mk {
  position: absolute; bottom: -8px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid #fff;
  transition: left .4s;
}
.zone-bpm { white-space: nowrap; font-variant-numeric: tabular-nums; }
.zone-bpm b { font-size: 18px; }
.zone-bpm small { margin-left: 3px; color: var(--muted); font-size: 12px; }

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

/* ---------- Ajustes ---------- */
/* Texto a la izquierda y opciones a la derecha; si no caben, las opciones bajan de línea */
.set-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.set-row > span { flex: 1 0 auto; }
.set-row .segmented { flex: 1 1 200px; margin-top: 0; }
.set-row.set-first { margin-top: 0; }
.set-sim { margin-top: 12px; font-size: 14px; }
/* Dificultad: cinco niveles con un dibujo de la pendiente cada vez más empinada */
.diff-seg button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px; line-height: 1.15; }
.diff-seg svg { width: 30px; height: 16px; fill: var(--dc); }
.diff-seg button.active svg { fill: #fff; }
/* Campos en rejilla: si una etiqueta ocupa dos líneas, las casillas siguen alineadas */
.grid2 > .field, .grid3 > .field { display: flex; flex-direction: column; justify-content: flex-end; }
.diff-desc { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.diff-desc b { color: var(--text); }
.diff-pct { white-space: nowrap; opacity: .8; }
.diff-pct::before { content: '('; }
.diff-pct::after { content: ')'; }
.zone-tables summary { margin-top: 12px; color: var(--muted); font-size: 12px; cursor: pointer; }
.zone-tables-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zt { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.zt caption { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 4px; }
.zt td { padding: 3px 4px; border-top: 1px solid var(--line); white-space: nowrap; }
.zt td:last-child { text-align: right; }
.zt .sw { display: inline-block; min-width: 24px; padding: 1px 4px; border-radius: 4px; color: #111; font-weight: 800; text-align: center; }

/* Tiempo en zonas (resumen) */
.sum-zones { margin: -6px 0 16px; }
.sum-zones h3 { margin: 10px 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.sz-row { display: grid; grid-template-columns: 30px 1fr 88px; align-items: center; gap: 8px; font-size: 12px; margin: 3px 0; font-variant-numeric: tabular-nums; }
.sz-row .sw { border-radius: 4px; color: #111; font-weight: 800; text-align: center; padding: 1px 0; }
.sz-track { height: 10px; background: var(--card2); border-radius: 5px; overflow: hidden; }
.sz-fill { height: 100%; border-radius: 5px; }
.sz-row span:last-child { text-align: right; color: var(--muted); }

/* ---------- Guardar sesión e historial ---------- */
.save-name { margin: -4px 0 14px; }
.save-name input {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font-size: 15px;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
}
.modal-actions { flex-wrap: wrap; }
.btn.small { padding: 6px 10px; font-size: 12px; font-weight: 600; }
.btn.saved { background: #1d3a2b; border-color: #2f6b4a; color: #9fe3bd; }

.history-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.history-head .card-title { margin: 0; }
.history-actions { display: flex; gap: 6px; align-items: center; }
.hist-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.hist-totals:empty { display: none; }
.ht-block { background: var(--card2); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ht-block span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ht-block b { font-size: 15px; }
.ht-block small { color: var(--muted); font-size: 12px; }
.hist-list { display: flex; flex-direction: column; gap: 8px; }
.hist-item {
  display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.hist-item:hover { border-color: var(--muted); }
.hi-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.hi-top b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hi-top span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hi-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-variant-numeric: tabular-nums; }
.badge { padding: 0 7px; border-radius: 999px; background: #2a3140; color: var(--muted); font-size: 11px; line-height: 18px; }
.badge.ok { background: #1d3a2b; color: #9fe3bd; }
.hist-empty { text-align: center; color: var(--muted); padding: 30px 10px; line-height: 1.7; }
.hist-note { margin-top: 12px; }
.hd-head { margin: 12px 0 14px; }
.hd-name {
  width: 100%; font-size: 20px; font-weight: 700; color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; margin-left: -7px;
}
.hd-name:hover, .hd-name:focus { border-color: var(--line); background: var(--card2); outline: none; }
.hd-meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hd-chart { height: 200px; margin: 4px 0 16px; }
/* Detalle de una sesión: panel como el de la imagen de compartir y las seis cifras */
.hd-panel { display: block; width: 100%; max-width: 760px; height: auto; aspect-ratio: 960 / 560; margin: 0 0 12px; border-radius: 14px; }
.hd-six { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
.hd-zones { max-width: 760px; margin: 0 0 16px; }
.hd-zones summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 0; }
.hd-zones .sum-zones { margin-top: 6px; }
/* «Más datos»: el mismo formato compacto que las seis cifras de arriba */
.hd-more-grid { margin: 6px 0 10px; }
.hd-more-grid b { white-space: normal !important; overflow-wrap: anywhere; line-height: 1.2; }
/* Botón del fantasma sobre el perfil de los próximos 2 km (no ocupa sitio) */
.zoom-wrap { position: relative; }
.ghost-pill {
  position: absolute; top: 4px; right: 6px; z-index: 2; max-width: calc(100% - 60px);
  padding: 4px 10px; border-radius: 999px; border: 1px solid #4fa3ff; background: rgba(18,22,28,.9);
  color: #cfe4ff; font: 700 12px/1.3 system-ui, sans-serif; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ghost-pill:disabled { cursor: default; opacity: 1; }
.ghost-pill.ahead { border-color: var(--ok, #3ec46d); color: #9fe3bd; }
.ghost-pill.behind { border-color: #ef5a3c; color: #ffb3ab; }
.hud-ghost.ahead b { color: #9fe3bd; }
.hud-ghost.behind b { color: #ffb3ab; }
.ghost-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.ghost-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
.ghost-item span { color: var(--muted); font-size: 12px; }
.ghost-item.active { border-color: #4fa3ff; box-shadow: inset 3px 0 0 #4fa3ff; }
.ghost-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ghost-item .ghost-warn { color: #f5c542; font-size: 11px; line-height: 1.35; }
.ghost-tags:empty { display: none; }
.ghost-intro { margin: 0; }
.ghost-modal { z-index: 25; }
.ghost-sum { margin-top: 8px; }
/* Herramientas del Historial (copia, restaurar, abrir compartido): abajo, debajo de la lista */
.hist-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.hist-tools .btn { flex: 1 1 auto; }
/* Resumen al terminar: mismo cuerpo que el Historial y los cuatro botones en una fila fija abajo */
.modal-box { --mpad: 22px; }
.sum-body .hd-panel, .sum-body .hd-six, .sum-body .hd-zones { max-width: none; }
.sum-actions {
  position: sticky; bottom: calc(-1 * var(--mpad)); z-index: 1;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
  margin: 12px calc(-1 * var(--mpad)) calc(-1 * var(--mpad)); padding: 12px var(--mpad) var(--mpad);
  background: var(--card); border-top: 1px solid var(--line);
}
.sum-actions .btn { min-height: 46px; padding: 6px 4px; font-size: 14px; line-height: 1.15; white-space: normal; }
.sum-actions .btn.saved { background: #1d3a2b; border-color: #2c6b48; color: #9fe3bd; }
.hd-legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); }
.hd-legend .lg::before { content: ''; display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.hd-legend .ele::before { background: rgba(138,148,166,.6); height: 8px; }
.hd-legend .pow::before { background: #ff6a1a; }
.hd-legend .hr::before { background: #ef4a3c; }
.hist-detail .summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Entrenamientos y plan ---------- */
.tile.target { border-color: var(--accent); background: rgba(255, 106, 26, .08); }
.t-seg { margin-left: 6px; color: var(--text); letter-spacing: 0; text-transform: none; font-size: 12px; }
.workout-block { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.wc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.wc-title { min-width: 0; }
.wc-title b { font-size: 15px; }
.wc-prog { margin-left: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.wc-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wc-int { min-width: 44px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv-workout { height: 130px; }
.field input[type=date] { color-scheme: dark; }
/* En el circuito virtual (llano) el perfil de los próximos 2 km no aporta nada */
html.virtual-route .zoom-head, html.virtual-route .zoom-wrap { display: none; }

.tr-tabs { margin: 0; min-width: 240px; }
.tr-intro { color: var(--muted); margin: 4px 0 14px; }
.training h4 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.training p { margin: 0 0 8px; line-height: 1.5; }
.wo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.wo-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; min-width: 0;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
}
.wo-card:hover { border-color: var(--muted); }
.wo-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.wo-top b { font-size: 15px; }
.wo-cat {
  flex: none; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #111;
  background: var(--c, #8a94a6); white-space: nowrap;
}
.wo-svg { display: block; width: 100%; border-radius: 4px; background: rgba(255,255,255,.03); }
.wo-stats { display: flex; gap: 12px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.wo-purpose { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.wo-title { margin: 0 0 4px; font-size: 20px; }
.wo-short { color: var(--text); }
/* Favoritas: estrella en la esquina de cada tarjeta */
.wo-item { position: relative; min-width: 0; display: flex; }
.wo-item .wo-card { flex: 1; }
.wo-item .wo-top { padding-right: 34px; }
.wo-fav {
  position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.wo-fav:hover { color: var(--text); }
.wo-fav.on, .hd-fav.on { color: #f5c542; }
.wo-sec { margin: 4px 0 8px !important; }
.wo-sec + .wo-grid, .wo-grid + .wo-sec { margin-top: 14px !important; }
.wo-fav-hint { margin: -6px 0 12px; }
.hd-fav { margin-left: auto; }
.wo-len { margin: 0 0 14px; }
.wo-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.wo-chart { height: 180px; margin-bottom: 4px; }
.wo-steps { display: flex; flex-direction: column; gap: 3px; }
.wo-step {
  display: grid; grid-template-columns: 10px 1fr auto 90px; gap: 10px; align-items: center;
  padding: 6px 8px; border-radius: 8px; background: var(--card2); font-size: 13px; font-variant-numeric: tabular-nums;
}
.wo-step .sw { width: 10px; height: 22px; border-radius: 3px; }
.ws-label small { display: block; color: var(--muted); font-size: 11px; }
.ws-time { color: var(--muted); }
.ws-w { text-align: right; font-weight: 700; }

/* Mis sesiones y configurador de sesiones (builder.js) */
.wo-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.wo-mine-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wo-mine-head { margin: 12px 0 14px; }
.wo-mine-head .wo-title { margin: 0; }
.hd-custom { display: inline-flex; gap: 6px; margin-left: auto; }
.wb-name { margin: 0 0 10px; }
.wb-name input { font-size: 15px; }
.wb-preview { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 4px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; }
.wb-preview .wo-stats b { color: var(--text); }
.wb-empty { height: 46px; border-radius: 4px; background: rgba(255,255,255,.03); }
.wb-help { margin: 6px 0 10px; }
.wb-blocks { display: flex; flex-direction: column; gap: 8px; }
.wb-block {
  background: var(--card2); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--muted));
  border-radius: 10px; padding: 8px 10px 10px;
}
.wb-head { display: flex; align-items: center; gap: 8px; }
.wb-head b { font-size: 14px; }
.wb-dur { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.wb-tools { margin-left: auto; display: flex; gap: 2px; }
.wb-tools button {
  width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font-size: 15px;
}
.wb-tools button:hover:not(:disabled) { background: var(--card); color: var(--text); }
.wb-tools button:disabled { opacity: .3; cursor: default; }
.wb-row { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; margin-top: 8px; }
.wb-lbl { color: var(--muted); font-size: 12px; }
.wb-ctl { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; min-width: 0; }
.wb-time, .wb-pow { display: inline-flex; align-items: center; gap: 4px; }
.wb-time i, .wb-pow i { font-style: normal; color: var(--muted); font-size: 12px; }
.wb-block input[type=number], .wb-block select, .wb-fit input {
  padding: 6px 6px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-variant-numeric: tabular-nums;
}
.wb-block input[type=number], .wb-fit input { width: 58px; text-align: right; }
.wb-block select { max-width: 150px; color-scheme: dark; }
.wb-w { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.wb-free { margin: 6px 0 0 104px !important; font-size: 12px; color: var(--muted); }
.wb-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.wb-add span { color: var(--muted); font-size: 12px; margin-right: 2px; }
.wb-fit { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 12px; font-size: 13px; }
.wb-fit .hint { margin: 0; flex-basis: 100%; }
.wb-tpls .goal .wo-svg { margin: 4px 0 2px; }

.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.goal {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.goal span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.goal.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(255,106,26,.08); }
.day-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.day-chips button {
  background: var(--card2); color: var(--muted); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 0; cursor: pointer; font-weight: 600;
}
.day-chips button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.training .check { margin-top: 12px; }

.plan-head h3 { margin: 4px 0; font-size: 20px; }
.assess { margin: 12px 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; border: 1px solid; }
.assess.ok { background: #16301f; border-color: #2f6b4a; color: #b6ecca; }
.assess.warn { background: #33280f; border-color: #6b5314; color: #ffe0a0; }
.assess.hard { background: #3a1a1a; border-color: #6b2a2a; color: #ffc2bb; }
.ftp-ask { margin-top: 8px; }
.ftp-ask .ftp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.plan-why { color: var(--muted); font-size: 13px; }
.plan-progress { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; font-size: 12px; color: var(--muted); }
.pp-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--card2); overflow: hidden; }
.pp-bar div { height: 100%; background: var(--ok); border-radius: 4px; }
.next-card { background: var(--card2); border: 1px solid var(--accent); border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.nc-when { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.nc-name { font-size: 17px; font-weight: 700; margin: 2px 0 8px; }
.next-card .modal-actions { justify-content: flex-start; margin-top: 10px; }
.plan-weeks { display: flex; flex-direction: column; gap: 10px; }
.pw { border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.pw.current { border-color: var(--accent); }
.pw-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 2px 4px 6px; }
.pw-head span { color: var(--muted); font-size: 12px; }
.ps {
  display: grid; grid-template-columns: 78px 1fr auto 20px; gap: 8px; align-items: center; width: 100%;
  text-align: left; background: none; color: var(--text); border: 0; border-top: 1px solid var(--line);
  padding: 7px 4px; cursor: pointer; font-size: 13px;
}
.ps:hover:not(:disabled) { background: var(--card2); }
.ps-day { color: var(--muted); font-size: 12px; }
.ps-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ps-icon { text-align: center; font-weight: 800; }
.ps.done .ps-icon { color: var(--ok); }
.ps.done .ps-name { color: var(--muted); }
.ps.today { background: rgba(255,106,26,.1); }
.ps.today .ps-icon { color: var(--accent); }
.ps.missed .ps-icon { color: var(--bad); }
.ps.event { font-weight: 700; cursor: default; }

/* PC: el historial y el apartado Entrenar se abren como ventanas superpuestas */
html:not(.mobile):not(.train-open) .training { display: none; }
html:not(.mobile).train-open .training {
  position: fixed; inset: 24px; z-index: 28; max-width: 1100px; margin: 0 auto; overflow-y: auto;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .65);
}
html:not(.mobile):not(.hist-open) .history { display: none; }
html:not(.mobile).hist-open .history {
  position: fixed; inset: 24px; z-index: 28; max-width: 1000px; margin: 0 auto; overflow-y: auto;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .65);
}

/* =====================================================================
   Vista PC
   ===================================================================== */
.dev.icon { padding: 6px 11px; font-size: 16px; line-height: 1; }
.kbd-hint { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 11px; }
kbd {
  display: inline-block; min-width: 18px; padding: 0 5px; margin: 0 1px;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; font: 11px/16px ui-monospace, Consolas, monospace; text-align: center;
}

/* Monitores grandes: todo más grande para leerlo desde la bici. */
@media (min-width: 1600px) {
  html:not(.mobile) .layout { grid-template-columns: minmax(0, 1fr) 400px; }
  html:not(.mobile) .map { height: 420px; }
  html:not(.mobile) .tile .value { font-size: 36px; }
  html:not(.mobile) .tile.grade .value, html:not(.mobile) .tile.big .value { font-size: 72px; }
  html:not(.mobile) .cv-zoom { height: 250px; }
  html:not(.mobile) .cv-full { height: 150px; }
}

/* =====================================================================
   Vista móvil: pestañas, botones grandes, barra de control fija
   ===================================================================== */
html.mobile {
  --m-top: 52px;
  --m-nav: 60px;
  --m-ctrl: 58px; /* barra Iniciar/Pausa/Finalizar (antes 66 px) */
  --m-bottom: calc(var(--m-nav) + var(--m-ctrl) + env(safe-area-inset-bottom));
}
html.mobile body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
html.mobile .m-hide { display: none !important; }

/* Cabecera compacta y fija */
html.mobile .topbar {
  position: sticky; top: 0; z-index: 15; flex-wrap: nowrap;
  padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
}
html.mobile .brand { font-size: 14px; gap: 5px; white-space: nowrap; }
html.mobile .brand img { width: 18px; height: 18px; border-radius: 4px; }
html.mobile .devices { flex-wrap: nowrap; gap: 6px; min-width: 0; }
html.mobile .dev { padding: 7px 10px; font-size: 13px; min-width: 0; }
/* Móvil: rodillo y pulsómetro con icono (bicicleta / corazón) en vez de texto, y el punto de
   estado en la esquina. El texto sigue ahí, oculto a la vista, para los lectores de pantalla.
   Así caben el logotipo y el botón de idioma sin cortar nada en ningún idioma. */
.dev-ico { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Corazón con la línea del pulso "recortada" en el color del botón. */
#btnHR .dev-ico .heart { fill: #ef5a3c; stroke: none; }
#btnHR .dev-ico .pulse { stroke: var(--card2); stroke-width: 1.9; }
html.mobile #btnTrainer, html.mobile #btnHR, html.mobile #btnMusic { position: relative; padding: 7px 11px; flex: none; }
html.mobile .dev-ico { display: block; }
html.mobile #btnTrainer .dot, html.mobile #btnHR .dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border: 2px solid var(--card2); box-sizing: content-box; }
html.mobile #btnMusic .dot { position: absolute; top: 3px; right: 3px; border: 2px solid var(--card2); box-sizing: content-box; }
html.mobile #trainerLabel, html.mobile #hrLabel, html.mobile #musicLabel {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Botón de idioma: solo el idioma al que se cambia ("EU" / "ES"), grande para el dedo. */
html.mobile .lang-switch { flex: none; }
html.mobile .lang-switch button { min-width: 44px; min-height: 36px; padding: 7px 10px; font-size: 13px; }
html.mobile .lang-switch button.active { display: none; }
html.mobile .lang-switch button + button { border-left: 0; }
/* Hasta 389 px: cabecera más ceñida para que quepa el logotipo con todos los botones. */
@media (max-width: 389px) {
  html.mobile .topbar { padding-inline: 8px; gap: 8px; }
  html.mobile .devices { gap: 4px; }
  html.mobile #btnTrainer, html.mobile #btnHR, html.mobile #btnMusic { padding-inline: 9px; }
}
/* Móviles de menos de 360 px: con el logotipo y el botón de música no cabe también el de pantalla completa. */
@media (max-width: 359px) {
  html.mobile #btnFullscreen { display: none; }
  html.mobile .brand { font-size: 13px; gap: 4px; }
  html.mobile .brand img { width: 16px; height: 16px; }
}
html.mobile .banner { margin: 10px 10px 0; font-size: 13px; }

/* Contenido en una columna; solo se ve la pestaña activa */
html.mobile .layout {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 10px 10px calc(var(--m-bottom) + 12px);
}
html.mobile .layout > * { grid-area: auto; }
html.mobile .side { display: contents; }
html.mobile[data-tab="ride"] [data-m]:not([data-m~="ride"]),
html.mobile[data-tab="map"] [data-m]:not([data-m~="map"]),
html.mobile[data-tab="settings"] [data-m]:not([data-m~="settings"]),
html.mobile[data-tab="history"] [data-m]:not([data-m~="history"]),
html.mobile[data-tab="train"]:not([data-trview="route"]) [data-m]:not([data-m~="train"]),
html.mobile[data-tab="train"][data-trview="route"] [data-m]:not([data-m~="train"]):not([data-m~="route"]) { display: none !important; }
/* Entrenar → Ruta: el selector arriba y debajo las tarjetas de la ruta */
html.mobile[data-tab="train"] .training { order: -1; }
html.mobile[data-trview="route"] .training { padding: 8px; }
html.mobile[data-trview="route"] .training .history-head { margin-bottom: 0; }
/* Entrenar → Sesiones/Velódromo/Mi plan sin salida en marcha: sin la barra Iniciar/Repetir de abajo
   (arrancaría la ruta anterior, no lo elegido aquí); el botón de empezar del panel queda siempre visible. */
html.mobile[data-tab="train"]:not([data-trview="route"]):not(.ride-active),
html.mobile.rd-open[data-tab="train"]:not(.ride-active),
html.mobile[data-tab="settings"]:not(.ride-active),
html.mobile[data-tab="history"]:not(.ride-active) {
  --m-bottom: calc(var(--m-nav) + env(safe-area-inset-bottom));
}
/* (también en la ficha de una ruta: «Iniciar» arrancaría la ruta cargada, no la que se está viendo) */
html.mobile[data-tab="train"]:not([data-trview="route"]):not(.ride-active) .controls,
html.mobile.rd-open[data-tab="train"]:not(.ride-active) .controls,
html.mobile[data-tab="settings"]:not(.ride-active) .controls,
html.mobile[data-tab="history"]:not(.ride-active) .controls { display: none; }
html.mobile .tr-go {
  position: sticky; z-index: 4; bottom: calc(var(--m-bottom) + 8px);
  margin: 14px -4px 0; padding: 8px 4px; background: var(--card);
  box-shadow: 0 -10px 12px -6px var(--card);
}
html.mobile .tr-go .btn { flex: 1; min-height: 48px; font-size: 16px; }
html.mobile .wo-grid, html.mobile .goal-grid { grid-template-columns: 1fr; }
html.mobile .wb-row { grid-template-columns: 1fr; gap: 4px; }
html.mobile .wb-free { margin-left: 0 !important; }
html.mobile .wb-block input[type=number], html.mobile .wb-block select, html.mobile .wb-fit input, html.mobile .wb-name input { font-size: 16px; } /* 16px evita el zoom de iOS */
html.mobile .wb-block select { max-width: none; flex: 1; }
html.mobile .wb-pow { flex: 1 1 100%; }
html.mobile .wb-tools button { width: 34px; height: 34px; }
html.mobile .wo-summary { grid-template-columns: 1fr 1fr; }
html.mobile .tr-tabs { min-width: 0; flex: 1; }
html.mobile .wo-step { grid-template-columns: 10px 1fr auto 74px; gap: 8px; }
html.mobile .ps { grid-template-columns: 64px 1fr auto 16px; }
html.mobile .tabbar button { font-size: 10px; }
/* Entrenamiento en curso: su gráfica ocupa el hueco del perfil de los próximos 2 km */
html.mobile.workout-on .zoom-head, html.mobile.workout-on .zoom-wrap { display: none; }
html.mobile .workout-block { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-bottom: 6px; padding-bottom: 6px; }
html.mobile .workout-block[hidden] { display: none; }
html.mobile .cv-wrap.wo { min-height: 60px; }
html.mobile .wc-head { margin-bottom: 4px; gap: 4px 8px; }
html.mobile .wc-title b { font-size: 13px; }
html.mobile .wc-controls .btn.small { padding: 6px 8px; }
html.mobile .hist-totals { gap: 6px; }
html.mobile .ht-block { padding: 7px 8px; gap: 1px; }
html.mobile .ht-block span { font-size: 9px; letter-spacing: .04em; }
html.mobile .ht-block b { font-size: 13px; }
html.mobile .ht-block small { font-size: 11px; }
html.mobile .hist-detail .summary { grid-template-columns: 1fr 1fr; }
html.mobile .hd-six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html.mobile .hd-six div { padding: 7px 8px; }
html.mobile .hd-six span { font-size: 9px; letter-spacing: .04em; }
html.mobile .hd-six b { font-size: 16px; white-space: nowrap; }
html.mobile .history-actions .btn.small { padding: 8px 10px; }
html.mobile .hd-chart { height: 170px; }

/* Ficha de una sesión en el móvil: cabe en la pantalla sin desplazar. La tarjeta ocupa justo
   el alto disponible y el panel (mapa/pista/barras) se encoge para dejar sitio al resto.
   Al abrir «Tiempo en zonas» o «Más datos» vuelve a crecer y entonces sí se desplaza. */
html.mobile .history:has(> #histDetail:not([hidden])) > :is(.history-head, .hist-note) { display: none; }
html.mobile .history:has(> #histDetail:not([hidden])):not(:has(#histDetail details[open])) {
  display: flex; flex-direction: column; box-sizing: border-box;
  height: calc(100dvh - var(--m-top) - var(--m-bottom) - 22px);
}
html.mobile #histDetail:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html.mobile #histDetail > * { flex: none; }
html.mobile #histDetail #hdBack { align-self: flex-start; }
html.mobile #histDetail .hd-head { margin: 6px 0 8px; }
html.mobile #histDetail .hd-name { font-size: 18px; padding: 2px 6px; }
html.mobile #histDetail .hd-meta { font-size: 12px; gap: 4px 6px; }
html.mobile #histDetail .hd-head .hint { margin-top: 4px; font-size: 12px; }
html.mobile #histDetail .hd-panel {
  flex: 1 1 0; min-height: 80px; height: auto; aspect-ratio: auto; object-fit: contain;
  max-height: calc((100vw - 44px) * 560 / 960); margin: 0 0 8px;
}
html.mobile #histDetail:has(details[open]) .hd-panel { flex: none; aspect-ratio: 960 / 560; max-height: none; }
html.mobile #histDetail .hd-six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
html.mobile #histDetail .hd-six b { font-size: 15px; }
html.mobile #histDetail .hd-zones { margin: 0; }
html.mobile #histDetail .hd-zones summary { padding: 5px 0; }
html.mobile #histDetail .modal-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }
html.mobile #histDetail .modal-actions .btn { min-height: 40px; padding: 6px 4px; font-size: 13px; line-height: 1.15; white-space: normal; }

/* Pestaña Rodar: datos grandes y legibles con el móvil en el manillar */
html.mobile .metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
html.mobile .tile { grid-column: span 2; padding: 8px 10px; }
html.mobile .tile.grade, html.mobile .tile.big { grid-column: span 3; }
html.mobile .tile .label { font-size: 10px; }
html.mobile .tile .value { font-size: 22px; }
html.mobile .tile .value small { font-size: 11px; margin-left: 2px; }
html.mobile .tile.grade .value, html.mobile .tile.big .value { font-size: 46px; }
html.mobile .tile.grade .value small { font-size: 18px; }
html.mobile .tile .sub { font-size: 11px; gap: 0 10px; }
/* Zonas: una línea por zona → icono · nombre · barra · % */
html.mobile .tile.zones { grid-column: 1 / -1; gap: 9px; padding: 9px 10px 11px; }
html.mobile .zone-row { display: flex; align-items: center; gap: 8px; flex-basis: 100%; }
html.mobile .zone-head { display: contents; }
html.mobile .zone-head .label { display: none; }
html.mobile .zone-row::before { flex: none; width: 16px; text-align: center; font-size: 13px; color: var(--muted); }
html.mobile #zrPower::before { content: '⚡'; }
html.mobile #zrHr::before { content: '♥'; color: #ef5a3c; }
html.mobile .zone-name { order: 1; flex: 0 0 92px; font-size: 14px; }
html.mobile .zone-bar { order: 2; flex: 1; min-width: 0; height: 20px; margin: 0; gap: 2px; }
html.mobile .zone-pct { order: 3; flex: none; min-width: 60px; margin: 0; text-align: right; }
/* Pulso: el valor en ppm ocupa la columna derecha (en lugar del % de FC) */
html.mobile #zHrPct { display: none; }
html.mobile .zone-bpm { order: 3; flex: none; min-width: 60px; text-align: right; }
html.mobile .zone-bpm b { font-size: 19px; line-height: 1; }
html.mobile .zone-bpm small { font-size: 10px; margin-left: 2px; }
html.mobile #lblAvgSpeed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Móviles estrechos: más sitio para la barra de zonas */
@media (max-width: 360px) {
  html.mobile .zone-row { gap: 6px; }
  html.mobile .zone-name { flex-basis: 76px; font-size: 13px; }
  html.mobile .zone-pct, html.mobile .zone-bpm { min-width: 36px; }
  html.mobile .zone-bpm small { display: none; }
}
html.mobile .zone-seg { font-size: 10px; border-radius: 4px; }
html.mobile .zone-seg .mk { bottom: -7px; }
html.mobile .zone-tables-grid { grid-template-columns: 1fr; }

/* La pestaña Rodar ocupa exactamente la pantalla: el perfil completo siempre visible
   y el de los próximos 2 km se estira para rellenar el hueco que quede. */
html.mobile[data-tab="ride"] .layout { min-height: calc(100dvh - var(--m-top)); }
html.mobile .profiles { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 10px; }
html.mobile .profiles .profile-head { margin-bottom: 2px; }
html.mobile .cv-wrap { position: relative; flex: 1 1 0; min-height: 60px; margin-bottom: 6px; }
html.mobile .cv-wrap canvas { position: absolute; inset: 0; height: 100%; margin: 0; }
html.mobile .cv-full { flex: none; height: 76px; }

/* Pestaña Mapa: a pantalla completa con datos superpuestos */
html.mobile[data-tab="map"] .map-card {
  position: fixed; left: 0; right: 0; top: var(--m-top); bottom: var(--m-bottom); z-index: 5;
  display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0;
}
html.mobile[data-tab="map"] .map-card .card-title { display: none; }
html.mobile[data-tab="map"] .map-wrap { flex: 1; }
html.mobile[data-tab="map"] .map { height: 100%; margin: 0; border-radius: 0; }
html.mobile[data-tab="map"] .map-hud {
  display: flex; position: absolute; left: 10px; right: 10px; bottom: 22px; z-index: 900; gap: 6px;
  padding: 6px; border-radius: 14px; background: rgba(15, 18, 22, 0.9); border: 1px solid var(--line);
  pointer-events: none;
}
.hud-grade {
  flex: 1.3; display: flex; align-items: baseline; justify-content: center; padding-top: 6px; border-radius: 10px; color: #111;
  font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--ok); white-space: nowrap;
}
.hud-cell { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 0; }
.hud-cell b { font-size: 20px; font-variant-numeric: tabular-nums; }
.hud-cell small { font-size: 10px; color: var(--muted); }

/* Pestaña Ruta */
html.mobile .routebar { flex-direction: column; align-items: stretch; }
html.mobile .routebar { gap: 8px; padding: 12px; }
/* Sin ruta, los botones «Cargar GPX» y «Ruta demo» ya lo dicen todo: sin título ni explicación */
html.mobile:not(.has-route) .routebar .route-info { display: none; }
html.mobile .route-name { font-size: 17px; line-height: 1.25; }
html.mobile .route-stats { font-size: 12px; line-height: 1.4; margin-top: 2px; }
html.mobile .route-actions { display: grid; grid-template-columns: 1fr 1fr; }
html.mobile .route-actions .btn { padding: 10px; }
html.mobile #routeLibCard, html.mobile #climbsCard { padding: 12px; }
html.mobile #routeLibCard .card-title, html.mobile #climbsCard .card-title { margin-bottom: 8px; }
html.mobile .rl-main { padding: 8px 10px; }
html.mobile .rl-main b { font-size: 15px; }
html.mobile .rl-backup summary { font-size: 13px; }
html.mobile .climb-list { max-height: none; }
html.mobile .climb { padding: 8px 10px; }

/* Pestaña Ajustes: compacta para que quepa sin scroll (con la zona de «Ver mis zonas» cerrada) */
html.mobile[data-tab="settings"] .layout { gap: 8px; }
html.mobile .set-card { padding: 10px 12px; }
html.mobile .set-card .card-title { margin-bottom: 2px; }
html.mobile .set-card .field { margin-top: 6px; font-size: 13px; }
html.mobile .set-card .field input[type=number] { padding: 5px 8px; }
html.mobile .set-card .segmented { margin-top: 4px; }
html.mobile .set-card .segmented button { padding: 7px 4px; }
html.mobile .set-card .diff-seg button { gap: 2px; padding: 5px 1px; font-size: 11px; line-height: 1.1; }
html.mobile .set-card .diff-seg svg { width: 24px; height: 12px; }
html.mobile .set-card .diff-desc { margin-top: 4px; line-height: 1.3; }
html.mobile .set-card .diff-pct { display: none; }
/* Pesos: texto a la izquierda y la casilla a la derecha, en una sola línea */
html.mobile .set-card .grid2 > .field { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; line-height: 1.2; }
html.mobile .set-card .grid2 > .field input { width: 64px; flex: none; margin-top: 0; }
html.mobile .set-card .grid3 > .field { font-size: 12px; line-height: 1.2; }
html.mobile .set-card .grid3 > .field input { margin-top: 3px; }
html.mobile .set-card .set-row.set-first { margin-top: 0; }
html.mobile .set-card .zone-tables summary { margin-top: 8px; font-size: 13px; }
html.mobile .set-card .check { padding: 0; }
html.mobile .set-card .set-sim { margin-top: 8px; font-size: 14px; }
/* Simulación en vertical: una sola fila  −25 −10  180 W  +10 +25  (sin la barra deslizante) */
html.mobile #simPanel:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; gap: 6px; margin-top: 6px; }
html.mobile #simPanel > .field { order: 3; margin: 0; padding: 0 4px; font-size: 0; white-space: nowrap; }
html.mobile #simPanel > .field b { font-size: 16px; }
html.mobile #simPanel > .field b::after { content: ' W'; font-weight: 400; color: var(--muted); font-size: 13px; }
html.mobile #simPanel > .field input[type=range] { display: none; }
html.mobile #simPanel .sim-steps { display: contents; }
html.mobile #simPanel [data-sim="-25"] { order: 1; }
html.mobile #simPanel [data-sim="-10"] { order: 2; }
html.mobile #simPanel [data-sim="10"] { order: 4; }
html.mobile #simPanel [data-sim="25"] { order: 5; }
html.mobile .set-card .sim-steps .btn { padding: 7px 0; font-size: 15px; }
/* Pantallas bajas: fuera la fila Idioma (el botón ES/EU de la cabecera hace lo mismo), el título
   «Dificultad de las subidas» y la explicación del nivel (el nivel elegido ya se ve marcado). */
@media (orientation: portrait) and (max-height: 700px), (orientation: landscape) and (max-height: 520px) {
  html.mobile .set-misc .set-row.set-first { display: none; }
  html.mobile .set-card .set-sim { margin-top: 0; }
  html.mobile .app-version { margin-top: 4px; font-size: 11px; }
  html.mobile .set-trainer > div.field { font-size: 0; margin-top: 2px; }
  html.mobile .set-trainer .diff-seg { margin-top: 0; }
}
@media (orientation: portrait) and (max-height: 660px), (orientation: landscape) and (max-height: 380px) {
  html.mobile .set-card .diff-desc { display: none; }
}
@media (orientation: portrait) and (max-height: 600px) {
  html.mobile .app-version { display: none; } /* no cabe: la versión se ve en pantallas más altas */
  html.mobile[data-tab="settings"] .layout { gap: 6px; padding-top: 6px; }
  html.mobile .set-card { padding: 8px 10px; }
  html.mobile .set-card .segmented button { padding: 5px 4px; }
  html.mobile .set-card .field input[type=number] { padding: 3px 8px; }
  html.mobile .set-card .sim-steps .btn { padding: 5px 0; }
  html.mobile .set-card .zone-tables summary { margin-top: 6px; }
}
html.mobile .field input[type=number], html.mobile .field input[type=date], html.mobile .field input[type=text] { padding: 10px; font-size: 16px; } /* 16px evita el zoom de iOS */
html.mobile .field input[type=range] { height: 28px; }
html.mobile .check { font-size: 16px; padding: 4px 0; }
html.mobile .check input { width: 22px; height: 22px; }
.sim-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.sim-steps .btn { padding: 12px 0; font-size: 16px; }

/* Barra de control fija */
html.mobile .controls {
  position: fixed; left: 0; right: 0; z-index: 16; height: var(--m-ctrl);
  bottom: calc(var(--m-nav) + env(safe-area-inset-bottom));
  flex-wrap: nowrap; gap: 8px; padding: 8px 10px;
  border-radius: 0; border-width: 1px 0 0; background: #151a21;
}
html.mobile .controls .btn { flex: 1 1 0; padding: 0 4px; min-height: 42px; font-size: 16px; white-space: nowrap; }
html.mobile .controls #btnStart { flex: 2 1 0; font-size: 18px; }
@media (max-width: 380px) {
  html.mobile .controls .btn { font-size: 14px; }
  html.mobile .controls #btnStart { flex: 1.6 1 0; font-size: 16px; }
}

/* Barra de pestañas */
html.mobile .tabbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 16;
  height: calc(var(--m-nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: #12161c; border-top: 1px solid var(--line);
}
.tabbar button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; color: var(--muted); font-size: 11px; cursor: pointer;
}
.tabbar svg { width: 24px; height: 24px; fill: currentColor; }
.tabbar button.active { color: var(--accent); font-weight: 700; }

html.mobile .toast { bottom: calc(var(--m-bottom) + 12px); }
html.mobile .modal-box { padding: 18px; --mpad: 18px; }
html.mobile .modal { padding: 10px; }
html.mobile .sum-actions .btn { font-size: 13px; }

/* Móviles de pantalla baja (o con las barras del navegador visibles): todo más compacto
   para que el perfil completo siga viéndose sin desplazar la pantalla. */
@media (orientation: portrait) and (max-height: 740px) {
  html.mobile { --m-nav: 54px; --m-ctrl: 54px; }
  html.mobile .layout { gap: 6px; padding-top: 6px; }
  html.mobile .metrics { gap: 6px; }
  html.mobile .tile { padding: 6px 9px; }
  html.mobile .tile .value { font-size: 19px; }
  html.mobile .tile.grade .value, html.mobile .tile.big .value { font-size: 36px; }
  html.mobile .tile.grade .value small { font-size: 15px; }
  html.mobile .tile .sub { font-size: 10px; }
  html.mobile .tile.zones { gap: 8px; padding: 7px 9px 9px; }
  html.mobile .zone-bar { height: 18px; }
  html.mobile .profiles { padding: 8px; }
  html.mobile .profiles .profile-head { display: none; }
  html.mobile .cv-wrap { min-height: 56px; }
  html.mobile .cv-full { height: 60px; }
  html.mobile .controls .btn { min-height: 40px; }
}

/* Móvil en horizontal: pestañas a la izquierda, controles a la derecha */
@media (orientation: landscape) and (max-height: 520px) {
  html.mobile {
    --m-rail: calc(64px + env(safe-area-inset-left));
    --m-side: calc(104px + env(safe-area-inset-right));
    --m-bottom: env(safe-area-inset-bottom);
  }
  html.mobile .topbar { padding-block: 4px; padding-left: calc(12px + env(safe-area-inset-left)); }
  html.mobile .layout { padding: 8px var(--m-side) 12px var(--m-rail); }
  html.mobile .banner { margin-left: calc(var(--m-rail) + 8px); margin-right: calc(var(--m-side) + 8px); }
  html.mobile .tabbar {
    flex-direction: column; top: var(--m-top); right: auto; width: var(--m-rail); height: auto;
    padding: 0 0 env(safe-area-inset-bottom) env(safe-area-inset-left); border-top: 0; border-right: 1px solid var(--line);
  }
  html.mobile .controls {
    flex-direction: column; top: var(--m-top); bottom: 0; left: auto; width: var(--m-side); height: auto;
    padding: 8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) 8px;
    border-width: 0 0 0 1px;
  }
  html.mobile .controls .btn, html.mobile .controls #btnStart { flex: 1 1 0; font-size: 14px; }
  html.mobile .controls .btn .txt { display: block; font-size: 12px; }

  html.mobile[data-tab="ride"] .layout {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
  }
  html.mobile .metrics { gap: 6px; }
  html.mobile .tile { padding: 6px 8px; }
  html.mobile .tile .value { font-size: 20px; }
  html.mobile .tile.grade .value, html.mobile .tile.big .value { font-size: 38px; }
  html.mobile[data-tab="ride"] .layout { grid-template-rows: 1fr; align-items: stretch; }
  html.mobile .metrics { align-content: start; }
  html.mobile .cv-wrap { min-height: 90px; }
  html.mobile .cv-full { height: 66px; }

  /* Ajustes en dos columnas: Rodillo + Idioma a la izquierda, Zonas a la derecha */
  html.mobile[data-tab="settings"] .layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  html.mobile .set-trainer { grid-column: 1; grid-row: 1; }
  html.mobile .set-zones { grid-column: 2; grid-row: 1 / span 2; }
  html.mobile .set-misc { grid-column: 1; grid-row: 2; }
  /* Ficha de una sesión: el panel a la izquierda a toda altura y los datos a la derecha */
  html.mobile #histDetail:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .5fr) minmax(0, .5fr); column-gap: 12px;
    grid-auto-rows: max-content; align-content: start;
  }
  html.mobile #histDetail > * { grid-column: 2 / 4; }
  html.mobile #histDetail #hdBack { justify-self: start; padding: 4px 10px; }
  html.mobile #histDetail .hd-panel { grid-column: 1; grid-row: 1 / span 20; align-self: stretch; height: 100%; max-height: none; margin: 0; }
  html.mobile #histDetail:not(:has(details[open])) { grid-template-rows: repeat(4, max-content) 1fr; }
  html.mobile #histDetail:has(details[open]) .hd-panel { align-self: start; height: auto; aspect-ratio: 960 / 560; position: sticky; top: calc(var(--m-top) + 8px); }
  /* «Tiempo en zonas» y «Más datos» uno al lado del otro; el que se abre ocupa las dos columnas */
  html.mobile #histDetail .hd-zones { grid-column: auto; }
  html.mobile #histDetail .hd-zones[open] { grid-column: 2 / 4; }
  html.mobile #histDetail .hd-head { margin: 4px 0 6px; }
  html.mobile #histDetail .hd-name { font-size: 16px; }
  html.mobile #histDetail .hd-meta { font-size: 11px; }
  html.mobile #histDetail .hd-six div { padding: 4px 8px; }
  html.mobile #histDetail .hd-six b { font-size: 14px; }
  html.mobile #histDetail .modal-actions { align-self: end; }
  html.mobile #histDetail .modal-actions .btn { min-height: 36px; }
  @media (max-height: 380px) {
    /* Fecha y lugar en una sola línea (lo que no cabe se corta) */
    html.mobile #histDetail .hd-meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  }
  /* En horizontal hay anchura: potencia + barra deslizante en una línea, sin los botones */
  html.mobile #simPanel:not([hidden]) { display: block; }
  html.mobile #simPanel > .field { display: flex; align-items: center; padding: 0; font-size: 13px; }
  html.mobile #simPanel > .field b { margin: 0 4px; font-size: 13px; }
  html.mobile #simPanel > .field b::after { content: none; }
  html.mobile #simPanel > .field input[type=range] { display: block; flex: 1; min-width: 0; margin: 0 0 0 10px; }
  html.mobile #simPanel .sim-steps { display: none; }
  html.mobile[data-tab="map"] .map-card { left: var(--m-rail); right: var(--m-side); bottom: 0; }
  html.mobile .toast { bottom: 12px; }
  html.mobile[data-tab="train"]:not([data-trview="route"]):not(.ride-active),
  html.mobile.rd-open[data-tab="train"]:not(.ride-active),
  html.mobile[data-tab="settings"]:not(.ride-active),
  html.mobile[data-tab="history"]:not(.ride-active) {
    --m-bottom: env(safe-area-inset-bottom);
    --m-side: calc(10px + env(safe-area-inset-right));
  }
}

/* =====================================================================
   Velódromo
   ===================================================================== */
/* Apartado Entrenar → Velódromo */
.velo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.velo-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px;
}
.velo-card:hover { border-color: var(--muted); }
.velo-card.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(255,106,26,.08); }
.velo-svg { width: 100%; height: 120px; display: block; }
.vc-body { display: flex; flex-direction: column; gap: 3px; }
.vc-body b { font-size: 15px; }
.vc-city, .vc-facts { color: var(--muted); font-size: 12px; }
.vc-facts { color: var(--text); }
.vc-story { color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Recuadro de la vuelta (sustituye a la pendiente) */
.tile.velo { border-color: #3d7fc4; background: rgba(61,127,196,.1); }
.v-lapno { color: var(--text); font-size: 13px; letter-spacing: 0; }
.tile.velo .value { font-variant-numeric: tabular-nums; }
.flash { animation: flash 1s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Perfiles → vueltas */
html.velo-on .zoom-head, html.velo-on .zoom-wrap, html.velo-on .cv-full,
html.velo-on .profiles > .profile-head { display: none !important; }
.velo-laps[hidden] { display: none !important; }
.velo-laps .profile-head { align-items: center; }
.velo-laps .profile-head b { color: var(--text); }
.cv-laps { display: block; width: 100%; height: 170px; }

/* Sesión sin ruta: panel de la sesión en lugar del mapa (wopanel.js) */
html.wo-virtual #map, html.wo-virtual .map-hud, html.wo-virtual .map-card > .hint,
html.wo-virtual #btnMapExpand { display: none !important; }
.wo-panel {
  display: flex; flex-direction: column; gap: 10px; height: 340px; padding: 10px;
  border-radius: 8px; background: #10141b; overflow-y: auto; margin-bottom: 6px;
}
.wo-panel[hidden] { display: none; }
.wp-now {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px;
  border: 2px solid var(--line); background: var(--card2); flex: none;
}
.wp-ring { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }
.wp-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.wp-ring circle { fill: none; stroke-width: 4; }
.wp-ring-bg { stroke: var(--line); }
.wp-ring-arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .25s linear; }
.wp-ring b { position: relative; font-size: 15px; font-variant-numeric: tabular-nums; }
.wp-cur { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wp-name { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-target { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wp-target small { font-size: 14px; color: var(--muted); font-weight: 400; }
.wp-info { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-pow { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.wp-pow b { font-size: 24px; font-variant-numeric: tabular-nums; }
.wp-pow small { font-size: 11px; color: var(--muted); }
.wp-chart { flex: 1 1 120px; min-height: 110px; }
.wp-chart canvas { width: 100%; height: 100%; display: block; }
.wp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.wp-block { min-width: 0; flex: none; }
.wp-block h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wp-block .hint { margin: 0; font-size: 12px; }
.wp-row { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 0; }
.wp-row .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.wp-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-dur, .wp-w { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); }
.wp-w { color: var(--text); min-width: 52px; text-align: right; }
.wp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wp-chip { font-size: 12px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wp-chip.ok { border-color: var(--ok); color: var(--ok); }
.wp-chip.near { border-color: var(--warn); color: var(--warn); }
.wp-chip.bad { border-color: var(--bad); color: var(--bad); }
.wp-chip.live { border-style: dashed; }
.wp-chip small { opacity: .7; font-size: 10px; }
.wp-zbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.wp-zbar span { min-width: 2px; }
.wp-zleg { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wp-zleg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
html.mobile[data-tab="map"] .wo-panel { height: 100%; margin: 0; border-radius: 0; }

/* Mapa → dibujo de la pista con sus datos */
.velo-view {
  position: relative; display: flex; flex-direction: column; height: 340px; margin-bottom: 6px;
  border-radius: 8px; overflow: hidden; background: #10141b;
}
.velo-view[hidden] { display: none; }
html.velo-on:not(.velo-sat) #map { display: none; }
html.velo-on.velo-sat .velo-view { display: none; }
html.velo-on:not(.velo-sat) .map-card > .hint { display: none; }
.cv-velo { flex: 1 1 0; min-height: 0; width: 100%; display: block; }
.vh-top {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(15,18,22,.92);
  border-bottom: 1px solid var(--line); font-size: 12px; min-width: 0;
}
.vh-top b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-prog { margin-left: auto; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vh-btn { flex: none; font-size: 14px; }
.vh-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
}
.vh-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px;
  background: rgba(15,18,22,.95); min-width: 0;
}
.vh-cell b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vh-cell small { font-size: 10px; color: var(--muted); }
.vh-cell.best b { color: var(--accent); }
.velo-back {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 950;
  background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px;
  font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.velo-back[hidden] { display: none; }
.map-card.expanded .map-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.map-card.expanded .velo-view { flex: 1; height: auto; }
.map-card.expanded .vh-cell b { font-size: 26px; }
@media (min-width: 1600px) {
  html:not(.mobile) .velo-view { height: 420px; }
}

/* Móvil */
html.mobile .velo-grid { grid-template-columns: 1fr; }
html.mobile .velo-laps { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
html.mobile .velo-laps .profile-head { display: flex !important; }
html.mobile .cv-laps { height: 100%; }
html.mobile.velo-on .map-hud { display: none !important; }
html.mobile[data-tab="map"] .velo-view { height: 100%; margin: 0; border-radius: 0; }
html.mobile[data-tab="map"] .vh-top { font-size: 13px; padding: 8px 10px; }
html.mobile[data-tab="map"] .vh-cell { padding: 6px 2px; }
html.mobile[data-tab="map"] .vh-cell b { font-size: 21px; }
html.mobile[data-tab="map"] .vh-cell:nth-child(-n+3) b { font-size: 26px; }

/* Compartir con el móvil en horizontal: vista previa a la izquierda y opciones a la derecha */
@media (orientation: landscape) and (max-height: 520px) {
  html.mobile .share-modal .modal-box {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 8px 16px; width: min(720px, 100%);
  }
  html.mobile .share-modal .modal-box > * { grid-column: 2; }
  html.mobile .share-modal .modal-box > .share-img { grid-column: 1; grid-row: 1 / span 5; height: calc(92dvh - 36px); align-self: center; }
}

/* =====================================================================
   Rodar sin desplazar en pantallas bajas (con las dos zonas a la vista)
   ===================================================================== */
/* Sesión en el circuito llano virtual: su perfil completo es una línea plana y no aporta nada */
html.mobile.workout-on.virtual-route .cv-full,
html.mobile.workout-on.virtual-route .profiles > .profile-head { display: none; }

/* Móviles muy bajos, o con las barras del navegador a la vista */
@media (orientation: portrait) and (max-height: 660px) {
  html.mobile { --m-nav: 50px; --m-ctrl: 52px; }
  html.mobile .layout { gap: 5px; padding-top: 5px; }
  html.mobile .metrics { gap: 5px; }
  html.mobile .tile { padding: 4px 8px; }
  html.mobile .tile .label { font-size: 9px; }
  html.mobile .tile .value { font-size: 17px; }
  html.mobile .tile.grade .value, html.mobile .tile.big .value { font-size: 30px; }
  html.mobile .tile.grade .value small { font-size: 13px; }
  html.mobile .tile.zones { gap: 6px; padding: 6px 8px 8px; }
  html.mobile .zone-bar { height: 15px; }
  html.mobile .zone-name { font-size: 13px; }
  html.mobile .zone-bpm b { font-size: 16px; }
  html.mobile .profiles { padding: 6px; }
  html.mobile .cv-wrap { min-height: 56px; margin-bottom: 4px; }
  html.mobile .cv-wrap.wo { min-height: 60px; }
  html.mobile .cv-full { height: 46px; }
  html.mobile .controls { padding-block: 5px; }
  html.mobile .controls .btn { min-height: 38px; }
  html.mobile .tabbar svg { width: 20px; height: 20px; }
  html.mobile .wc-head { margin-bottom: 2px; }
  html.mobile .wc-controls .btn.small { padding: 4px 7px; font-size: 12px; }
}

/* Móvil en horizontal con poca altura */
@media (orientation: landscape) and (max-height: 420px) {
  html.mobile[data-tab="ride"] .layout { padding-top: 5px; padding-bottom: 5px; gap: 6px; }
  html.mobile .metrics { gap: 5px; }
  html.mobile .tile { padding: 4px 8px; }
  html.mobile .tile .label { font-size: 9px; }
  html.mobile .tile .value { font-size: 17px; }
  html.mobile .tile.grade .value, html.mobile .tile.big .value { font-size: 30px; }
  html.mobile .tile.grade .value small { font-size: 13px; }
  html.mobile .tile .sub { font-size: 10px; }
  html.mobile .tile.zones { gap: 5px; padding: 5px 8px 7px; }
  html.mobile .zone-bar { height: 15px; }
  html.mobile .zone-name { font-size: 13px; }
  html.mobile .profiles { padding: 6px; }
  html.mobile .cv-wrap { min-height: 60px; margin-bottom: 4px; }
  html.mobile .cv-full { height: 52px; }
}


/* =====================================================================
   PC: la pantalla principal entera sin desplazar
   A la izquierda ruta, datos, zonas, perfiles y botones; a la derecha el mapa a toda
   altura. Los tamaños se ajustan al alto de la ventana. Mis rutas y Subidas están en
   Entrenar → Ruta y los ajustes en su propia ventana («Ajustes»).
   ===================================================================== */
@media (min-width: 981px) {
  html:not(.mobile) .layout {
    height: calc(100dvh - var(--m-top)); min-height: 440px; box-sizing: border-box;
    padding: clamp(8px, 1.2vh, 14px) 16px clamp(8px, 1.4vh, 16px); gap: clamp(8px, 1.2vh, 12px);
    grid-template-columns: minmax(0, 1fr) clamp(320px, 34vw, 680px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "route side" "metrics side" "profiles side" "controls side";
    align-items: stretch;
  }
  html:not(.mobile) .side { min-height: 0; }
  html:not(.mobile) .map-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  html:not(.mobile) .map-card .map-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  html:not(.mobile) .map, html:not(.mobile) .velo-view, html:not(.mobile) .wo-panel { flex: 1; height: auto; min-height: 0; margin-bottom: 0; }
  html:not(.mobile) .map-card > .hint { margin-top: 6px; }
  html:not(.mobile) .cv-map { flex: 1; height: auto; min-height: 0; }

  /* Ruta: una línea */
  html:not(.mobile) .routebar { padding: 8px 14px; gap: 8px 12px; }
  html:not(.mobile) .route-name { font-size: 16px; }
  html:not(.mobile) .route-stats { font-size: 12px; }
  html:not(.mobile) .route-actions .btn { padding: 7px 12px; }

  /* Datos: el tamaño de las cifras sigue al alto de la ventana */
  html:not(.mobile) .metrics { gap: clamp(6px, 1vh, 10px); }
  html:not(.mobile) .tile { padding: clamp(5px, 0.9vh, 10px) 14px; }
  html:not(.mobile) .tile .value { font-size: clamp(22px, 3.6vh, 42px); }
  html:not(.mobile) .tile.grade .value, html:not(.mobile) .tile.big .value { font-size: clamp(38px, 7vh, 84px); line-height: 1.05; }
  html:not(.mobile) .tile.grade .value small { font-size: clamp(16px, 2.4vh, 26px); }
  html:not(.mobile) .tile.zones { gap: 8px 22px; padding-block: clamp(6px, 1vh, 10px); }
  html:not(.mobile) .zone-head { margin-bottom: 4px; }
  html:not(.mobile) .zone-name { font-size: clamp(14px, 2vh, 20px); }
  html:not(.mobile) .zone-bar { height: clamp(16px, 2.8vh, 30px); margin-bottom: 4px; }

  /* Perfiles: el de los próximos 2 km (o la gráfica de la sesión, o las vueltas) llena el hueco */
  html:not(.mobile) .profiles { display: flex; flex-direction: column; min-height: 0; padding: 10px 14px; }
  html:not(.mobile) .profiles .cv-wrap { position: relative; flex: 1 1 0; min-height: 70px; margin-bottom: 8px; }
  html:not(.mobile) .profiles .cv-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
  html:not(.mobile) .cv-full { flex: none; height: clamp(64px, 12vh, 150px); }
  html:not(.mobile) .workout-block { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; margin-bottom: 8px; padding-bottom: 8px; }
  html:not(.mobile) .workout-block[hidden] { display: none; }
  html:not(.mobile).workout-on .zoom-head, html:not(.mobile).workout-on .zoom-wrap { display: none; }
  html:not(.mobile).workout-on.virtual-route .cv-full,
  html:not(.mobile).workout-on.virtual-route .profiles > .profile-head { display: none; }
  html:not(.mobile) .velo-laps { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

  /* Botones */
  html:not(.mobile) .controls { padding: 10px 14px; gap: 6px 10px; }
  html:not(.mobile) .controls .btn { padding: clamp(8px, 1.2vh, 12px); }
}

/* Ajustes en PC: ventana superpuesta, como Entrenar e Historial */
html:not(.mobile):not(.set-open) .settings-panel { display: none; }
html:not(.mobile).set-open .settings-panel {
  position: fixed; inset: 24px; z-index: 28; max-width: 1100px; margin: 0 auto; overflow-y: auto; /* como Entrenar */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .65);
}
html:not(.mobile) .set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
html:not(.mobile) .set-grid > .card { background: var(--card2); }
/* En el móvil la sección no se ve: sus tarjetas van sueltas en la pestaña Ajustes */
html.mobile .settings-panel, html.mobile .set-grid { display: contents; }

/* Entrenar → Ruta en PC: Mis rutas y Subidas lado a lado */
html:not(.mobile) .tr-route:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
html:not(.mobile) .tr-route > .card { background: var(--card2); }
html:not(.mobile) .tr-route .climb-list { max-height: none; }

/* PC con poca altura (portátiles de 720–900 px): se quitan los títulos de los perfiles y la
   línea de atajos, y los datos se compactan para que los perfiles tengan sitio. */
@media (min-width: 981px) and (max-height: 900px) {
  html:not(.mobile) .kbd-hint { display: none; }
  html:not(.mobile) .profiles > .profile-head { display: none; }
  html:not(.mobile) .cv-full { height: clamp(56px, 11vh, 120px); }
  html:not(.mobile) .profiles { padding: 8px 12px; }
}
@media (min-width: 981px) and (max-height: 800px) {
  html:not(.mobile) .routebar { padding: 6px 12px; }
  html:not(.mobile) .tile { padding: 4px 12px; }
  html:not(.mobile) .tile .label { font-size: 10px; }
  html:not(.mobile) .tile .value { font-size: clamp(20px, 3.1vh, 30px); }
  html:not(.mobile) .tile.grade .value, html:not(.mobile) .tile.big .value { font-size: clamp(34px, 6.2vh, 56px); }
  html:not(.mobile) .tile.grade .value small { font-size: clamp(14px, 2vh, 20px); }
  html:not(.mobile) .tile .sub { font-size: 11px; }
  html:not(.mobile) .tile.zones { padding-block: 5px; gap: 4px 22px; }
  html:not(.mobile) .zone-head { margin-bottom: 2px; }
  html:not(.mobile) .zone-name { font-size: 15px; }
  html:not(.mobile) .zone-bar { height: clamp(14px, 2.3vh, 20px); }
  html:not(.mobile) .controls { padding: 6px 12px; }
  html:not(.mobile) .controls .btn { padding: 7px; }
}

/* PC con muy poca altura visible (portátil de 768 px con la barra de tareas y las del navegador,
   o pantallas con Windows al 125–150 %): todavía más compacto para que no haga falta desplazar. */
@media (min-width: 981px) and (max-height: 680px) {
  html:not(.mobile) .topbar { padding-block: 5px; }
  html:not(.mobile) .dev { padding-block: 5px; }
  html:not(.mobile) .layout { padding-block: 6px 8px; gap: 6px; }
  html:not(.mobile) .routebar { padding: 4px 12px; }
  html:not(.mobile) .route-info { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
  html:not(.mobile) .route-name { font-size: 15px; }
  html:not(.mobile) .route-actions .btn { padding: 5px 10px; }
  html:not(.mobile) .metrics { gap: 5px; }
  html:not(.mobile) .tile { padding: 3px 10px; }
  html:not(.mobile) .tile .label { font-size: 9px; }
  html:not(.mobile) .tile .value { font-size: clamp(17px, 3vh, 24px); }
  html:not(.mobile) .tile.grade .value, html:not(.mobile) .tile.big .value { font-size: clamp(28px, 5.6vh, 40px); }
  html:not(.mobile) .tile.grade .value small { font-size: 13px; }
  html:not(.mobile) .tile .sub { font-size: 10px; }
  html:not(.mobile) .tile.zones { padding-block: 4px; }
  html:not(.mobile) .zone-name { font-size: 13px; }
  html:not(.mobile) .zone-pct, html:not(.mobile) .zone-head .label { font-size: 10px; }
  html:not(.mobile) .zone-bar { height: 13px; }
  html:not(.mobile) .zone-seg { font-size: 9px; }
  html:not(.mobile) .profiles { padding: 6px 10px; }
  html:not(.mobile) .profiles .cv-wrap { min-height: 56px; margin-bottom: 5px; }
  html:not(.mobile) .cv-full { height: clamp(44px, 9vh, 60px); }
  html:not(.mobile) .controls { padding: 5px 10px; }
  html:not(.mobile) .controls .btn { padding: 5px; font-size: 14px; }
  html:not(.mobile) .map-card { padding: 8px; }
  html:not(.mobile) .map-card .card-title { margin-bottom: 6px; }
  html:not(.mobile) .map-card > .hint { display: none; }
}
@media (min-width: 981px) and (max-height: 560px) {
  html:not(.mobile) .profiles .cv-wrap { min-height: 44px; }
  html:not(.mobile) .cv-full { height: 40px; }
  html:not(.mobile) .route-stats, html:not(.mobile) .elev-note { display: none; }
}