/* movil.css · Analizador de Entrenamientos (Ver 0.41; 0.43: pantalla completa del mapa, estadísticas y taller; 0.44–0.44.2: ficha y comparador; 0.45–0.45.2: mapa de rutas, segmentos y pantalla completa)
 * Vista móvil. Todo cuelga de body.movil, que movil.js pone solo con pantallas de 760 px o menos
 * (y si no se ha elegido «Ver como en el ordenador»). En el PC no cambia nada.
 */

/* Elementos propios de la vista móvil: ocultos fuera de ella. */
.movil-nav, .movil-more, .movil-back, .movil-filters-btn, .movil-cursor, .movil-routes-fs-btn { display: none; }

/* ===== Estructura general ===== */
body.movil {
  padding: 8px 8px calc(74px + env(safe-area-inset-bottom)) 8px;
  -webkit-text-size-adjust: 100%;
}
body.movil.single-activity-mode { padding-bottom: calc(16px + env(safe-area-inset-bottom)); padding-top: 52px; }
body.movil .hud-tabs { display: none; }
/* Nada ensancha la página: las tablas anchas (estadísticas, vueltas, segmentos…) se desplazan dentro de su caja. */
html:has(body.movil), body.movil { overflow-x: hidden; max-width: 100%; }
body.movil :is(.history-section, .totals-section, .metrics-section, .chart-card, .maint-page) { max-width: 100%; min-width: 0; }
body.movil :is(.totals-table-scroll, .totals-bike-scroll, .lap-table-scroll, .history-table-wrap) { overflow-x: auto; max-width: 100%; }
body.movil .totals-section > :not(.totals-table-scroll):not(.totals-bike-scroll) table,
body.movil .history-section table:not(.history-table) { display: block; overflow-x: auto; max-width: 100%; }
body.movil .drop-zone { display: none; }
body.movil .history-intro, body.movil .history-note { display: none; }
body.movil #drivePanel .history-intro, body.movil #drivePanel .history-note { display: block; }
body.movil .section-title { font-size: .86rem; letter-spacing: .12em; margin-bottom: 12px; }

/* Cabecera compacta: título pequeño, sin subtítulo ni chip decorativo. */
body.movil .header { padding: 10px 12px; margin-bottom: 10px; gap: 8px; border-radius: 14px; }
body.movil .header h1 { font-size: 1rem; letter-spacing: .04em; }
body.movil .header .subtitle, body.movil .header .hud-chip { display: none; }
body.movil .header-tools { gap: 8px; width: auto; }
body.movil .header-right { width: auto; flex-direction: row; align-items: center; gap: 8px; } /* 0.43: versión a la derecha del tema */
body.movil .theme-control { font-size: 0; gap: 0; }
body.movil .theme-control select { min-width: 0; padding: 6px 8px; font-size: .72rem; }
body.movil .app-version { display: block; font-size: .58rem; letter-spacing: .04em; white-space: nowrap; } /* versión visible también en el móvil (0.42) */
body.movil .drive-chip { padding: 6px 9px; font-size: .64rem; letter-spacing: .04em; }

body.movil .history-section, body.movil .totals-section { padding: 12px; border-radius: 14px; margin-bottom: 12px; }
body.movil .history-actions .btn-ghost { width: auto; }
body.movil .icu-sync { padding: 12px; }

/* ===== Barra inferior ===== */
body.movil:not(.single-activity-mode) .movil-nav {
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3500;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  background: var(--panel-solid, #111527); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}
.movil-nav button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 54px; border: 0; border-radius: 10px; background: transparent; color: var(--txt-dim);
  font: 600 .64rem var(--ui); letter-spacing: .02em; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.movil-nav .movil-nav-icon { font-size: 1.25rem; line-height: 1; }
.movil-nav button.active { color: var(--cyan); background: rgba(34, 211, 238, .10); }
.movil-badge {
  position: absolute; top: 4px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #e5484d; color: #fff; font: 700 .6rem/17px var(--mono); text-align: center;
}
.movil-badge.hidden { display: none; }

/* Hoja «Más» */
body.movil .movil-more { display: block; position: fixed; inset: 0; z-index: 3400; background: rgba(3, 6, 17, .55); }
body.movil .movil-more.hidden { display: none; }
.movil-more-panel {
  position: absolute; left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom));
  display: grid; gap: 6px; padding: 10px; border-radius: 16px;
  background: var(--panel-solid, #111527); border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.movil-more-panel button {
  text-align: left; padding: 14px 14px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface-hover, rgba(255, 255, 255, .03)); color: var(--txt); font: 600 .9rem var(--ui); cursor: pointer;
}
.movil-more-panel button.hidden { display: none; }
.movil-more-panel #movilInstallBtn { border-color: rgba(34, 211, 238, .5); color: var(--cyan); }
.movil-more-version { margin: 2px 4px 0; color: var(--txt-faint); font: 600 .68rem var(--mono); }

/* «Ver como en el ordenador»: pulsar la versión de la cabecera para volver a la vista móvil. */
body.movil-escritorio .app-version { cursor: pointer; text-decoration: underline dotted; }

/* ===== Biblioteca en tarjetas ===== */
body.movil .history-counters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px; }
body.movil .history-counter { padding: 8px 6px; border-radius: 10px; text-align: center; }
body.movil .history-counter strong { font-size: .95rem; }
body.movil .history-counter span { font-size: .55rem; letter-spacing: .02em; }

body.movil .history-filters { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
body.movil .history-filters > * { grid-column: span 1 !important; }
body.movil .history-filter { min-width: 0; }
body.movil .history-filter label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.movil .history-filters > .history-filter--search { grid-column: 1 / -1 !important; }
body.movil .movil-filters-btn { display: block; padding: 10px; font-size: .74rem; }
body.movil .history-filters > #historyCompareBtn { grid-column: span 1 !important; min-height: 0; padding: 10px; font-size: .74rem; }
body.movil .history-filters:not(.movil-open) > .history-filter:not(.history-filter--search) { display: none; }
body.movil .history-filter input, body.movil .history-filter select { font-size: 16px; padding: 9px; } /* 16 px: sin zoom automático en iOS */

/* Solo la biblioteca (tarjetas) pierde el desplazamiento; el resto de tablas (km por bici y año, segmentos,
   configuración…) se desplazan dentro de su caja (0.44.2). */
body.movil .history-table-wrap { overflow-x: auto; max-width: 100%; }
body.movil .history-table-wrap:has(> .history-table) { border: 0; overflow: visible; }
body.movil .history-table { min-width: 0; table-layout: auto; display: block; }
body.movil .history-table colgroup, body.movil .history-table thead { display: none; }
body.movil .history-table tbody { display: grid; gap: 8px; }
body.movil .history-table tr {
  display: grid; grid-template-columns: 26px repeat(3, minmax(0, 1fr));
  grid-template-areas: "chk name name name" "chk date date type" ". dist time gain" ". speed power hr" ". com com com";
  gap: 2px 8px; padding: 10px 10px 8px 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-hover, rgba(255, 255, 255, .025));
}
body.movil .history-table tr:hover td { background: transparent; }
body.movil .history-table td { border: 0; padding: 1px 0; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.movil .history-table td[colspan] { grid-column: 1 / -1; white-space: normal; }
body.movil .history-table td:nth-child(1) { grid-area: chk; align-self: center; }
body.movil .history-table td:nth-child(1) input { width: 18px; height: 18px; }
body.movil .history-table td:nth-child(2) { grid-area: date; font-size: .72rem; }
body.movil .history-table td:nth-child(3) { grid-area: name; font-size: .92rem; white-space: normal; }
body.movil .history-table td:nth-child(3) .history-activity-link { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.movil .history-table td:nth-child(4) { grid-area: type; text-align: right; }
body.movil .history-table td:nth-child(5) { grid-area: dist; }
body.movil .history-table td:nth-child(6) { grid-area: time; }
body.movil .history-table td:nth-child(7) { grid-area: speed; }
body.movil .history-table td:nth-child(8) { grid-area: gain; }
body.movil .history-table td:nth-child(9) { grid-area: power; }
body.movil .history-table td:nth-child(10) { grid-area: hr; }
body.movil .history-table td:nth-child(11), body.movil .history-table td:nth-child(13) { display: none; }
body.movil .history-table td:nth-child(12) { grid-area: com; font-size: .72rem; }
body.movil .history-table td.num { text-align: left; font-size: .8rem; color: var(--txt); }
/* Etiquetas pequeñas delante de los valores que no llevan unidad. */
body.movil .history-table td:nth-child(6):not([colspan])::before { content: '⏱ '; color: var(--txt-faint); }
body.movil .history-table td:nth-child(8):not([colspan])::before { content: '↗ '; color: var(--txt-faint); }
body.movil .history-table td:nth-child(10):not([colspan])::before { content: '♥ '; color: var(--txt-faint); }
body.movil .history-table td.history-comment .history-comment-edit { opacity: .6; }
body.movil .history-pager { justify-content: center; }
body.movil .history-pager .btn-ghost { padding: 10px 16px; }

/* ===== Ficha individual ===== */
body.movil .movil-back {
  display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 3500;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px; text-align: left;
  border: 0; border-bottom: 1px solid var(--line-strong); background: var(--panel-solid, #111527);
  color: var(--cyan); font: 700 .86rem var(--ui); cursor: pointer;
}
body.movil.single-activity-mode .header { display: none; }
body.movil .single-activity-info { padding: 12px; margin: 0 0 12px; }
body.movil .single-activity-info h2 { font-size: 1rem; margin-bottom: 6px; }
body.movil .single-activity-title-row { flex-direction: column; gap: 4px; }
body.movil .single-activity-title-row h2 { max-width: 100%; }
body.movil .single-activity-actions { gap: 6px; }
body.movil .single-activity-actions .single-edit-action { margin-top: 6px; padding: 9px 10px; font-size: .74rem; }
body.movil #singleEditActivityBtn { font-size: 0; }
body.movil #singleEditActivityBtn::after { content: '✎ Editar'; font-size: .74rem; }
body.movil .controls { padding: 10px; gap: 10px; }
body.movil .metrics-section, body.movil .map-container, body.movil .profile-section, body.movil .brush-section, body.movil .chart-card { padding: 10px; margin-bottom: 12px; border-radius: 14px; }
body.movil #map, body.movil #map3d { height: 300px; }
body.movil .map-fullscreen-btn { top: 18px; right: 18px; width: 38px; height: 38px; }
body.movil .map3d-btn { right: 62px; }
body.movil .map-weather { top: 18px; right: 106px; height: 38px; font-size: .8rem; padding: 0 8px; }
body.movil .map-opacity { display: none; }
body.movil .chart-wrapper { height: 240px; }
body.movil .zone-wrapper, body.movil .zone-wrapper.tall { height: 250px; }
body.movil .profile-wrapper { height: 230px; }
body.movil .playback-bar { gap: 8px; padding: 8px; }
body.movil #playbackSlider { min-width: 0; flex-basis: 100%; }
body.movil .chart-card-header h3, body.movil .profile-head h3 { font-size: .8rem; letter-spacing: .08em; }
body.movil .hero-value { font-size: 2.2rem; }
body.movil .metric-card { padding: 12px; }
body.movil #brushCanvas { height: 70px; }

/* ===== Correcciones generales (también en el PC) ===== */
/* «Actividades» en la tabla de km por bicicleta: la columna de 92 px (estilos.css) cortaba el título (0.44.2). */
.totals-bike-table th:nth-child(2) { width: 136px; }
/* Botón de salir de la pantalla completa del mapa: graficos.js le quita el texto al entrar; se le pone un icono. */
.map-container.map-fullscreen #mapFullscreenBtn:empty::before { content: '✕'; font-size: 1.05rem; }

/* ===== Pantalla completa (mapa o gráfica) en el móvil, también en horizontal (0.43) ===== */
/* Fuera la barra inferior y la de «← Biblioteca»: vuelven al salir de la pantalla completa. */
body.movil:has(.map-container.map-fullscreen, .chart-fullscreen, .movil-routes-fs) :is(.movil-nav, .movil-back, .movil-more) { display: none !important; }
/* Barra de reproducción en una sola fila y compacta. */
body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback {
  left: 8px; right: 8px; bottom: calc(6px + env(safe-area-inset-bottom)); padding: 5px 8px; gap: 6px; flex-wrap: nowrap;
}
body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback .playback-time { min-width: 0; font-size: .82rem; }
body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback .pb-btn { width: 32px; height: 32px; font-size: .85rem; flex: 0 0 auto; }
body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback .pb-btn.play { width: 38px; }
body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback #playbackSlider { flex: 1 1 auto; flex-basis: auto; min-width: 50px; }
body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback .pb-speed-label { display: none; }
body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback select { flex: 0 0 auto; max-width: 92px; padding: 4px 6px; font-size: .7rem; }
/* Perfil a todo el ancho, justo encima de la barra, más alto y más opaco. */
body.movil .map-container.map-fs-has-playback .map-fs-profile:not([hidden]) {
  left: 8px !important; right: 8px; bottom: calc(52px + env(safe-area-inset-bottom)); height: clamp(72px, 28vh, 150px);
  background: rgba(10, 14, 26, .82);
}
body.movil .map-container.map-fs-has-playback .leaflet-bottom,
body.movil .map-container.map-fs-has-playback .maplibregl-ctrl-bottom-left,
body.movil .map-container.map-fs-has-playback .maplibregl-ctrl-bottom-right { bottom: calc(60px + clamp(72px, 28vh, 150px)); }
/* Leyenda, lecturas y botones: ver «Pantalla completa del mapa del analizador en el móvil» (0.45.1), al final. */
body.movil .map-container.map-fullscreen .map3d-hint { display: none; }

/* ===== Estadísticas (0.43) ===== */
body.movil .totals-section { padding: 12px; }
body.movil .totals-intro, body.movil .totals-note { font-size: .74rem; }
body.movil .totals-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
body.movil .totals-kpi { padding: 10px 12px; }
body.movil .totals-kpi-label { font-size: .6rem; letter-spacing: .06em; }
body.movil .totals-kpi-value { font-size: 1.15rem; margin-top: 4px; }
body.movil .totals-toolbar, body.movil .totals-subtitle { margin: 16px 0 8px; gap: 6px; }
body.movil .totals-toolbar h3, body.movil .totals-subtitle h3 { font-size: .8rem; letter-spacing: .08em; }
body.movil .totals-order-hint, body.movil .totals-subtitle span { font-size: .66rem; }
body.movil .totals-scroll-hint { display: block; font-size: .68rem; margin-bottom: 6px; }
body.movil .totals-scroll-hint::before { content: '⇆ '; }
/* Tablas: más compactas, con el año (o la bici) fijo a la izquierda al desplazar. */
body.movil .totals-table { font-size: .7rem; min-width: 1100px; }
body.movil .totals-count-table { min-width: 760px; }
body.movil .totals-table th, body.movil .totals-table td { padding: 8px 6px; }
body.movil .totals-table .totals-sort-btn { min-height: 34px; padding: 8px 6px; }
body.movil .totals-table th.totals-year-head, body.movil .totals-table td.totals-year-cell, body.movil .totals-table tfoot th { min-width: 54px; }
body.movil .totals-bike-table { font-size: .72rem; }
body.movil .totals-bike-table th:first-child { width: 140px; }
body.movil .totals-bike-table td:first-child { max-width: 140px; }
body.movil .totals-bike-table th, body.movil .totals-bike-table td { padding: 8px 6px; }
body.movil .stats-bike-edit { opacity: .7 !important; }

/* ===== Taller / mantenimiento (0.43) ===== */
body.movil .maint-page, body.movil #maintPage { padding: 12px; }
body.movil .maint-bike { border-radius: 12px; }
body.movil .maint-bike-name { font-size: .92rem; }
body.movil .maint-bike-meta { font-size: .72rem; }
body.movil .maint-section > summary { font-size: .78rem; }
/* Cada componente es una tarjeta: nombre y estado arriba, último cambio y km debajo, botones a todo el ancho. */
body.movil .maint-main-table, body.movil .maint-main-table tbody { display: block; width: 100%; min-width: 0 !important; table-layout: auto; }
body.movil #maintPage .history-table-wrap { overflow: visible; border: 0; }
body.movil .maint-main-table colgroup, body.movil .maint-main-table thead { display: none; }
body.movil .maint-main-table tr.maint-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "comp state" "last value" "act act";
  gap: 4px 10px; padding: 10px 8px; border-bottom: 1px solid var(--line);
}
body.movil .maint-main-table tr.maint-row td { display: block; border: 0; padding: 0; min-width: 0; }
body.movil .maint-main-table td.maint-comp { grid-area: comp; }
body.movil .maint-main-table td.maint-state { grid-area: state; text-align: right; max-width: 48vw; }
body.movil .maint-main-table td.maint-last { grid-area: last; font-size: .74rem; }
body.movil .maint-main-table td.maint-value { grid-area: value; align-self: start; }
body.movil .maint-main-table tr.maint-row td.maint-actions { grid-area: act; display: flex; gap: 8px; margin-top: 4px; }
body.movil .maint-main-table td.maint-actions .maint-btn { flex: 1; padding: 10px 6px; font-size: .74rem; }
body.movil .maint-main-table .maint-chip { white-space: normal; font-size: .66rem; }
body.movil .maint-main-table .maint-bar { margin-top: 4px; }
body.movil .maint-main-table tr.maint-hist-row { display: block; }
body.movil .maint-main-table tr.maint-hist-row td { display: block; padding: 0 0 10px; }
/* Historiales y umbrales: se desplazan dentro de su caja. */
body.movil :is(.maint-hist-table, .maint-history-table) { display: block; overflow-x: auto; font-size: .72rem; white-space: nowrap; }
body.movil .maint-page table:not(.maint-main-table) { display: block; overflow-x: auto; max-width: 100%; }
/* Formularios del taller (registrar, añadir bici, configuración): campos a 16 px y a todo el ancho. */
body.movil :is(.activity-editor-dialog, .maint-config, .maint-form-row) :is(input, select, textarea) { font-size: 16px; }
body.movil .maint-form-row { flex-direction: column; align-items: stretch; }

/* ===== Ficha individual y comparador (0.44) ===== */
/* Ajustes (eje X, FC máx., FTP, peso, unidades, zoom): rejilla de 2 columnas, compacta. */
body.movil .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 12px; align-items: end; }
body.movil .controls .control-group { flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
body.movil .controls .control-group label { font-size: .58rem; letter-spacing: .08em; }
body.movil .controls :is(select, input[type="number"]) { width: 100%; min-width: 0; padding: 6px 8px; font-size: 16px; border-radius: 8px; }
body.movil .controls .control-group:has(#resetZoomBtn) { grid-column: 1 / -1; }
body.movil .controls #resetZoomBtn { width: 100%; padding: 7px 10px; font-size: .66rem; }
body.movil .controls .files-control { grid-column: 1 / -1; }
/* El texto de ayuda del zoom habla de rueda y Shift: en el móvil se cambia por el de los gestos táctiles. */
body.movil .controls .zoom-hint { grid-column: 1 / -1; font-size: 0; letter-spacing: 0; }
body.movil .controls .zoom-hint::before { content: 'Toca o desliza en horizontal sobre una gráfica para mover la reproducción · Zoom con dos dedos'; font-size: .62rem; letter-spacing: .02em; line-height: 1.4; }

/* Ficha individual: distancia, tiempo y desnivel en una fila de 3, más pequeños. */
body.movil.single-activity-mode .metric-card { padding: 12px; }
body.movil.single-activity-mode .metric-hero.primary { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 12px; padding: 6px 0 12px; }
body.movil.single-activity-mode .metric-hero.primary > .hero-item { grid-row: 1; gap: 3px; }
body.movil.single-activity-mode .metric-hero.primary > .hero-item:nth-child(2) { grid-column: 1; }
body.movil.single-activity-mode .metric-hero.primary > .hero-item:nth-child(3) { grid-column: 2; }
body.movil.single-activity-mode .metric-hero.primary > .hero-item:nth-child(4) { grid-column: 3; }
body.movil.single-activity-mode .metric-hero.primary .hero-value { font-size: 1.32rem; letter-spacing: -.02em; }
body.movil.single-activity-mode .metric-hero.primary .hero-unit { font-size: .66rem; margin-left: 2px; }
body.movil.single-activity-mode .metric-hero.primary .hero-label { font-size: .5rem; letter-spacing: .06em; }
body.movil.single-activity-mode .metric-inline-table { grid-column: 1 / -1; grid-row: 2; padding-top: 0; border-top: 0; }
body.movil.single-activity-mode .metric-hero.primary > .metric-side-panel { grid-column: 1 / -1; grid-row: 3; }
/* Potencia normalizada, trabajo, TSS e IF: 2 columnas, cifras más pequeñas. */
body.movil.single-activity-mode .metric-hero.secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding-top: 12px; }
body.movil.single-activity-mode .metric-hero.secondary .hero-value { font-size: 1.32rem; }
body.movil.single-activity-mode .metric-hero.secondary .hero-unit { font-size: .66rem; margin-left: 2px; }
body.movil.single-activity-mode .metric-hero.secondary .hero-label { font-size: .5rem; letter-spacing: .06em; }

/* Comparador con 2 o más actividades: las fichas, de 2 en 2 por fila. */
body.movil:not(.single-activity-mode) .metrics-section { padding: 10px; }
body.movil:not(.single-activity-mode) .metrics-grid:has(> .metric-card + .metric-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.movil:not(.single-activity-mode) .metrics-grid:has(> .metric-card + .metric-card) > .metric-card { padding: 10px 8px; border-radius: 12px; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-card-header { gap: 6px; margin-bottom: 8px; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-card-header h4 { font-size: .7rem; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-date { font-size: .56rem; letter-spacing: .04em; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-comment { display: none; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-hero.primary { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 8px 0; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-hero.primary > .hero-item { grid-column: 1; gap: 2px; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-hero.primary > .hero-item:nth-child(2) { grid-row: 1; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-hero.primary > .hero-item:nth-child(3) { grid-row: 2; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-hero.primary > .hero-item:nth-child(4) { grid-row: 3; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-hero.primary > .metric-side-panel { grid-column: 1; grid-row: 4; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .hero-value { font-size: 1.2rem !important; letter-spacing: -.02em; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .hero-unit { font-size: .62rem !important; margin-left: 2px !important; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .hero-label { font-size: .5rem; letter-spacing: .05em; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-hero.secondary { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 8px; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-table { margin-top: 6px; table-layout: fixed; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-table :is(th, td) { padding: 5px 2px; font-size: .6rem; overflow-wrap: anywhere; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-table thead th { font-size: .5rem; letter-spacing: .04em; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-table :is(th.col, td.val) { width: 31%; }
/* Lista de archivos cargados del comparador: una columna. */
body.movil .file-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* Etiqueta de la reproducción en el perfil: más pequeña. */
body.movil .profile-replay-readout { min-width: 0; padding: 4px 7px; font-size: .6rem; line-height: 1.35; border-radius: 8px; }
body.movil .profile-replay-row { gap: 8px; }
body.movil .profile-replay-row + .profile-replay-row { margin-top: 0; }
/* Cursor de la reproducción en las gráficas inferiores (dibujado por movil.js). */
body.movil .movil-cursor { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* Deslizar en vertical sigue desplazando la página; en horizontal mueve la reproducción. */
body.movil :is(.chart-wrapper, .profile-wrapper) > canvas:not(.movil-cursor):not(#profileOverlay) { touch-action: pan-y !important; }
/* Panel de modalidad, bici y terreno dentro de las fichas estrechas del comparador. */
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-side-panel { padding: 8px 6px; gap: 8px; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-activity-type svg { width: 64px; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-activity-type-label { font-size: .74rem; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-side-kpi-value { font-size: .8rem; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-side-kpi-label { font-size: .5rem; }
/* 0.44.1: nombre de la actividad siempre en 3 líneas (se corta si ocupa más): las fichas quedan alineadas. */
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-title-edit-row { align-items: flex-start; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-title-edit-row h4 {
  flex: 1 1 auto; max-width: none; line-height: 1.35; height: calc(1.35em * 3);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-card-header { align-items: flex-start; }
body.movil .metrics-grid:has(> .metric-card + .metric-card) .metric-card-header .color-dot { margin-top: 3px; }
/* Mensajes flotantes (p. ej. originales que no se han podido cargar): por encima de la barra inferior. */
body.movil .seg-toast { bottom: calc(80px + env(safe-area-inset-bottom)); left: 8px; right: 8px; transform: none; max-width: none; font-size: .8rem; }

/* ===== 0.45 ===== */
/* Tabla de segmentos de la ficha (PC y móvil): la clasificación va justo después del segmento (0.45.1), con medalla para los 3 mejores. */
.segment-activity-table td.seg-rank-cell { min-width: 0; white-space: nowrap; }
.segment-activity-table td.seg-rank-cell .seg-best-diff { display: block; margin: 2px 0 0; }
.segment-activity-table :is(td, th):first-child { text-align: left; white-space: normal; min-width: 170px; }
.segment-activity-table :is(td, th):nth-child(2) { text-align: left; }
.segment-activity-table .seg-medal { font-size: 1.05rem; line-height: 1; vertical-align: -2px; }
.segment-activity-table .seg-rank { font-weight: 700; }
body.movil .segment-activity-table { min-width: 720px; font-size: .68rem; }
body.movil .segment-activity-table :is(td, th):first-child { min-width: 130px; }

/* Mapa de rutas: filtros plegables (movil.js), barra compacta y mapa a pantalla completa. */
body.movil .routes-filters { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
body.movil .routes-filters > * { grid-column: span 1 !important; }
body.movil .routes-filters > .routes-f-search, body.movil .routes-filters > .routes-f-range { grid-column: 1 / -1 !important; }
body.movil .routes-filters:not(.movil-open) > .history-filter:not(.routes-f-search) { display: none; }
body.movil .routes-filters .movil-filters-btn { grid-column: 1 / -1 !important; }
body.movil .routes-filters :is(input, select) { font-size: 16px; padding: 8px; }
body.movil .routes-toolbar { gap: 6px 10px; margin: 2px 0 8px; font-size: .7rem; }
body.movil .routes-toolbar select { padding: 5px 6px; font-size: .74rem; }
body.movil .routes-toolbar input[type=range] { width: 84px; }
body.movil .routes-toolbar .btn-ghost { padding: 6px 9px; font-size: .64rem; }
body.movil #routesIndexStatus { display: block; font-size: .7rem; }
body.movil #routesIndexStatus:empty { display: none; }
body.movil #routesSummary { font-size: .74rem; margin-bottom: 6px; }
body.movil .routes-map { height: 60vh; min-height: 300px; border-radius: 12px; }
body.movil .routes-legend { min-width: 0; padding: 5px 7px; font-size: .6rem; }
body.movil .routes-legend-title { font-size: .54rem; }
body.movil .routes-legend-row b { font-size: .6rem; }
body.movil .routes-legend-row i { width: 12px; }
body.movil .movil-routes-fs-btn {
  display: block; position: absolute; left: 10px; bottom: 24px; z-index: 1100; width: 38px; height: 38px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-inset, rgba(14, 18, 32, .92));
  color: var(--txt); font-size: 1.05rem; cursor: pointer;
}
/* 0.45.1: el panel de la página (backdrop-filter) hacía de caja de «position: fixed» y el mapa no ocupaba la pantalla. */
body.movil :has(.movil-routes-fs) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; filter: none !important; }
body.movil .routes-map-wrap.movil-routes-fs { width: 100vw; height: 100vh; height: 100dvh; }
body.movil .routes-map-wrap.movil-routes-fs { position: fixed; inset: 0; z-index: 3200; background: var(--bg, #0a0e1a); }
body.movil .routes-map-wrap.movil-routes-fs .routes-map { height: 100%; min-height: 0; border-radius: 0; border: 0; }
body.movil .routes-map-wrap.movil-routes-fs .movil-routes-fs-btn { bottom: calc(24px + env(safe-area-inset-bottom)); }

/* Selector y creador de segmentos. */
body.movil .segment-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
body.movil .segment-toolbar > :is(.seg-combo, label) { grid-column: 1 / -1; min-width: 0; }
body.movil #segCreatorPage .segment-toolbar > label { grid-column: span 1; }
body.movil #segCreatorPage .segment-toolbar > label:first-child { grid-column: 1 / -1; }
body.movil .segment-toolbar .btn-ghost { min-width: 0; padding: 8px 6px; font-size: .64rem; letter-spacing: .03em; white-space: normal; }
body.movil .segment-toolbar :is(input, select), body.movil .seg-combo input { font-size: 16px; padding: 8px; }
body.movil .segment-map { height: 260px; margin: 8px 0 10px; }
body.movil .segment-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
body.movil .segment-chart-bar { gap: 6px; margin: 10px 0 -2px; }
body.movil .segment-type-filter select { min-width: 0; font-size: 16px; }
body.movil .segment-plot { height: 220px; margin: 10px 0; }
body.movil .segment-table { min-width: 860px; font-size: .7rem; }
body.movil .segment-table th, body.movil .segment-table td { padding: 7px 6px; }
body.movil .segment-creator-profile { height: 170px; }
body.movil .segment-creator-legend { display: flex; font-size: .66rem; }

/* Pantalla completa del mapa del analizador en el móvil (vertical y horizontal, 0.45.1): controles pequeños para ver la ruta. */
/* Sin el relleno de 10 px de la caja del mapa (dejaba un marco y desplazaba los controles). */
body.movil .map-container.map-fullscreen { padding: 0; margin: 0; border-radius: 0; border: 0; }
body.movil .map-container.map-fullscreen .map-metric-overlay { top: 8px; bottom: auto; left: 50px; right: auto; min-width: 0; width: auto; max-width: min(170px, 42vw); padding: 4px 6px; border-radius: 8px; }
body.movil .map-container.map-fullscreen .map-metric-toggle { font-size: .5rem; line-height: 1.25; gap: 4px; letter-spacing: 0; }
body.movil .map-container.map-fullscreen .map-metric-toggle input { width: 10px; height: 10px; }
body.movil .map-container.map-fullscreen .map-metric-legend { margin-top: 3px; }
body.movil .map-container.map-fullscreen .map-metric-legend-title { font-size: .45rem; letter-spacing: .06em; margin-bottom: 2px; }
body.movil .map-container.map-fullscreen .map-metric-legend-bar { height: 5px; }
body.movil .map-container.map-fullscreen .map-metric-legend-scale { margin-top: 2px; gap: 4px; }
body.movil .map-container.map-fullscreen .map-metric-legend-value { font-size: .48rem; line-height: 1.2; }
body.movil .map-container.map-fullscreen :is(.map-replay-label, .leaflet-tooltip.map-replay-label) { font-size: .5rem; line-height: 1.3; padding: 2px 4px; border-left-width: 2px; }
body.movil .map-container.map-fullscreen .map-replay-panel { top: 44px; right: 8px; transform: none; min-width: 0; padding: 3px 6px; font-size: .5rem; line-height: 1.3; border-left-width: 2px; border-radius: 7px; }
/* En 3D, el panel de lecturas va debajo de los botones de la capa base (antes los tapaba). */
body.movil .map-container.map-fullscreen:has(.map3d-panel:not(.hidden)) .map-replay-panel { top: 68px; }
body.movil .map-container.map-fullscreen .map-fullscreen-btn { top: 8px; right: 8px; width: 30px; height: 30px; font-size: .8rem; border-radius: 8px; }
body.movil .map-container.map-fullscreen #mapFullscreenBtn:empty::before { font-size: .8rem; }
body.movil .map-container.map-fullscreen .map3d-btn { right: 44px; font-size: .62rem; }
body.movil .map-container.map-fullscreen .map-weather { top: 8px; right: 80px; height: 30px; padding: 0 6px; gap: 4px; font-size: .62rem; border-radius: 8px; }
body.movil .map-container.map-fullscreen .map-weather :is(svg, img) { width: 15px; height: 15px; }
body.movil .map-container.map-fullscreen .map3d-panel { top: 44px; right: 8px; gap: 4px; max-width: 200px; }
body.movil .map-container.map-fullscreen .map3d-base { padding: 2px 6px; font-size: .52rem; border-radius: 6px; }
body.movil .map-container.map-fullscreen .leaflet-bar a { width: 24px; height: 24px; line-height: 24px; font-size: .9rem; }
body.movil .map-container.map-fullscreen .maplibregl-ctrl-group button { width: 24px; height: 24px; }
/* Selector de mapa base (2D) más pequeño: la leyenda ya no lo tapa. */
body.movil .map-container.map-fullscreen .leaflet-control-layers-toggle { width: 30px; height: 30px; background-size: 18px; }
body.movil .map-container.map-fullscreen .leaflet-control-layers-expanded { padding: 4px 6px; font-size: .6rem; }
/* Escala pequeña a la izquierda de la «i» (3D) o de la atribución (2D), en la misma fila. */
body.movil .map-container.map-fullscreen :is(.leaflet-bottom.leaflet-right, .maplibregl-ctrl-bottom-right) { display: flex; flex-direction: row; align-items: flex-end; gap: 4px; padding: 0 6px 4px 0; }
body.movil .map-container.map-fullscreen :is(.leaflet-bottom.leaflet-right > .leaflet-control, .maplibregl-ctrl-bottom-right > .maplibregl-ctrl) { float: none; clear: none; margin: 0 !important; }
body.movil .map-container.map-fullscreen :is(.leaflet-control-scale-line, .maplibregl-ctrl-scale) { font-size: 8px; line-height: 1.3; padding: 0 3px; border-width: 1px; }
/* 0.45.2: créditos del mapa base («Relieve: Mapzen…», «Leaflet | ©…») con la letra mínima y en una línea. */
body.movil .map-container.map-fullscreen :is(.leaflet-control-attribution, .maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-inner) { font-size: 7px; line-height: 12px; white-space: nowrap; }
body.movil .map-container.map-fullscreen .leaflet-control-attribution { padding: 0 3px; }
body.movil .map-container.map-fullscreen .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 12px; padding: 0 13px 0 0; margin: 0; border-radius: 6px; }
body.movil .map-container.map-fullscreen .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 0 14px 0 4px; }
body.movil .map-container.map-fullscreen .maplibregl-ctrl-attrib-button { width: 12px; height: 12px; border-radius: 6px; background-size: 10px; background-position: center; background-repeat: no-repeat; }
/* 0.45.2: escala y créditos entre el perfil y la barra de reproducción (en vertical, el perfil sube para dejarles sitio). */
body.movil .map-container.map-fs-has-playback .map-fs-profile:not([hidden]) { bottom: calc(68px + env(safe-area-inset-bottom)); }
body.movil .map-container.map-fs-has-playback :is(.leaflet-bottom, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right) { bottom: calc(51px + env(safe-area-inset-bottom)); }

/* Además, con el móvil en horizontal: barra de reproducción y perfil más bajos. */
@media (max-height: 520px) {
  body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback { padding: 3px 6px; gap: 4px; bottom: calc(4px + env(safe-area-inset-bottom)); border-radius: 10px; }
  body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback .playback-time { font-size: .66rem; }
  body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback .pb-btn { width: 24px; height: 24px; font-size: .7rem; border-radius: 7px; }
  body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback .pb-btn.play { width: 30px; }
  body.movil .map-container.map-fullscreen .playback-bar.map-fs-playback select { padding: 2px 4px; font-size: .58rem; max-width: 76px; border-radius: 6px; }
  body.movil .map-container.map-fs-has-playback .map-fs-profile:not([hidden]) { bottom: calc(52px + env(safe-area-inset-bottom)); height: clamp(50px, 19vh, 84px); border-radius: 8px; background: rgba(10, 14, 26, .7); }
  body.movil .map-container.map-fs-has-playback :is(.leaflet-bottom, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right) { bottom: calc(35px + env(safe-area-inset-bottom)); }
}

/* 0.45.2: en todas las vistas del mapa 3D (también fuera de la pantalla completa), escala a la izquierda de la «i» y créditos con la letra mínima. */
body.movil .map-container .maplibregl-ctrl-bottom-right { display: flex; flex-direction: row; align-items: flex-end; gap: 4px; padding: 0 6px 4px 0; }
body.movil .map-container .maplibregl-ctrl-bottom-right > .maplibregl-ctrl { float: none; clear: none; margin: 0 !important; }
body.movil .map-container .maplibregl-ctrl-scale { font-size: 8px; line-height: 1.3; padding: 0 3px; border-width: 1px; }
body.movil .map-container :is(.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-inner) { font-size: 7px; line-height: 12px; white-space: nowrap; }
body.movil .map-container .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 12px; padding: 0 13px 0 0; margin: 0; border-radius: 6px; }
body.movil .map-container .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 0 14px 0 4px; }
body.movil .map-container .maplibregl-ctrl-attrib-button { width: 12px; height: 12px; border-radius: 6px; background-size: 10px; background-position: center; background-repeat: no-repeat; }