/* mapa.css · Analizador de Entrenamientos (Ver 0.35; leyenda 0.36; capas y opacidad 0.37; lista de rutas 0.46)
 * Pestaña «Mapa de rutas» (tab-mapa.js). Usa las variables de estilos.css.
 */
.routes-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; margin-bottom: 12px; }
.routes-filters .routes-f-search { grid-column: span 2; }
.routes-f-range span { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.routes-f-range input { width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: 9px; padding: 10px; font: .85rem var(--ui);
  background: var(--surface-inset, #0e1220); color: var(--txt); cursor: text; }
.routes-filters input[type=date] { cursor: text; }
.routes-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 12px; color: var(--txt-dim); font: 600 .78rem var(--ui); }
.routes-toolbar label { display: inline-flex; align-items: center; gap: 8px; }
.routes-toolbar select { padding: 7px 10px; font-size: .8rem; }
.routes-toolbar input[type=range] { width: 120px; accent-color: var(--cyan, #22d3ee); }
.routes-toolbar .btn-ghost { padding: 7px 12px; font-size: .72rem; }
.routes-index-status:empty { display: none; }
.routes-index-status { margin: 0 0 8px; }
.routes-map { height: min(68vh, 720px); min-height: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-inset, #0a0e1a); }
.routes-map .leaflet-popup-content { font: 500 .8rem/1.45 var(--ui); }
.routes-map .leaflet-popup-content a { color: var(--cyan, #22d3ee); }
@media (max-width: 1100px) { .routes-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .routes-filters { grid-template-columns: 1fr 1fr; } .routes-filters .routes-f-search { grid-column: 1 / -1; } }
/* Ver 0.36: leyenda del mapa. */
.routes-legend { min-width: 150px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(174,192,238,.22);
  background: rgba(10,14,26,.82); color: #e5e7eb; font: 600 .74rem/1.4 var(--ui); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.routes-legend[hidden] { display: none; }
.routes-legend-title { margin-bottom: 4px; color: #9ba8ca; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.routes-legend-row { display: flex; align-items: center; gap: 8px; }
.routes-legend-row i { width: 18px; height: 4px; border-radius: 2px; flex: none; }
.routes-legend-row span { flex: 1; }
.routes-legend-row b { font: 700 .72rem var(--mono); color: #c6cbe8; }
.routes-legend-heat span { display: block; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, transparent), var(--c)); }
.routes-legend-scale { display: flex; justify-content: space-between; margin-top: 3px; color: #9ba8ca; font-size: .66rem; }
/* Ver 0.37: capas base y opacidad dentro del mapa (la barra usa .map-opacity de estilos.css). */
.routes-map-wrap { position: relative; }
.routes-map-wrap .routes-base-opacity { top: 10px; z-index: 1000; }

/* ===== Ver 0.46: lista de las rutas visibles en la zona del mapa ===== */
.routes-list { margin-top: 12px; }
.routes-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; color: var(--txt-dim); font: 600 .78rem var(--ui); }
.routes-list-count { color: var(--txt); }
.routes-list-sort { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.routes-sort-btn { border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--txt-dim); font: 600 .72rem var(--ui); padding: 4px 9px; cursor: pointer; }
.routes-sort-btn:hover { color: var(--txt); }
.routes-sort-btn.is-active { color: var(--cyan, #22d3ee); border-color: color-mix(in srgb, var(--cyan, #22d3ee) 55%, transparent); }
.routes-list-head .routes-compare-btn { margin-left: auto; padding: 7px 12px; font-size: .72rem; }
.routes-compare-btn:disabled { opacity: .45; cursor: default; }
.routes-list-msg:empty { display: none; }
.routes-list-msg { margin: 0 0 8px; color: #ff6b6b; font: 600 .76rem var(--ui); }
.routes-list-wrap { max-height: 440px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.routes-list-table { width: 100%; border-collapse: collapse; font: 500 .8rem var(--ui); color: var(--txt); }
.routes-list-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-inset, #0e1220); color: var(--txt-dim);
  font: 700 .66rem var(--ui); letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
.routes-list-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.routes-list-table :is(td, th):is(.routes-c-km, .routes-c-gain, .routes-c-time) { text-align: right; }
.routes-list-table td:is(.routes-c-km, .routes-c-gain, .routes-c-time) { font-family: var(--mono); }
.routes-list-table .routes-c-check { width: 34px; text-align: center; }
.routes-list-table td.routes-c-name { white-space: normal; min-width: 200px; }
.routes-list-table td.routes-c-bike { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--txt-dim); }
.routes-c-kind i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.routes-row { cursor: pointer; }
.routes-row:hover, .routes-row.is-hl { background: color-mix(in srgb, var(--cyan, #22d3ee) 12%, transparent); }
.routes-row.is-hl > td:first-child { box-shadow: inset 3px 0 0 var(--cyan, #22d3ee); }
.routes-list-table a.routes-list-link { color: var(--txt); text-decoration: none; font-weight: 600; }
.routes-list-table a.routes-list-link:hover { color: var(--cyan, #22d3ee); text-decoration: underline; }
.routes-check { width: 16px; height: 16px; accent-color: var(--cyan, #22d3ee); cursor: pointer; }
.routes-list-more { display: block; margin: 8px auto 0; padding: 7px 14px; font-size: .72rem; }
.routes-list-more[hidden] { display: none; }
.routes-popup-sel { margin-top: 6px; padding: 4px 8px; border: 1px solid var(--cyan, #22d3ee); border-radius: 7px; background: transparent;
  color: var(--cyan, #22d3ee); font: 600 .74rem var(--ui); cursor: pointer; }

/* Móvil (body.movil, movil.js): la lista pasa a tarjetas, como la biblioteca. En la pantalla completa del mapa
 * la lista queda tapada (el mapa es position: fixed por encima de todo). */
body.movil .routes-list-head { gap: 6px 8px; font-size: .72rem; }
body.movil .routes-list-count { flex-basis: 100%; }
body.movil .routes-sort-btn { padding: 6px 9px; font-size: .7rem; }
body.movil .routes-list-head .routes-compare-btn { flex: 1 1 100%; margin-left: 0; padding: 10px; font-size: .78rem; }
body.movil .routes-list-wrap { max-height: none; overflow: visible; border: 0; border-radius: 0; }
body.movil .routes-list-table thead { display: none; }
body.movil :is(.routes-list-table, .routes-list-table tbody) { display: block; }
body.movil .routes-list-table tr.routes-row {
  display: grid; grid-template-columns: 34px repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 3px; align-items: center;
  grid-template-areas: "chk name name name" "chk date kind kind" "chk km gain time" "chk bike bike bike";
  margin-bottom: 8px; padding: 10px 10px 10px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-inset, #0e1220);
}
body.movil .routes-list-table tr.routes-row > td { display: block; padding: 0; border: 0; min-width: 0; max-width: none; text-align: left;
  overflow: hidden; text-overflow: ellipsis; font-size: .74rem; }
body.movil .routes-list-table tr.routes-row.is-hl { border-color: var(--cyan, #22d3ee); }
body.movil .routes-list-table tr.routes-row.is-hl > td:first-child { box-shadow: none; }
body.movil .routes-list-table td.routes-c-check { grid-area: chk; align-self: center; text-align: center; }
body.movil .routes-list-table td.routes-c-name { grid-area: name; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .84rem; }
body.movil .routes-list-table td.routes-c-date { grid-area: date; color: var(--txt-dim); }
body.movil .routes-list-table td.routes-c-kind { grid-area: kind; color: var(--txt-dim); }
body.movil .routes-list-table td.routes-c-km { grid-area: km; }
body.movil .routes-list-table td.routes-c-gain { grid-area: gain; }
body.movil .routes-list-table td.routes-c-gain::before { content: '↗ '; color: var(--txt-dim); }
body.movil .routes-list-table td.routes-c-time { grid-area: time; }
body.movil .routes-list-table td.routes-c-time::before { content: '⏱ '; color: var(--txt-dim); }
body.movil .routes-list-table td.routes-c-bike { grid-area: bike; color: var(--txt-dim); }
body.movil .routes-list-table td.routes-c-bike::before { content: '🚲 '; }
body.movil .routes-check { width: 22px; height: 22px; }
body.movil .routes-list-more { width: 100%; padding: 10px; font-size: .78rem; }
body.movil .routes-popup-sel { padding: 7px 10px; font-size: .8rem; }