/* estilos.css · Analizador de Entrenamientos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #0a0e1a;
  --panel: rgba(17, 21, 39, 0.72);
  --panel-solid: #111527;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --txt: #e5e7eb;
  --txt-mid: #c6cbe8;
  --txt-dim: #8b93b8;
  --txt-faint: #6b7396;
  --neon: #3b82f6;
  --neon-2: #10b981;
  --neon-3: #00e5b0;
  --neon-4: #8b5cf6;
  --cyan: #22d3ee;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ui: 'Space Grotesk', 'Segoe UI', sans-serif;
}

body {
  font-family: var(--ui);
  color: var(--txt-mid);
  min-height: 100vh;
  padding: 24px 48px;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(139, 92, 246, 0.16), transparent 62%),
    radial-gradient(900px 520px at -8% 28%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(760px 420px at 50% 118%, rgba(16, 185, 129, 0.08), transparent 60%),
    linear-gradient(var(--surface-hover, rgba(255, 255, 255, 0.025)) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-hover, rgba(255, 255, 255, 0.025)) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, auto, 44px 44px, 44px 44px, auto;
}

body.overlay-open {
  overflow: hidden;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-inset, #0a0e1a); }
::-webkit-scrollbar-thumb { background: var(--surface-raised, #232a4d); border-radius: 8px; border: 2px solid #0a0e1a; }
::-webkit-scrollbar-thumb:hover { background: #35406e; }

.container {
  max-width: 2400px;
  margin: 0 auto;
}

.panel,
.header,
.drop-zone,
.controls,
.metrics-section,
.map-container,
.chart-card,
.brush-section,
.profile-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.header {
  padding: 26px 30px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon), var(--neon-4), var(--neon-2), var(--neon-3));
  opacity: 0.85;
}

h1 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--surface-hover, #ffffff), #9fb4ff 55%, #ff8fb0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(59, 130, 246, 0.35);
}

.subtitle {
  color: var(--txt-dim);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hud-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--neon-3);
  border: 1px solid rgba(0, 229, 176, 0.35);
  background: rgba(0, 229, 176, 0.07);
  padding: 7px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

.drop-zone {
  padding: 52px;
  text-align: center;
  border: 1px dashed rgba(59, 130, 246, 0.55);
  margin-bottom: 18px;
  transition: all 0.25s ease;
  cursor: pointer;
}

.drop-zone.dragover {
  background: rgba(59, 130, 246, 0.10);
  border-color: var(--neon);
  box-shadow: 0 0 44px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: scale(1.005);
}

.drop-zone-icon {
  font-size: 3.4em;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.55));
}

.drop-zone-text {
  font-size: 1.2rem;
  color: var(--txt);
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.drop-zone-subtext {
  color: var(--txt-faint);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.controls {
  padding: 18px 20px;
  margin-bottom: 18px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.files-control {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}

.control-group label {
  font-weight: 600;
  color: var(--txt-dim);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

select,
input[type="number"] {
  font-family: var(--mono);
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-inset, #0e1220);
  color: var(--txt);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="number"] { cursor: text; width: 104px; }

select:hover,
input[type="number"]:hover,
select:focus,
input[type="number"]:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
  outline: none;
}

.btn-ghost {
  font-family: var(--ui);
  padding: 9px 16px;
  border: 1px solid rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.10);
  color: var(--ink-strong, #bcd0ff);
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(59, 130, 246, 0.22);
  color: var(--ink-strong, #fff);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
}

.zoom-hint {
  color: var(--txt-faint);
  font-size: 0.78rem;
  font-weight: 500;
  align-self: center;
  letter-spacing: 0.06em;
}

.file-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.file-item {
  background: var(--surface-hover, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}

.file-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.file-name {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.file-label {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--txt-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 10px currentColor;
}

.remove-btn {
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.10);
  color: var(--ink-red, #ff8fb0);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.remove-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

.file-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--txt-dim);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.file-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--neon);
  cursor: pointer;
}

.metrics-section,
.map-container,
.profile-section,
.brush-section {
  padding: 22px;
  margin-bottom: 18px;
}

.section-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--neon), var(--neon-2));
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.7);
}

/* Edición del título en la ficha emergente y en el comparador. */
.metric-title-edit-row { display:flex; align-items:center; gap:8px; min-width:0; }
.metric-title-edit-row h4 { min-width:0; overflow-wrap:anywhere; }
.metric-title-edit-row .metric-name-edit { opacity:.78; flex:0 0 auto; padding:5px 7px; font-size:.84rem; }
.metric-title-edit-row .metric-name-edit:hover { opacity:1; color:var(--ink-strong, #fff); }
/* NUEVO: Grid de métricas hero estilo dashboard */
.metrics-grid {
  display: grid;
  /* auto-fit: las columnas vacías se colapsan, así 1-4 tarjetas ocupan siempre todo el ancho */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 16px;
}

.metrics-grid > .empty-message {
  grid-column: 1 / -1;
}

.metric-card {
  position: relative;
  background: linear-gradient(135deg, var(--surface-raised, rgba(26, 34, 53, 0.95)) 0%, var(--surface-raised, rgba(17, 21, 39, 0.95)) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--act, var(--neon)), var(--neon-2));
  box-shadow: 0 0 20px var(--act, transparent);
}

.metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--act, var(--neon));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.metric-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.metric-card-header h4 {
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--txt);
  word-break: break-word;
  font-weight: 700;
}

.metric-date {
  display: block;
  margin-top: 3px;
  color: var(--txt-faint);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* NUEVO: Métricas hero grandes */
.metric-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.metric-hero.secondary {
  border-bottom: none;
  padding: 16px 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}

/* Columna de análisis de terreno junto a las métricas hero.
   Todo se integra en el HTML sin bibliotecas de iconos o gráficos adicionales. */
.metric-hero.primary {
  grid-template-columns: minmax(0, 1fr) minmax(145px, 39%);
  column-gap: 14px;
  align-items: stretch;
}
.metric-hero.primary > .hero-item { grid-column: 1; min-width: 0; }
.metric-hero.primary > .metric-side-panel {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
}
.metric-side-panel {
  container-type: inline-size;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-inset, rgba(9, 15, 29, 0.36));
  border: 1px solid rgba(125, 152, 200, 0.11);
  border-radius: 13px;
}
.metric-activity-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
  color: var(--ink-strong, #f8faff);
}
.metric-activity-type svg {
  display: block;
  width: min(100%, 116px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(242, 247, 255, 0.16));
}
.metric-activity-type-label {
  font-family: var(--ui);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-strong, #f3f6ff);
  white-space: nowrap;
}
.metric-activity-type-adjustment {
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--neon-3);
  white-space: nowrap;
}
/* Identificación compacta del equipamiento: la modalidad conserva la jerarquía visual. */
.metric-identification {
  width: 100%;
  max-width: 465px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 1.35fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
}
.metric-gear-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  color: var(--ink-muted, #9caccf);
}
.metric-gear-info svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: .84;
  stroke: var(--ink-muted, #93a9ce);
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.metric-gear-title {
  color: var(--ink-muted, #8292b4);
  text-transform: uppercase;
  font: 700 .52rem/1.2 var(--ui);
  letter-spacing: .05em;
}
.metric-gear-name {
  width: 100%;
  min-width: 0;
  font: 600 .67rem/1.3 var(--ui);
  color: var(--ink-strong, #becae0);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.metric-gear-name.is-unknown { color: var(--ink-muted, #7c8aab); font-weight: 500; }
.metric-device-edit {
  color: var(--ink-muted, #8aa6d2); background: transparent; border: 0; padding: 0 5px;
  font: 600 .68rem/1 var(--ui); cursor: pointer; min-height: 14px;
  opacity: .58; transition: opacity .15s, color .15s;
}
.metric-device-edit:hover, .metric-device-edit:focus-visible { opacity: 1; color: var(--ink-strong, #fff); outline-offset: 3px; }
@container (max-width: 304px) {
  .metric-identification {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 'type type' 'bike device';
    gap: 9px 8px;
  }
  .metric-identification .metric-activity-type { grid-area: type; }
  .metric-gear-bike { grid-area: bike; }
  .metric-gear-device { grid-area: device; }
  .metric-gear-info { gap: 2px; }
  .metric-gear-info svg { width: 17px; height: 17px; }
  .metric-gear-title { font-size: .53rem; }
  .metric-gear-name { font-size: .65rem; -webkit-line-clamp: 2; line-clamp: 2; }
}
@container (max-width: 115px) {
  .metric-identification { gap: 7px 5px; }
  .metric-gear-info svg { display: none; }
  .metric-gear-name { font-size: .57rem; }
}
.metric-side-kpis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.metric-side-kpi { min-width: 0; text-align: center; }
.metric-side-kpi-label {
  display: block;
  color: var(--ink-muted, #8898ba);
  font-size: 0.60rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.metric-side-kpi-value {
  display: block;
  margin-top: 3px;
  color: var(--ink-strong, #f0f4ff);
  font: 700 1.05rem/1.2 var(--mono);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.metric-side-kpi-value small {
  color: var(--act, var(--cyan));
  font-family: var(--ui);
  font-size: 0.65rem;
  font-weight: 700;
}
.metric-side-kpi-split { color: var(--ink-muted, #6a789c); font-weight: 400; }
.metric-terrain { padding-top: 7px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
.metric-terrain-heading {
  display: block;
  color: var(--ink-muted, #8898ba);
  font-size: 0.61rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 7px;
  text-align: center;
}
.metric-terrain-bar {
  display: flex;
  width: 100%;
  height: 9px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--surface-hover, rgba(255,255,255,.07));
}
.metric-terrain-bar span { height: 100%; min-width: 0; }
.metric-terrain-up { background: #3b82f6; }
.metric-terrain-flat { background: #10b981; }
.metric-terrain-down { background: #f59e0b; }
.metric-terrain-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3px;
  margin-top: 7px;
}
.metric-terrain-legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-size: 0.62rem;
  color: var(--ink-muted, #aab7d1);
}
.metric-terrain-name { white-space: nowrap; }
.metric-terrain-name::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terrain-color);
  margin-right: 3px;
  vertical-align: 1px;
}
.metric-terrain-legend-item strong {
  font-family: var(--mono);
  color: var(--ink-strong, #e5edff);
  font-size: 0.68rem;
  font-weight: 700;
}
.metric-terrain-unavailable {
  color: var(--txt-faint);
  font-size: .68rem;
  text-align: center;
  line-height: 1.5;
}
@container (min-width: 290px) {
  .metric-side-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-side-panel { gap: 15px; }
  .metric-activity-type svg { width: min(100%, 136px); }
  .metric-terrain-legend-item { flex-direction: row; justify-content: center; flex-wrap: wrap; column-gap: 3px; }
}
@container (max-width: 620px) {
  .metric-hero.primary { grid-template-columns: minmax(0, 1fr) minmax(138px, 42%); column-gap: 7px; }
  .metric-hero.primary .hero-value { font-size: clamp(2.05rem, 8cqi, 2.85rem); }
  .metric-hero.primary .hero-unit { margin-left: 4px; font-size: .9rem; }
  .metric-side-panel { padding: 9px 8px; gap: 9px; }
  .metric-activity-type svg { width: min(100%, 94px); }
  .metric-side-kpi-value { font-size: .90rem; }
  .metric-side-kpi-label { font-size: .57rem; }
  .metric-terrain-legend-item { font-size: .57rem; }
  .metric-terrain-legend-item strong { font-size: .62rem; }
}
@container (max-width: 375px) {
  .metric-hero.primary { grid-template-columns: minmax(0, 1fr) 131px; column-gap: 5px; }
  .metric-hero.primary .hero-value { font-size: 1.85rem; }
  .metric-side-panel { padding: 8px 6px; }
  .metric-terrain-name::before { width: 5px; height: 5px; margin-right: 2px; }
}

/* En móviles se recupera el espacio útil perdido por el padding del HUD de escritorio. */
@media (max-width: 680px) {
  body { padding: 14px 12px; }
  .metrics-section { padding: 14px; }
  .metric-card { padding: 16px; }
  .metrics-grid { grid-template-columns: 1fr; }
}

.metric-hero.secondary .hero-value {
  white-space: nowrap;
}

.metric-card {
  container-type: inline-size;
}

@container (max-width: 470px) {
  .metric-hero.secondary .hero-value {
    font-size: 2.5rem;
  }
}

.hero-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-value {
  font-family: var(--mono);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--txt);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(59, 130, 246, 0.28);
}

.hero-unit {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--act, var(--neon));
  margin-left: 8px;
}

.hero-label {
  color: var(--txt-faint);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.metric-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.metric-table th,
.metric-table td {
  padding: 9px 8px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  text-align: left;
}

.metric-table thead th {
  border-top: none;
  color: var(--txt-faint);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.metric-table th.col,
.metric-table td.val {
  width: 140px;
}

.metric-table td.label {
  font-weight: 600;
  color: var(--txt-mid);
}

.metric-table td.val {
  font-family: var(--mono);
  color: var(--txt);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wind-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  cursor: help;
}

.wind-arrow {
  display: inline-block;
  font-weight: 900;
  color: var(--cyan);
}

.loading,
.muted {
  color: var(--txt-faint);
  font-weight: 700;
}

.empty-message {
  padding: 22px;
  border-radius: 14px;
  border: 1px dashed rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.06);
  color: var(--txt-dim);
  font-weight: 600;
}

.map-container {
  position: relative;
}

#map {
  height: 440px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-inset, #0a0e1a);
}

.leaflet-container {
  background: var(--surface-inset, #0a0e1a);
  font-family: var(--ui);
}

.tiles-dark-filter .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.82) contrast(0.92) saturate(0.45);
}

.leaflet-bar a {
  background: var(--surface-raised, #141931);
  color: var(--txt-mid);
  border-bottom: 1px solid var(--line);
}

.leaflet-bar a:hover {
  background: var(--surface-raised, #1B2140);
  color: var(--ink-strong, #fff);
}

.leaflet-control-attribution {
  background: var(--surface-inset, rgba(10, 14, 26, 0.72)) !important;
  color: var(--txt-faint);
  font-size: 0.62rem;
}

.leaflet-control-attribution a {
  color: var(--txt-dim);
}

.leaflet-control-layers {
  background: var(--surface-raised, rgba(17, 21, 39, 0.94));
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--txt-mid);
}

.leaflet-control-layers-list label {
  color: var(--txt-mid);
}

.map-fullscreen-btn {
  position: absolute;
  top: 34px;
  right: 34px;
  z-index: 1200;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-inset, rgba(14, 18, 32, 0.9));
  color: var(--txt-mid);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.map-fullscreen-btn:hover {
  border-color: var(--neon);
  color: var(--ink-strong, #fff);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.4);
}

.map-notice {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1300;
  background: var(--surface-inset, rgba(14, 18, 32, 0.95));
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-red, #ffc4d4);
  max-width: min(560px, 86%);
  cursor: pointer;
}

.map-metric-overlay {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1250;
  min-width: 230px;
  max-width: min(320px, calc(100% - 28px));
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-inset, rgba(12, 17, 31, 0.94));
  border: 1px solid rgba(125, 152, 200, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}

.map-metric-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--txt-mid);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.map-metric-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--neon);
  cursor: pointer;
}

.map-metric-legend {
  margin-top: 10px;
}

.map-metric-legend-title {
  display: block;
  margin-bottom: 6px;
  color: var(--txt-faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-metric-legend-bar {
  width: 100%;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #10b981 50%, #ef4444 100%);
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  box-shadow: inset 0 0 0 1px rgba(8, 12, 23, 0.18);
}

.map-metric-legend-scale {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}

.map-metric-legend-value {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--txt-mid);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.25;
}

.map-metric-legend-value strong {
  color: var(--txt);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.map-metric-legend-value:last-child { text-align: right; }
.map-metric-legend-value:nth-child(2) { text-align: center; }
.map-metric-legend-scale > .map-metric-legend-value { flex: 1 1 0; }
.map-metric-legend-scale > .map-metric-legend-value:first-child { align-items: flex-start; }
.map-metric-legend-scale > .map-metric-legend-value:nth-child(2) { align-items: center; }
.map-metric-legend-scale > .map-metric-legend-value:last-child { align-items: flex-end; }


@media (max-width: 680px) {
  .map-metric-overlay {
    left: 10px;
    right: 10px;
    bottom: 10px;
    min-width: 0;
    max-width: none;
    padding: 9px 10px;
  }
  .map-metric-toggle { font-size: 0.74rem; }
  .map-metric-legend-title { font-size: 0.64rem; }
  .map-metric-legend-value { font-size: 0.68rem; }
}

.map-container.map-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.map-container.map-fullscreen #map {
  height: 100vh;
  border-radius: 0;
}

.map-container.map-fullscreen .map-fullscreen-btn {
  top: 16px;
  right: 16px;
}

.profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.profile-head h3 {
  color: var(--txt);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-head h3::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--neon));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
}

.playback-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface-hover, rgba(255, 255, 255, 0.028));
  border: 1px solid var(--line);
  border-radius: 14px;
}

.playback-time {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--txt);
  min-width: 92px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.5);
}

.pb-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-hover, rgba(255, 255, 255, 0.04));
  color: var(--txt-mid);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.18s ease;
}

.pb-btn:hover {
  border-color: var(--neon);
  color: var(--ink-strong, #fff);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}

.pb-btn.play {
  width: 48px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(16, 185, 129, 0.18));
  border-color: rgba(59, 130, 246, 0.6);
  color: var(--ink-strong, #fff);
}

.pb-btn.play:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

#playbackSlider {
  flex: 1;
  min-width: 220px;
  accent-color: var(--neon);
  height: 4px;
  cursor: pointer;
}

.pb-speed-label {
  color: var(--txt-faint);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.profile-wrapper {
  position: relative;
  height: 400px;
}

#profileOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Lecturas instantáneas junto al punto de reproducción: solo fichas individuales. */
.profile-replay-readout {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  min-width: 148px;
  max-width: calc(100% - 14px);
  padding: 9px 12px;
  border: 1px solid rgba(174, 192, 238, .24);
  border-left: 3px solid var(--replay-accent, #3b82f6);
  border-radius: 10px;
  background: var(--surface-inset, rgba(10, 14, 26, .94));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .44);
  color: var(--ink-strong, #e5e7eb);
  font: 600 .72rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.profile-replay-readout[hidden] { display: none !important; }
.profile-replay-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.profile-replay-label { color: var(--ink-muted, #9ba8ca); }
.profile-replay-value { color: var(--ink-strong, #eff6ff); text-align: right; }
.profile-replay-row + .profile-replay-row { margin-top: 2px; }

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

@media (max-width: 1200px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

.chart-card {
  padding: 22px;
  /* Sin esto, un canvas ancho (p. ej. tras salir de pantalla completa) ensancha
     la columna de la rejilla en lugar de adaptarse a ella. */
  min-width: 0;
}
.chart-wrapper canvas, .zone-wrapper canvas, .profile-wrapper canvas { max-width: 100%; }

.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.chart-card-header h3 {
  color: var(--txt);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-card-header h3::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--neon), var(--neon-4));
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.chart-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chart-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-hover, rgba(255, 255, 255, 0.04));
  color: var(--txt-mid);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-btn:hover {
  border-color: var(--neon);
  color: var(--ink-strong, #fff);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
}

.chart-wrapper {
  position: relative;
  height: 430px;
}

.zone-wrapper {
  position: relative;
  height: 340px;
}

.zone-wrapper.tall {
  height: 420px;
}

.zone-note {
  color: var(--txt-faint);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: -6px 0 12px;
}

.chart-card.chart-fullscreen,
.profile-section.chart-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 3200;
  border-radius: 0;
  padding: 20px 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--surface-inset, rgba(10, 14, 26, 0.97));
}

.chart-card.chart-fullscreen .chart-wrapper,
.chart-card.chart-fullscreen .zone-wrapper,
.chart-card.chart-fullscreen .profile-wrapper,
.profile-section.chart-fullscreen .profile-wrapper {
  height: auto;
  flex: 1;
  min-height: 0;
}

.brush-section {
  padding: 18px 22px;
}

.brush-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.brush-title {
  font-weight: 700;
  color: var(--txt);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brush-title::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--neon-3), var(--neon));
  box-shadow: 0 0 12px rgba(0, 229, 176, 0.6);
}

#brushCanvas {
  width: 100%;
  height: 96px;
  display: block;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.hidden {
  display: none;
}

/* Biblioteca Strava, integrada en el mismo tema HUD. */
.history-section {
  margin-bottom: 18px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
.history-intro { color: var(--txt-dim); font-size: .87rem; line-height: 1.5; margin-bottom: 14px; }
.history-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.history-primary { border: 1px solid rgba(34,211,238,.65); background: rgba(34,211,238,.11); color: var(--ink-strong, #c3f7ff); }
.history-primary:hover { background: rgba(34,211,238,.22); box-shadow: 0 0 20px rgba(34,211,238,.20); }
.history-section button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.history-status { color: var(--txt-dim); font-size: .84rem; line-height: 1.5; margin-bottom: 12px; min-height: 1.3em; }
.history-status.error { color: var(--ink-red, #ff9fb5); }
.history-status.success { color: var(--ink-green, #6be5bd); }
.history-progress { width: 100%; height: 9px; accent-color: var(--cyan); margin-bottom: 10px; }
.history-progress.hidden { display: none; }
.history-counters { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 12px 0 16px; }
.history-counter { border-radius: 12px; border: 1px solid var(--line); padding: 12px 14px; background: var(--surface-hover, rgba(255,255,255,.025)); }
.history-counter strong { display: block; color: var(--txt); font-family: var(--mono); font-size: 1.35rem; }
.history-counter span { display: block; color: var(--txt-faint); font-size: .69rem; margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; }
.history-filters { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px; align-items: end; margin-bottom: 12px; }
/* Dos filas en escritorio: 5 filtros arriba y 3 filtros + accion abajo. */
.history-filter--search, .history-filter--device,
.history-filter--country, .history-filter--season, .history-filter--distance { grid-column: span 3; }
.history-filter--bike, .history-filter--type, .history-filter--year { grid-column: span 2; }
.history-filters #historyCompareBtn { grid-column: span 3; }
.history-filter--country, .history-filter--season { min-width: 0; }
.history-filters #historyCompareBtn { min-height: 39px; }
.history-filter select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.history-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.history-filter label { color: var(--txt-dim); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.history-filter input, .history-filter select { width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: 9px; padding: 10px; font-family: var(--ui); background: var(--surface-inset, #0e1220); color: var(--txt); font-size: .85rem; }
.history-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
/* Cabeceras ordenables (teclado, raton y lectores de pantalla). */
.history-table { width: 100%; min-width: 1510px; table-layout: fixed; border-collapse: collapse; }
.history-table col:nth-child(1)  { width: 3%; }
.history-table col:nth-child(2)  { width: 7%; }
.history-table col:nth-child(3)  { width: 17%; }
.history-table col:nth-child(4)  { width: 5%; }
.history-table col:nth-child(5)  { width: 7%; }
.history-table col:nth-child(6)  { width: 7%; }
.history-table col:nth-child(7)  { width: 7%; }
.history-table col:nth-child(8)  { width: 6%; }
.history-table col:nth-child(9)  { width: 6.5%; }
.history-table col:nth-child(10) { width: 6%; }
.history-table col:nth-child(11) { width: 6%; }
.history-table col:nth-child(12) { width: 16%; }
.history-table col:nth-child(13) { width: 6.5%; }
.history-table th, .history-table td { box-sizing: border-box; }
.history-table .history-sort { gap: 3px; padding: 10px 5px; }
.history-table td { padding: 9px 5px; }
.history-table td:not(.history-comment) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-table td.name, .history-table td.history-comment { min-width: 0; max-width: none; }
.history-table td.name .history-activity-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-table td.history-comment { width: auto; }
.history-table .history-comment-content { display: flex; align-items: center; gap: 5px; min-width: 0; }
.history-table .history-comment-text { display: block; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-table .history-comment-toggle { flex: 0 0 auto; margin: 0; }
.history-table td.history-comment.expanded .history-comment-content { display: block; }
.history-table td.history-comment.expanded .history-comment-text { white-space: pre-line; overflow: visible; }
.history-table td.num { font-size: .76rem; }
.history-table .history-state { font-size: .69rem; }
.history-table td.history-file-cell { overflow: hidden; text-overflow: ellipsis; }

.history-table th { color: var(--txt-faint); font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; background: var(--surface-raised, #13182c); text-align: left; padding: 0; }
.history-table th[aria-sort="ascending"], .history-table th[aria-sort="descending"] { background: var(--surface-raised, #19213a); }
.history-table th.history-align-right { text-align: right; }
.history-sort { display: flex; align-items: center; gap: 6px; width: 100%; padding: 12px 9px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.history-sort:hover { color: var(--ink-strong, #e4faff); background: rgba(34,211,238,.08); }
.history-sort:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; border-radius: 4px; }
.history-align-right .history-sort { justify-content: flex-end; }
.history-sort-arrow { display: inline-block; min-width: 10px; color: var(--ink-muted, #5a7295); font-size: .78rem; }
.history-sort.is-active { color: var(--ink-strong, #c5f6ff); }
.history-sort.is-active .history-sort-arrow { color: var(--cyan); text-shadow: 0 0 9px rgba(34,211,238,.45); }
.history-table td { color: var(--txt-mid); border-top: 1px solid var(--line); padding: 10px; font-size: .81rem; vertical-align: top; }
.history-table tr:hover td { background: rgba(59,130,246,.055); }
.history-table td.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.history-table td.date { white-space: nowrap; color: var(--txt-dim); }
.history-table td.name { color: var(--txt); font-weight: 600; }
.history-activity-link { color: var(--ink-strong, #dcecff); font: inherit; text-decoration: none; display: inline; border-radius: 3px; }
.history-activity-link:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.history-activity-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.history-table td.name .history-file { color: var(--txt-faint); display: block; font-size: .69rem; font-weight: 400; margin-top: 4px; word-break: break-all; }
.history-table td.history-comment { color: var(--ink-muted, #abb8d9); line-height: 1.45; }
.history-comment-text { overflow-wrap: anywhere; }
.history-comment.expanded .history-comment-text { display: block; overflow: visible; }
.history-comment-toggle { margin-top: 3px; border: 0; padding: 0; color: var(--cyan); font-size: .72rem; font-family: var(--ui); cursor: pointer; background: transparent; }
.history-comment-toggle:hover { text-decoration: underline; }
.history-comment-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.history-private-note { color: var(--txt-faint); display: block; margin-top: 4px; font-size: .72rem; }
.history-avg-speed { font-variant-numeric: tabular-nums; }
.history-type { font-family: var(--mono); font-size: .72rem; white-space: nowrap; }
.history-conflict { font-size: .8rem; color: var(--ink-amber, #fbbf6e); vertical-align: middle; }
.history-state { font-size: .73rem; white-space: nowrap; }
.history-state.ok { color: var(--ink-green, #67e3bc); }
.history-state.missing { color: var(--txt-faint); }
.history-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.history-pager span { color: var(--txt-faint); font-size: .78rem; }
.history-note { margin-top: 12px; color: var(--txt-faint); font-size: .74rem; line-height: 1.5; }
@media (max-width: 950px) {
  .history-counters { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .history-filters { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .history-filters > .history-filter, .history-filters > #historyCompareBtn { grid-column: span 1; }
  .history-filter--search { grid-column: 1 / -1 !important; }
}
@media (max-width: 520px) {
  .history-section { padding: 14px; }
  .history-filters { grid-template-columns: 1fr; }
  .history-filters > .history-filter, .history-filters > #historyCompareBtn { grid-column: 1 / -1; }
  .history-actions .btn-ghost { width: 100%; }
}

/* Ficha individual: reutiliza todas las métricas, el mapa y las gráficas del comparador. */
.single-activity-mode .hud-tabs,
.single-activity-mode .drop-zone,
.single-activity-mode .history-section,
.single-activity-mode .mywhoosh-calibration,
.single-activity-mode .files-control { display: none !important; }
.single-activity-mode .control-group.files-control { display: none !important; }
.single-activity-info { margin: 4px 0 19px; padding: 18px 21px; border: 1px solid rgba(34,211,238,.25);
  border-left: 3px solid var(--cyan); border-radius: 12px; background: var(--surface-raised, #151b2d); color: var(--txt-mid); }
.single-activity-info h2 { color: var(--txt); font-size: 1.15rem; margin: 3px 0 10px; line-height: 1.5; overflow-wrap: anywhere; }
.single-activity-info .single-activity-kicker { color: var(--cyan); font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.single-activity-meta { display: flex; flex-wrap: wrap; gap: 9px 17px; font-size: .83rem; }
.single-activity-meta-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px 17px; font-size: .83rem; }
.single-activity-meta-row > .single-activity-meta { display: contents; }
.single-activity-origin { font-size: .72rem; color: var(--txt-faint); }
.single-activity-empty { color: var(--ink-amber, #fbbf6e); margin-top: 11px; font-size: .82rem; line-height: 1.5; }
.single-activity-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.single-activity-summary span { background: var(--surface-raised, #101729); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: 700 .78rem var(--mono); }
@media(max-width:550px){ .single-activity-info{padding:13px;} }

/* Ficha individual únicamente: métricas, resumen compacto y bicicleta/GPS
   comparten una fila horizontal en escritorio. El comparador no se altera. */
.single-activity-mode .metric-card { padding: clamp(14px, 1.45vw, 25px); }
.single-activity-mode .metric-hero.primary {
  display: grid;
  grid-template-columns: minmax(190px, .76fr) minmax(350px, 1.23fr) minmax(330px, 1.44fr);
  column-gap: clamp(17px, 1.65vw, 34px);
  row-gap: clamp(12px, 1.25vw, 21px);
  align-items: start;
}
.single-activity-mode .metric-hero.primary > .hero-item { grid-column: 1; min-width: 0; }
.single-activity-mode .metric-hero.primary > .metric-side-panel {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: start;
  min-width: 0;
  min-height: 0;
}
.single-activity-mode .metric-inline-table {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  min-width: 0;
  padding: 0;
  border: 0;
}
.single-activity-mode .metric-inline-table .metric-table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
}
.single-activity-mode .metric-inline-table .metric-table th,
.single-activity-mode .metric-inline-table .metric-table td {
  padding: 8px 3px;
  font-size: clamp(.68rem, .76vw, .84rem);
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}
.single-activity-mode .metric-inline-table .metric-table thead th {
  padding-top: 1px;
  font-size: clamp(.60rem, .68vw, .72rem);
  letter-spacing: .07em;
}
.single-activity-mode .metric-inline-table .metric-table td.label { width: 48%; }
.single-activity-mode .metric-inline-table .metric-table th.col,
.single-activity-mode .metric-inline-table .metric-table td.val { width: 26%; }
.single-activity-mode .metric-hero.secondary {
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
}
.single-activity-mode .metric-hero.secondary .hero-value { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
@media (max-width: 1099px) {
  .single-activity-mode .metric-hero.primary {
    grid-template-columns: minmax(185px, .65fr) minmax(330px, 1.35fr);
    column-gap: clamp(12px, 2vw, 28px);
  }
  .single-activity-mode .metric-hero.primary > .metric-side-panel {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  .single-activity-mode .metric-inline-table {
    grid-column: 1 / -1;
    grid-row: 4;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .single-activity-mode .metric-inline-table .metric-table { max-width: 680px; }
}
@media (max-width: 780px) {
  .single-activity-mode .metric-hero.primary { grid-template-columns: minmax(0, 1fr); }
  .single-activity-mode .metric-hero.primary > .hero-item { grid-column: 1; }
  .single-activity-mode .metric-hero.primary > .metric-side-panel {
    grid-column: 1;
    grid-row: 5;
  }
  .single-activity-mode .metric-inline-table {
    grid-column: 1;
    grid-row: 4;
    overflow-x: auto;
  }
  .single-activity-mode .metric-inline-table .metric-table { min-width: 310px; }
  .single-activity-mode .metric-inline-table .metric-table th,
  .single-activity-mode .metric-inline-table .metric-table td { font-size: .72rem; }
}

/* Metadatos editables en todas las tarjetas (comparador y ficha individual). */
.metric-gear-info .metric-device-edit,
.metric-activity-type .metric-device-edit { flex: none; }
.metric-gear-info .metric-device-edit,
.metric-activity-type .metric-device-edit { opacity: .85; }
.metric-activity-type .metric-device-edit { margin-top: -2px; }
.single-activity-info .single-edit-action { font-size: .72rem; padding: 5px 10px; margin-top: 10px; letter-spacing: .02em; text-transform: none; }
.single-activity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.single-activity-actions button:disabled { opacity: .48; cursor: not-allowed; }
.single-laps-card { margin-top: 18px; border-top: 1px solid rgba(148,163,184,.18); padding-top: 16px; }
.single-laps-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.single-laps-heading h5 { margin: 0; font-size: .95rem; color: var(--txt); }
.single-laps-heading span { color: var(--txt-dim); font-size: .76rem; }
.lap-table-scroll { overflow-x: auto; border: 1px solid rgba(148,163,184,.18); border-radius: 12px; background: var(--surface-inset, rgba(8,12,24,.42)); }
.lap-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: .75rem; }
.lap-table th, .lap-table td { padding: 9px 10px; border-bottom: 1px solid rgba(148,163,184,.12); text-align: right; white-space: nowrap; }
.lap-table th:first-child, .lap-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface-raised, #0f1628); z-index: 1; }
.lap-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-raised, #111a2f); color: var(--ink-strong, #d8e6ff); font-size: .7rem; letter-spacing: .035em; text-transform: uppercase; }
.lap-table thead th:first-child { z-index: 3; }
.lap-table tbody tr:hover td { background: rgba(34,211,238,.06); }
.lap-table tbody tr:hover td:first-child { background: var(--surface-raised, #142034); }
.lap-table tbody tr.summary-row td { background: rgba(34,211,238,.09); font-weight: 700; }
.lap-table tbody tr.summary-row td:first-child { background: var(--surface-raised, #152337); }
.lap-table td.muted { color: var(--txt-dim); }
.single-laps-note { margin: 9px 2px 0; color: var(--txt-dim); font-size: .73rem; line-height: 1.45; }
@media(max-width:700px){ .lap-table{min-width:860px;font-size:.72rem;} .lap-table th,.lap-table td{padding:8px 9px;} }

.single-surface-summary {white-space:normal;min-width:0;overflow-wrap:anywhere}
.single-surface-summary .single-laps-note {white-space:normal;line-height:1.5}
.single-surface-controls {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.single-surface-controls .btn-ghost {padding:7px 12px;font-size:.72rem;text-transform:none;letter-spacing:0}
.single-surface-status {font-size:.74rem;color:var(--txt-dim);line-height:1.5}
.single-surface-bar {display:flex;overflow:hidden;width:100%;height:12px;border-radius:7px;background:var(--surface-raised, #334155);margin:9px 0 5px}
.single-surface-bar>span {height:100%}
.single-surface-legend {display:flex;gap:8px 16px;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;max-width:100%;color:var(--ink-strong, #cad6ec);font-size:.72rem;margin-bottom:10px}
.single-surface-legend > span {flex:0 0 auto}
.single-surface-legend b {font-weight:700;color:var(--ink-strong, #fff)}
.single-surface-legend i {display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px}

.activity-editor-dialog {
  box-sizing: border-box;
  width: min(485px, calc(100vw - 28px));
  max-height: min(90vh, 700px);
  overflow-y: auto;
  margin: auto;
  padding: 23px;
  color: var(--txt);
  background: var(--surface-raised, #111a2c);
  border: 1px solid rgba(74,155,255,.48);
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0,0,0,.6);
}
.activity-editor-dialog::backdrop { background: var(--surface-inset, rgba(3,6,17,.8)); backdrop-filter: blur(3px); }
.activity-editor-dialog h2 { margin: 0 0 6px; font-size: 1.18rem; letter-spacing: .025em; }
.activity-editor-dialog .editor-intro { margin: 0 0 18px; color: var(--txt-dim); font-size: .82rem; line-height: 1.5; }
.activity-editor-dialog .editor-field { display: grid; gap: 6px; margin: 12px 0; }
.activity-editor-dialog .editor-field label { font-size: .71rem; color: var(--ink-muted, #a5b9dc); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.activity-editor-dialog input, .activity-editor-dialog select, .activity-editor-dialog textarea {
  min-width: 0; width: 100%; box-sizing: border-box;
  padding: 11px 12px; border-radius: 9px;
  border: 1px solid #384863; background: var(--surface-inset, #090f20);
  color: var(--ink-strong, #eff4ff); font: 600 .86rem var(--ui);
}
.activity-editor-dialog input:focus-visible, .activity-editor-dialog select:focus-visible, .activity-editor-dialog textarea:focus-visible {
  outline: 2px solid #39a7ff; outline-offset: 1px;
}
.activity-editor-dialog .editor-actions {
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px; margin-top: 20px;
}
.activity-editor-dialog .editor-actions .btn-ghost { font-size: .75rem; padding: 9px 11px; white-space: nowrap; }
.activity-editor-dialog .editor-actions .editor-save { border-color: #148cbd; color: var(--ink-strong, #d5fbff); background: var(--surface-raised, #08344b); }
.activity-editor-dialog .editor-actions .editor-reset { border-color: #40516e; color: var(--ink-muted, #9caeca); text-transform: none; letter-spacing: 0; font-size: .74rem; }
.activity-editor-dialog .editor-error { min-height: 15px; color: var(--ink-red, #ff9c9c); font-size: .76rem; margin: 8px 0 0; }
@media (max-width: 500px) {
  .activity-editor-dialog { padding: 18px 14px; }
  .activity-editor-dialog .editor-actions { grid-template-columns: 1fr 1fr; }
  .activity-editor-dialog .editor-actions .editor-reset { grid-column: 1 / -1; justify-self: start; }
  .activity-editor-dialog .editor-actions > span { display: none; }
  .activity-editor-dialog .editor-actions .btn-ghost { font-size: .73rem; padding: 9px 9px; }
}

/* Navegacion: el comparador y las estadisticas son vistas separadas. */
.hud-tabs {
  display: flex;
  align-items: stretch;
  gap: 9px;
  padding: 6px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised, rgba(17,21,39,.76));
  width: fit-content;
  max-width: 100%;
}
.hud-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--txt-dim);
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .045em;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.hud-tab:hover { color: var(--ink-strong, #fff); background: rgba(59,130,246,.10); }
.hud-tab.active, .hud-tab[aria-selected="true"] {
  color: var(--ink-strong, #eaf5ff);
  border-color: rgba(34,211,238,.37);
  background: linear-gradient(110deg,rgba(59,130,246,.22),rgba(34,211,238,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hud-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.totals-section {
  padding: 26px;
  margin-bottom: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
.totals-section.hidden { display: none; }
.totals-intro {
  margin: 0 0 18px;
  color: var(--txt-dim);
  font-size: .88rem;
  line-height: 1.55;
}
.totals-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.totals-toolbar h3 {
  color: var(--txt);
  font-size: .90rem;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.totals-order-hint { color: var(--txt-faint); font-size: .75rem; }
.totals-kpis {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin: 2px 0 24px;
}
.totals-kpi {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 17px 19px;
  background: linear-gradient(140deg,var(--surface-raised, rgba(26,34,53,.9)),var(--surface-raised, rgba(17,21,39,.82)));
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.totals-kpi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,rgba(59,130,246,.8),rgba(0,229,176,.5));
}
.totals-kpi-label {
  font-size: .70rem;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--txt-faint);
  text-transform: uppercase;
}
.totals-kpi-value {
  display: block;
  margin-top: 9px;
  font-family: var(--mono);
  color: var(--txt);
  font-size: clamp(1.25rem,2vw,1.9rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.totals-kpi-value small { font-size: .68rem; font-weight: 600; color: var(--cyan); }
.totals-table-scroll {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-color: #35406e var(--surface-inset, #0a0e1a);
}
.totals-table {
  width: 100%;
  min-width: 1430px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
}
.totals-table th, .totals-table td {
  padding: 13px 9px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.totals-table thead th {
  color: var(--txt-mid);
  background: var(--surface-raised, #141a30);
  font-size: .71rem;
  font-family: var(--ui);
  text-transform: uppercase;
  letter-spacing: .045em;
}
.totals-table thead tr:first-child th {
  padding: 13px 9px;
  background: var(--surface-raised, #1a2541);
  color: var(--ink-strong, #c8d9ff);
  text-align: center;
  border-bottom: 1px solid rgba(148,163,208,.14);
}
.totals-table thead tr:first-child .totals-year-head { text-align: left; }
.totals-table th.totals-year-head,
.totals-table td.totals-year-cell,
.totals-table tfoot th {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 76px;
  text-align: left;
  font-weight: 800;
  color: var(--ink-strong, #e6eeff);
}
.totals-table tbody td { background: var(--surface-raised, rgba(17,21,39,.92)); color: var(--ink-strong, #bac5e1); }
.totals-table tbody tr:nth-child(even) td { background: var(--surface-raised, rgba(25,31,52,.91)); }
.totals-table tbody tr:hover td { background: var(--surface-raised, #223050); }
.totals-table tbody td.totals-year-cell { background: var(--surface-raised, #151e35); }
.totals-table tbody tr:nth-child(even) td.totals-year-cell { background: var(--surface-raised, #1b2541); }
.totals-table tbody td.totals-total-col { font-weight: 700; color: var(--ink-strong, #e6eeff); }
.totals-table tfoot th, .totals-table tfoot td {
  background: var(--surface-raised, #1c3050);
  border-bottom: none;
  border-top: 2px solid rgba(34,211,238,.47);
  color: var(--ink-strong, #ecf8ff);
  font-weight: 800;
}
.totals-table .totals-divider { border-left: 1px solid rgba(148,163,208,.18); }
/* Clickable yearly-statistics headers; arrows show the active sorting direction. */
.totals-table thead th[data-stats-sort] { padding: 0; }
.totals-table thead tr:first-child th[data-stats-sort] { padding: 0; }
.totals-table .totals-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 11px 9px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
}
.totals-table th.totals-year-head .totals-sort-btn { justify-content: flex-start; text-align: left; }
.totals-table .totals-sort-btn:hover { background: rgba(34,211,238,.10); color: var(--ink-strong, #e6fbff); }
.totals-table .totals-sort-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; border-radius: 4px; }
.totals-table thead th[aria-sort="ascending"],
.totals-table thead th[aria-sort="descending"] { background: var(--surface-raised, #253453); color: var(--ink-strong, #dffaff); }
.totals-table .totals-sort-arrow { color: var(--ink-muted, #7187ab); font-size: .81rem; min-width: 10px; text-align: center; }
.totals-table th[aria-sort="ascending"] .totals-sort-arrow,
.totals-table th[aria-sort="descending"] .totals-sort-arrow { color: var(--cyan); }

/* Recuento anual de todas las actividades; visualmente independiente de distancia/tiempo. */
.totals-count-table { min-width: 995px; }
.totals-count-table tbody td.totals-count-cycling { font-weight: 800; color: var(--ink-strong, #d4f4ff); }
.totals-count-table tbody td.totals-count-grand { font-weight: 800; color: var(--ink-strong, #e6eeff); }
.totals-count-table thead th.totals-count-other-group { color: var(--ink-muted, #b8c5e5); }
.totals-subtitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 28px 0 12px;
}
.totals-subtitle h3 {
  font-size: .96rem;
  color: var(--txt);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.totals-subtitle span { color: var(--txt-faint); font-size: .76rem; }
/* Desglose de km por bicicleta y año: se amplía a medida que haya más años,
   con desplazamiento horizontal cuando las columnas no caben en pantalla. */
.totals-bike-scroll { scrollbar-color: #35406e var(--surface-inset, #0a0e1a); max-width: 100%; }
.totals-bike-table {
  width: 100%; min-width: 500px; table-layout: fixed;
  border-collapse: separate; border-spacing: 0; font-size: .79rem;
  font-variant-numeric: tabular-nums;
}
.totals-bike-table th {
  padding: 12px 9px;
  background: var(--surface-raised, #151d33);
  color: var(--txt-faint);
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  white-space: nowrap;
}
.totals-bike-table td {
  padding: 11px 9px;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
.totals-bike-table th:not(:first-child), .totals-bike-table td:not(:first-child) { text-align: right; }
.totals-bike-table th:first-child { width: 238px; }
.totals-bike-table th:nth-child(2) { width: 92px; }
.totals-bike-table th:nth-child(3) { width: 128px; }
.totals-bike-table th:nth-child(n+4) { min-width: 70px; }
.totals-bike-table td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-inset, #101525); color: var(--txt); font-weight: 600;
  max-width: 238px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 1px 0 0 var(--line);
}
.totals-bike-table thead th:first-child {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface-raised, #151d33); box-shadow: 1px 0 0 var(--line);
}
.totals-bike-table td:not(:first-child) { font-family: var(--mono); }
.totals-bike-table th.totals-bike-year-head { color: var(--ink-strong, #c1d8f8); }
/* Ordenación de todas las columnas: bicicleta, número, km totales y cada año. */
.totals-bike-table thead th[data-stats-bike-sort] { padding: 0; }
.totals-bike-table .totals-sort-btn {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: 5px; width: 100%; min-height: 39px; padding: 11px 8px;
  border: 0; background: transparent; color: inherit; font: inherit;
  text-transform: inherit; letter-spacing: inherit; white-space: nowrap;
  text-align: right; cursor: pointer;
}
.totals-bike-table thead th:first-child .totals-sort-btn {
  justify-content: flex-start; text-align: left; padding-left: 9px;
}
.totals-bike-table .totals-sort-btn:hover { background: rgba(34,211,238,.10); color: var(--ink-strong, #e6fbff); }
.totals-bike-table .totals-sort-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; border-radius: 4px; }
.totals-bike-table thead th[aria-sort="ascending"],
.totals-bike-table thead th[aria-sort="descending"] { background: var(--surface-raised, #253453); color: var(--ink-strong, #dffaff); }
.totals-bike-table .totals-sort-arrow { color: var(--ink-muted, #7187ab); font-size: .81rem; min-width: 10px; text-align: center; }
.totals-bike-table th[aria-sort="ascending"] .totals-sort-arrow,
.totals-bike-table th[aria-sort="descending"] .totals-sort-arrow { color: var(--cyan); }
.totals-bike-table td.totals-bike-year-empty { color: var(--ink-muted, #52617d); }
.totals-bike-table td.totals-bike-total { font-weight: 750; color: var(--ink-strong, #e4efff); }
.totals-bike-table tbody tr:hover td { background: var(--surface-raised, #1b2843); }
.totals-bike-table .totals-bike-unknown td { color: var(--txt-faint); }
.totals-bike-table tfoot td {
  color: var(--txt); font-weight: 800; background: var(--surface-raised, #1b2742);
  border-top: 2px solid rgba(34,211,238,.38);
}
.totals-bike-table tfoot td:first-child { z-index: 3; background: var(--surface-raised, #1b2742); }
@media(max-width: 560px) {
  .totals-bike-table th:first-child { width: 175px; }
  .totals-bike-table td:first-child { max-width: 175px; }
  .totals-bike-table th, .totals-bike-table td { padding-left: 7px; padding-right: 7px; }
}
.totals-message { padding: 20px; text-align: center; color: var(--txt-dim); }
.totals-scroll-hint { display: none; color: var(--cyan); font-size: .75rem; margin: 0 0 10px; }
.totals-note { color: var(--txt-faint); margin-top: 13px; font-size: .77rem; line-height: 1.6; }
@media(max-width:1450px) {
  .totals-scroll-hint { display: block; }
}
@media(max-width:1100px) and (min-width:761px) {
  .totals-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .totals-section { padding: 16px; }
  .totals-kpis { grid-template-columns: 1fr; gap: 9px; }
  .totals-kpi { padding: 11px 15px; }
  .totals-kpi-value { font-size: 1.45rem; }
}
@media(max-width:520px) {
  .hud-tabs { width: 100%; }
  .hud-tab { flex: 1; padding: 11px 9px; font-size: .75rem; }
}


/* Contraste de potencia de rodillo MyWhoosh frente al potenciómetro P715 */
.mywhoosh-calibration { background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.38); padding: 0 21px; margin-bottom: 18px; }
.mywhoosh-calibration summary { list-style: none; cursor: pointer; padding: 17px 3px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--txt);
  font-size: .89rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mywhoosh-calibration summary::-webkit-details-marker { display:none; }
.mywhoosh-calibration summary::before { content: '◈'; color: var(--cyan); font-size: 1.1rem; }
.mywhoosh-calibration summary::after { content: '▾'; color: var(--txt-dim); margin-left: auto; }
.mywhoosh-calibration[open] summary::after { content: '▴'; }
.mywhoosh-calibration .calibration-indicator { font-size: .67rem; color: var(--neon-3);
  border: 1px solid rgba(16,185,129,.3); border-radius: 8px; padding: 5px 8px;
  letter-spacing: .04em; text-transform: none; }
.mywhoosh-calibration .calibration-indicator.warn { color: var(--ink-amber, #f8c985); border-color: rgba(248,201,133,.25); }
.mywhoosh-calibration-body { padding: 0 2px 21px; }
.mywhoosh-calibration p { color: var(--txt-dim); font-size: .84rem; line-height: 1.6; }
.mywhoosh-calibration-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.mywhoosh-calibration-formula { font-family: var(--mono); border: 1px solid rgba(34,211,238,.2);
  background: rgba(34,211,238,.05); border-radius: 12px; padding: 12px 14px;
  color: var(--txt); font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.mywhoosh-calibration-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mywhoosh-calibration-metrics span { font: 600 .74rem var(--mono); color: var(--txt-mid);
  padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; }
.mywhoosh-calibration-plot { height: 330px; position: relative; margin-top: 14px; }
@media(max-width:600px){.mywhoosh-calibration{padding:0 12px;}.mywhoosh-calibration-plot{height:260px;}}

.icu-sync {margin: 8px 0 20px; padding: 17px; border: 1px solid rgba(34,211,238,.23); border-radius: 13px; background: rgba(34,211,238,.035)}
.icu-fields {display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:13px}
.icu-fields label {display:grid; gap:6px; color:var(--txt-dim); font-size:.77rem; font-weight:700}
.icu-fields input {border:1px solid var(--line-strong); border-radius:9px; color:var(--txt); background:var(--surface-inset, #0e1220); padding:10px; font: .85rem var(--mono)}
.icu-fields input[type=password] {width:min(360px,80vw)}
.icu-sync .section-title {font-size:.85rem; margin-bottom:12px}
.icu-preferences {display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:1px 0 12px;color:var(--txt-mid);font-size:.79rem}
.icu-preferences label {display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.icu-preferences input {accent-color:var(--cyan);width:16px;height:16px}
.icu-preferences button {padding:6px 10px;font-size:.7rem}
.icu-last-sync {color:var(--txt-dim);font-size:.77rem;line-height:1.5;margin:3px 0 8px}


/* Segmentos: pestaña independiente integrada en el HUD. */
.segment-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:14px 0}
.segment-toolbar label{display:grid;gap:5px;color:var(--txt-dim);font-size:.74rem;min-width:125px;flex:1}
.segment-toolbar select,.segment-toolbar input{min-width:0;width:100%;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-inset, #0e1220);color:var(--txt);padding:10px;font: .84rem var(--ui)}
.segment-map{height:350px;border-radius:12px;margin:12px 0 16px;background:var(--surface-raised, #101527);overflow:hidden;border:1px solid var(--line)}
.segment-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.segment-plot{height:270px;position:relative;margin:16px 0}
.segment-table{width:100%;min-width:930px;border-collapse:collapse;font-size:.79rem}
.segment-table th,.segment-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;color:var(--txt-mid)}
.segment-table th{background:var(--surface-raised, #151c30);color:var(--txt-dim)}
.loaded-files-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.loaded-files-heading #clearLoadedActivities{border-color:rgba(239,68,68,.38);color:var(--ink-red, #ffb1c1);font-size:.72rem;padding:7px 12px}
.segment-table .seg-sort{display:inline-flex;align-items:center;gap:6px;width:100%;border:0;padding:10px 4px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;white-space:nowrap}
.segment-table .seg-sort:hover{color:var(--ink-strong, #d4f8ff);background:rgba(34,211,238,.08)}
.segment-table .seg-sort:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.segment-table th[aria-sort="ascending"],.segment-table th[aria-sort="descending"]{background:var(--surface-raised, #263452);color:var(--ink-strong, #d4f8ff)}
.segment-table .seg-sort-arrow{color:var(--ink-muted, #7b8ba7)}
.segment-table th[aria-sort="ascending"] .seg-sort-arrow,.segment-table th[aria-sort="descending"] .seg-sort-arrow{color:var(--cyan)}
.segment-table .seg-activity-link{color:var(--ink-strong, #dcecff);text-decoration:none;font-weight:600}
.segment-table .seg-activity-link:hover{color:var(--cyan);text-decoration:underline}

.segment-table td:nth-child(4){font-weight:700;color:var(--cyan);font-family:var(--mono)}
@media(max-width:680px){.segment-kpis{grid-template-columns:repeat(2,1fr)}.segment-map{height:270px}.hud-tabs{flex-wrap:wrap}}

/* Theme palette: inherited by dialogs, fullscreen panels and dynamically added UI. */
:root {
  color-scheme: dark;
  --chart-text: #8b93b8;
  --chart-grid: rgba(255,255,255,.05);
  --chart-title: #6b7396;
  --chart-tooltip: rgba(10,14,26,.94);
  --chart-tooltip-title: #e6e9ff;
  --chart-tooltip-body: #c6cbe8;
  --brush-handle: #141931;
  --brush-mask: rgba(10,14,26,.62);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f5fb;
  --panel: rgba(255,255,255,.94);
  --panel-solid: #fff;
  --line: rgba(31,52,86,.14);
  --line-strong: rgba(31,52,86,.28);
  --txt: #17243b;
  --txt-mid: #30425e;
  --txt-dim: #4e607a;
  --txt-faint: #566781;
  --neon: #2563eb;
  --neon-2: #047857;
  --neon-3: #047857;
  --neon-4: #6d28d9;
  --cyan: #08738c;
  --surface-inset: #f7f9fd;
  --surface-raised: #eaf0f8;
  --surface-hover: rgba(31,52,86,.045);
  --ink-strong: #17243b;
  --ink-muted: #4e607a;
  --ink-blue: #2456a5;
  --ink-cyan: #086a80;
  --ink-green: #047857;
  --ink-red: #b42345;
  --ink-amber: #92500a;
  --chart-text: #4e607a;
  --chart-grid: rgba(31,52,86,.13);
  --chart-title: #4e607a;
  --chart-tooltip: rgba(255,255,255,.98);
  --chart-tooltip-title: #17243b;
  --chart-tooltip-body: #30425e;
  --brush-handle: #fff;
  --brush-mask: rgba(225,232,244,.70);
}
.header-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.header-right { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.app-version { font:600 .66rem var(--mono); color:var(--txt-faint); letter-spacing:.08em; }
.theme-control { display:flex; align-items:center; gap:8px; color:var(--txt-dim); font:600 .74rem var(--ui); }
.theme-control select { min-width:110px; width:auto; margin:0; padding:8px 10px; border:1px solid var(--line-strong); border-radius:9px; background:var(--panel-solid); color:var(--txt); font:600 .76rem var(--ui); cursor:pointer; }
.theme-control select:focus-visible { outline:2px solid var(--neon); outline-offset:3px; }
:root[data-theme="light"] h1 { background:linear-gradient(90deg,#17243b,#2456a5 60%,#a52d60); background-clip:text; -webkit-background-clip:text; text-shadow:none; }
:root[data-theme="light"] body { background:radial-gradient(ellipse at 88% 0%,rgba(109,40,217,.045),transparent 55%),var(--bg); }
:root[data-theme="light"] :is(.panel,.header,.drop-zone,.controls,.metrics-section,.map-container,.chart-card,.brush-section,.profile-section,.history-section,.totals-section,.mywhoosh-calibration) { box-shadow:0 8px 30px rgba(31,52,86,.08); }
:root[data-theme="light"] .activity-editor-dialog { background:var(--panel-solid); box-shadow:0 22px 70px rgba(31,52,86,.22); }
:root[data-theme="light"] .activity-editor-dialog::backdrop { background:rgba(31,45,68,.42); }
:root[data-theme="light"] .activity-editor-dialog .editor-actions .editor-save { background:#e3f3f8; color:#07566d; }
:root[data-theme="light"] .tiles-dark-filter .leaflet-tile { filter:none; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip { background:var(--panel-solid); color:var(--txt); border-color:var(--line-strong); }
.leaflet-popup-content-wrapper { box-shadow:0 3px 18px rgba(0,0,0,.2); }
.leaflet-container a.leaflet-popup-close-button { color:var(--txt-dim); }
:root[data-theme="light"] .leaflet-control-layers-toggle { filter:none; }
:root[data-theme="light"] .metric-value { text-shadow:none; }
:root[data-theme="light"] .single-activity-info { box-shadow:none; }
:root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color:var(--txt-faint); opacity:1; }
@media(max-width:560px) { .header-tools { width:100%; justify-content:space-between; gap:10px; } .header-right { width:100%; } }

/* Selector de segmentos con búsqueda por texto */
.seg-combo{position:relative;display:grid;gap:5px;flex:2;min-width:220px}
.seg-combo label{color:var(--txt-dim);font-size:.74rem}
.seg-combo input{min-width:0;width:100%;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-inset, #0e1220);color:var(--txt);padding:10px;font:.84rem var(--ui)}
.seg-combo input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.seg-options{position:absolute;top:100%;left:0;right:0;z-index:1500;margin:4px 0 0;padding:4px;list-style:none;max-height:320px;overflow-y:auto;background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.seg-options li{padding:8px 10px;border-radius:7px;color:var(--txt-mid);font-size:.82rem;cursor:pointer;overflow-wrap:anywhere}
.seg-options li[aria-selected="true"],.seg-options li:hover{background:rgba(34,211,238,.13);color:var(--txt)}
.seg-options li mark{background:none;color:var(--cyan);font-weight:700}
.seg-options li.seg-options-empty{cursor:default;color:var(--txt-faint);background:none}

/* Tabla de segmentos en la ficha individual */
.segment-activity-table { min-width: 760px; }
.segment-activity-table td:first-child { white-space: normal; min-width: 180px; }
.segment-activity-table .seg-activity-link { color: var(--ink-strong, #dcecff); text-decoration: none; font-weight: 600; }
.segment-activity-table .seg-activity-link:hover { color: var(--cyan); text-decoration: underline; }
.segment-activity-table tr.segment-best-row td { color: var(--ink-strong, #fff); }
.seg-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 4000; max-width: min(520px, calc(100% - 32px)); padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(34,211,238,.45); background: var(--panel-solid); color: var(--txt); font: 600 .84rem var(--ui); box-shadow: 0 12px 34px rgba(0,0,0,.4); }

/* Barra sobre la gráfica de evolución del segmento */
.segment-chart-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:16px 0 -6px}
.segment-type-filter{display:grid;gap:5px;color:var(--txt-dim);font-size:.74rem}
.segment-type-filter select{min-width:180px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-inset, #0e1220);color:var(--txt);padding:9px 10px;font:.84rem var(--ui)}
.segment-type-filter select:disabled{opacity:.6}
.segment-chart-bar #segCompareTop{margin-left:auto}
.segment-chart-bar #segCompareTop:disabled{opacity:.45;cursor:not-allowed}
.single-segments-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg-create-link { margin-top: 0 !important; text-decoration: none; display: inline-flex; align-items: center; }

/* Creador de segmentos: leyenda del mapa */
.segment-creator-legend{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.seg-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:2px solid #fff}
.seg-dot-start{background:#22c55e}.seg-dot-end{background:#ef4444}
.seg-line{display:inline-block;width:22px;height:4px;border-radius:2px;margin-right:4px;vertical-align:2px}
.seg-line-piece{background:#f97316}.seg-line-track{background:#7c8bb0}
.segment-creator-profile{position:relative;height:220px;margin:-4px 0 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface-inset, #0e1220);overflow:hidden}
#segCreatorProfile{display:block;width:100%;height:100%;touch-action:none;user-select:none;cursor:crosshair}
.seg-options li .seg-opt-id{color:var(--txt-faint);font-size:.74rem;margin-left:4px}
.segment-activity-table { min-width: 900px; }
.segment-activity-table tr.segment-record-row td { color: var(--txt-dim); font-size: .72rem; border-bottom-width: 2px; }
.segment-activity-table tr.segment-record-row td:first-child { padding-left: 18px; }
.segment-activity-table .seg-best-val { color: var(--txt-faint); font-size: .68rem; margin-left: 6px; font-weight: 500; }

/* Vista 3D (MapLibre GL) */
#map3d { height: 440px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-inset, #0a0e1a); }
#map3d.hidden, #map.hidden { display: none; }
.map-container.map-fullscreen #map3d { height: 100vh; border-radius: 0; }
.map3d-btn { right: 84px; font: 800 .85rem var(--mono); }
.map-container.map-fullscreen .map3d-btn { right: 66px; }
.map3d-btn[aria-pressed="true"] { border-color: var(--cyan); color: var(--ink-strong, #fff); box-shadow: 0 0 18px rgba(34,211,238,.35); }
.map3d-panel { position: absolute; top: 84px; right: 34px; z-index: 1200; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 260px; justify-content: flex-end; }
.map-container.map-fullscreen .map3d-panel { top: 66px; right: 16px; }
.map3d-panel.hidden { display: none; }
.map3d-base { border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface-inset, rgba(14,18,32,.9)); color: var(--txt-mid); padding: 7px 10px; font: 600 .74rem var(--ui); cursor: pointer; }
.map3d-base.active { border-color: var(--cyan); color: var(--ink-strong, #fff); }
.map3d-hint { width: 100%; text-align: right; font-size: .68rem; color: #e5e7eb; text-shadow: 0 1px 3px #000; }
.map3d-marker { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #0b0e1a; box-shadow: 0 0 0 2px #fff; }

/* Chip meteorológico del mapa (ficha individual), a la izquierda de ⛶ y 3D. */
.map-weather {
  position: absolute; top: 34px; right: 134px; z-index: 1200;
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface-inset, rgba(14, 18, 32, 0.9)); color: var(--txt);
  font: 600 1.05rem var(--ui); white-space: nowrap; cursor: default;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.map-weather.hidden { display: none; }
.map-container.map-fullscreen .map-weather { top: 16px; right: 116px; }

/* Mapa a pantalla completa (2D y 3D): la barra de reproducción del perfil se
   traslada abajo del mapa; leyenda y escalas suben para no quedar tapadas. */
.map-container.map-fullscreen .playback-bar.map-fs-playback {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1260;
  margin: 0; padding: 10px 14px;
  background: rgba(10, 14, 26, 0.86); border-color: rgba(174, 192, 238, 0.22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color-scheme: dark;
}
.map-container.map-fullscreen .playback-bar.map-fs-playback .playback-time { color: #eef2ff; }
.map-container.map-fullscreen .playback-bar.map-fs-playback .pb-btn { color: #d6ddf3; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); }
.map-container.map-fullscreen .playback-bar.map-fs-playback .pb-btn.play { color: #fff; border-color: rgba(59, 130, 246, 0.6); }
.map-container.map-fullscreen .playback-bar.map-fs-playback .pb-speed-label { color: #9ba8ca; }
.map-container.map-fullscreen .playback-bar.map-fs-playback select { background: #0e1220; color: #e5e7eb; border-color: rgba(255, 255, 255, 0.16); }
.map-container.map-fs-has-playback .map-metric-overlay { bottom: 92px; }
.map-container.map-fs-has-playback .leaflet-bottom,
.map-container.map-fs-has-playback .maplibregl-ctrl-bottom-left,
.map-container.map-fs-has-playback .maplibregl-ctrl-bottom-right { bottom: 78px; }

/* Etiqueta junto al punto de reproducción en el mapa (2D y 3D). Fondo oscuro
   semitransparente y letra pequeña para no tapar el trazado. */
.map-replay-label {
  pointer-events: none;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid var(--replay-accent, #3b82f6);
  border-radius: 7px;
  background: rgba(10, 14, 26, 0.68);
  color: #eef2ff;
  font: 600 .7rem/1.35 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.map-replay-label b { color: #9ba8ca; font-weight: 600; }
.leaflet-tooltip.map-replay-label {
  background: rgba(10, 14, 26, 0.68); color: #eef2ff;
  border: 1px solid rgba(255, 255, 255, 0.16); border-left: 3px solid var(--replay-accent, #3b82f6);
  padding: 4px 7px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.leaflet-tooltip.map-replay-label::before { display: none; }

/* Control de opacidad del mapa base: arriba en el centro, en todas las vistas del mapa. */
/* Discreto a propósito: más pequeño que el chip meteorológico y algo translúcido. */
.map-opacity {
  position: absolute; top: 34px; left: 50%; transform: translateX(-50%); z-index: 1200;
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-inset, rgba(14, 18, 32, 0.9));
  opacity: .85; transition: opacity .15s;
  color: var(--txt-dim); font: 600 .58rem var(--ui); letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.map-opacity:hover, .map-opacity:focus-within { opacity: 1; }
.map-opacity input { width: 80px; height: 12px; margin: 0; accent-color: var(--neon); cursor: pointer; }
.map-opacity output { min-width: 30px; text-align: right; color: var(--txt-mid); font: 600 .64rem var(--mono); text-transform: none; }
.map-container.map-fullscreen .map-opacity { top: 16px; }
@media (max-width: 900px) { .map-opacity label { display: none; } }

/* Perfil altimétrico en el mapa a pantalla completa: sobre la barra de reproducción,
   entre la leyenda (si está visible) y la escala/atribución. */
.map-fs-profile {
  display: none;
  position: absolute; left: 14px; right: 390px; bottom: 92px; height: 112px; z-index: 1250;
  border: 1px solid rgba(174, 192, 238, 0.18); border-radius: 10px;
  background: rgba(10, 14, 26, 0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.map-container.map-fs-has-playback .map-fs-profile:not([hidden]) { display: block; }
.map-container:has(.map-metric-overlay:not(.hidden)) .map-fs-profile { left: 346px; }
.map-fs-profile canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

/* Panel lateral fijo con las lecturas del punto de reproducción (pantalla completa). */
.map-replay-panel {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 1240;
  min-width: 152px; padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 3px solid var(--replay-accent, #3b82f6);
  border-radius: 10px;
  background: rgba(10, 14, 26, 0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  color: #eef2ff;
  font: 600 .74rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.map-replay-panel[hidden] { display: none; }
.map-replay-panel .profile-replay-label { color: #9ba8ca; }
.map-replay-panel .profile-replay-value { color: #eff6ff; }


/* Comentarios editables (Ver 0.15–0.16): una sola fila al lado del nombre, tipografía del «Origen». */
.activity-editor-dialog textarea { resize: vertical; min-height: 78px; line-height: 1.45; font-family: var(--ui); }
.single-activity-title-row { display: flex; align-items: baseline; gap: 14px; min-width: 0; margin: 3px 0 10px; }
.single-activity-title-row h2 { flex: 0 1 auto; max-width: 70%; margin: 0; }
.single-activity-comment, .metric-comment { display: flex; align-items: baseline; gap: 2px; flex: 1 1 0; min-width: 0;
  font-size: .72rem; color: var(--txt-faint); font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; }
.single-activity-comment-text, .metric-comment-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-title-edit-row h4 { flex: 0 1 auto; max-width: 70%; }
.metric-title-edit-row .metric-comment-edit { padding: 0 4px; font-size: .68rem; }
.single-comment-edit, .history-comment-edit { flex: none; border: 0; padding: 0 4px; background: transparent; cursor: pointer;
  color: var(--ink-muted, #8aa6d2); font: 600 .72rem/1.4 var(--ui); opacity: .6; transition: opacity .15s, color .15s; }
.single-comment-edit:hover, .single-comment-edit:focus-visible,
.history-comment-edit:hover, .history-comment-edit:focus-visible { opacity: 1; color: var(--ink-strong, #fff); }
.history-table .history-comment-edit { margin-left: auto; }
.history-table tr:not(:hover) .history-comment-edit:not(:focus-visible) { opacity: 0; }
.metric-card-header > div:last-child { flex: 1 1 auto; min-width: 0; }

/* ===== 0.51: archivos sueltos «Por cargar» y sincronización del comparador ===== */
.staged-files { margin: -6px 0 18px; padding: 12px 14px; border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 14px; background: var(--surface-hover, rgba(255, 255, 255, 0.03)); }
.staged-files.hidden { display: none; }
.staged-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.staged-head strong { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt); }
.staged-head span { font-size: 0.8rem; color: var(--txt-dim); }
.staged-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.staged-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 10px; }
.staged-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--txt-mid); }
.staged-meta { flex: 0 0 auto; font-family: var(--mono); font-size: 0.74rem; color: var(--txt-dim); }
.staged-remove { width: 24px; height: 24px; font-size: 0.8rem; }
body.movil .staged-files { display: none; }

/* 0.51.1: sincronización en «Perfil de la ruta · reproducción» (#profileSync), una fila por actividad (hasta 3) */
.profile-sync { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; margin-bottom: 10px; background: var(--surface-hover, rgba(255, 255, 255, 0.028)); border: 1px solid var(--line); border-radius: 14px; }
.profile-sync.hidden { display: none; }
.profile-sync-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.profile-sync-head strong { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt); }
.profile-sync-ref, .profile-sync-name { display: flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--mono); font-size: 0.78rem; color: var(--txt-dim); }
.profile-sync-name { color: var(--txt-mid); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-sync-name > span:last-child, .profile-sync-ref > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.profile-sync-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas: "name km t reset gps"; align-items: center; gap: 6px 14px; }
.profile-sync-name { grid-area: name; }
.profile-sync-row .sync-km { grid-area: km; }
.profile-sync-row .sync-t { grid-area: t; }
.profile-sync-row .file-sync-reset { grid-area: reset; }
.profile-sync-row .file-sync-gps { grid-area: gps; }
.profile-sync .color-dot { width: 9px; height: 9px; }
@media (max-width: 900px) {
  .profile-sync-row { grid-template-columns: auto auto auto 1fr; grid-template-areas: "name name name name" "km t reset gps"; gap: 4px 12px; }
  .profile-sync-row .file-sync-gps { justify-self: start; }
}
body.movil .profile-sync { padding: 8px; }
body.movil .profile-sync-row { grid-template-columns: auto 1fr; grid-template-areas: "name name" "km reset" "t gps"; gap: 4px 10px; padding-top: 4px; }
body.movil .profile-sync-row .file-sync-reset { justify-self: start; }
body.movil .profile-sync-row .file-sync-gps { justify-self: stretch; }
.file-sync-row { display: flex; align-items: center; gap: 4px; }
.file-sync-step, .file-sync-reset { width: 26px; height: 26px; border: 1px solid rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.10); color: var(--ink-strong, #bcd0ff); border-radius: 8px; cursor: pointer; font-weight: 700; line-height: 1; padding: 0; }
.file-sync-step:hover, .file-sync-reset:hover:not(:disabled) { background: rgba(59, 130, 246, 0.25); }
.file-sync-reset { margin-left: 4px; }
.file-sync-reset:disabled { opacity: 0.35; cursor: default; }
.file-sync-input { width: 78px; padding: 4px 6px; text-align: right; font-family: var(--mono); font-size: 0.8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-inset, #0e1220); color: var(--txt); }
.file-sync-unit { font-family: var(--mono); font-size: 0.72rem; color: var(--txt-dim); margin-left: 2px; }
.file-sync-gps { padding: 5px 10px; font-size: 0.72rem; }
.file-sync-gps:disabled { opacity: 0.4; cursor: default; }
body.movil .file-sync-input { font-size: 16px; width: 92px; } /* iOS no amplía al tocar */


/* ===== 0.51.2 (0.51.3: símbolo con plato, 52 px) · Logo de KimeQ en la cabecera (SVG en línea en el h1; colores por tema) ===== */
h1.brand-title { --kq-ink: #e6e9ff; --kq-acc: #22d3ee; color: var(--kq-ink); background: none; -webkit-background-clip: border-box; background-clip: border-box;
  text-shadow: none; line-height: 0; margin-bottom: 10px; letter-spacing: 0; text-transform: none; }
:root[data-theme="light"] h1.brand-title { --kq-ink: #17243b; --kq-acc: #0891b2; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--kq-ink); }
.kq-logo { display: block; height: 52px; width: auto; overflow: visible; }
.kq-logo .kq-acc-s { stroke: var(--kq-acc); }
.kq-logo .kq-acc-f { fill: var(--kq-acc); }