/* Athlos II — hoja única.
 *
 * Los colores salen de una paleta ya validada (banda de luminosidad, suelo de
 * croma, separación bajo daltonismo y contraste contra la superficie). El modo
 * oscuro NO es una inversión automática: son pasos elegidos de las mismas
 * rampas para la superficie oscura. Si tocas un color, revalida la rampa antes
 * de darlo por bueno.
 *
 * La rampa del sueño es ordinal (una sola tinta, profundo → despierto): las
 * fases tienen orden natural, así que no se gastan cuatro tintas distintas en
 * algo que ya es una escala.
 */

:root {
  color-scheme: light dark;

  --surface:      #fcfcfb;   /* tarjetas */
  --plane:        #f9f9f7;   /* fondo de página */
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --ink-muted:    #898781;
  --hairline:     #e1e0d9;
  --border:       rgba(11, 11, 11, .10);

  --accent:       #2a78d6;
  --accent-track: #cde2fb;   /* paso claro de la MISMA rampa que --accent */

  --sleep-deep:   #104281;
  --sleep-rem:    #1c5cab;
  --sleep-light:  #3987e5;
  --sleep-awake:  #86b6ef;

  /* Una tinta por persona en la gráfica de peso. Azul y naranja: el par pasa
   * los seis controles con holgura en los dos modos (peor ΔE bajo daltonismo
   * 24.7 en claro y 26.8 en oscuro, muy por encima del 8 exigido). El orden es
   * fijo por persona, nunca por posición: si un día se filtra a uno solo, el
   * que queda conserva su color. */
  --serie-1:      #2a78d6;
  --serie-2:      #eb6834;

  --radius:       14px;
  --gap:          clamp(.75rem, 1.6vw, 1.25rem);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:      #1a1a19;
    --plane:        #0d0d0d;
    --ink:          #ffffff;
    --ink-2:        #c3c2b7;
    --ink-muted:    #898781;
    --hairline:     #2c2c2a;
    --border:       rgba(255, 255, 255, .10);

    --accent:       #3987e5;
    --accent-track: #104281;

    /* Invertida respecto al modo claro: aquí "más profundo" es más claro,
     * porque es lo que más contrasta contra una superficie oscura. */
    --sleep-deep:   #b7d3f6;
    --sleep-rem:    #86b6ef;
    --sleep-light:  #5598e7;
    --sleep-awake:  #256abf;

    /* Los mismos dos tonos, escalonados para la superficie oscura. No es una
     * inversión: son los pasos que la rampa da en esa banda de luminosidad. */
    --serie-1:      #3987e5;
    --serie-2:      #d95926;
  }
}

* { box-sizing: border-box; }

/* Un `display` propio gana al atributo `hidden`, que solo trae el display:none
 * del navegador. Sin esto, ocultar el panel del día no lo oculta: .board tiene
 * `display: grid` y se queda a la vista con el calendario debajo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--plane);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

button, select, input { font: inherit; }


/* ---------------------------------------------------------------- login */

body.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 1.5rem;
}

.card {
  width: min(92vw, 380px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
}

.card h1 { font-size: 1.15rem; margin: 0 0 .35rem; }

/* El logotipo hace de título: dice de qué es esto mejor que una línea de texto,
 * y es lo primero que se ve al abrir la app instalada.
 *
 * Sin filtros ni modos de fusión: el PNG trae su propio fondo gris con
 * sombras, y cualquier intento de fundirlo con la tarjeta acaba tocando los
 * colores de la marca — invertirlo para el modo oscuro dejaba la P en blanco y
 * los guijarros cambiados. Se trata como lo que es, una placa, y se le redondean
 * las esquinas para que no parezca un recorte olvidado. */
.logotipo {
  display: block;
  width: min(200px, 58%);
  height: auto;
  margin: -.6rem auto 1rem;
  border-radius: 16px;
}
.card .sub { font-size: .88rem; color: var(--ink-2); margin: 0 0 1.5rem; }

.card label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 1rem 0 .35rem;
}

.card select,
.card input {
  width: 100%;
  padding: .6rem .7rem;
  color: var(--ink);
  background: var(--plane);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.card button[type="submit"] {
  width: 100%;
  margin-top: 1.5rem;
  padding: .68rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.card button[type="submit"]:hover { filter: brightness(.92); }

.err {
  margin: 0 0 1rem;
  padding: .55rem .7rem;
  font-size: .85rem;
  color: #d03b3b;                        /* status: critical */
  background: rgba(208, 59, 59, .10);
  border: 1px solid rgba(208, 59, 59, .35);
  border-radius: 9px;
}


/* -------------------------------------------------------------- armazón */

body.app {
  display: grid;
  grid-template-rows: auto 1fr auto;   /* la barra y el pie fijos; el panel scrollea */
  height: 100dvh;
  overflow: hidden;
}

/* El SVG con los dibujos no ocupa sitio: solo guarda las formas que luego
 * clonan los <use>. Sin esto dejaría una franja en blanco arriba del todo. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.topbar {
  position: relative;          /* ancla el navegador de días */
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: .55rem var(--gap);
  padding-top: max(.55rem, env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.quien {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

/* El icono de la app. Sin filtros ni modos de fusión: el PNG trae su propio
 * fondo con sombras, así que se trata como una placa y se le redondean las
 * esquinas. Invertirlo en modo oscuro cambiaría los colores de la marca. */
.quien .marca {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.viewer {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Centrado en la barra de verdad, no repartiendo el hueco entre los lados: el
 * icono ocupa 30 px y las herramientas de la derecha bastante más, así que con
 * `flex: 1` a cada lado la fecha quedaría descentrada por la diferencia. Se
 * saca del flujo y se ancla al 50% de la barra, que es el único sitio que no
 * depende de lo que haya a los costados. */
.datenav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .1rem;
}

.tools {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .15rem;
}

.inline { display: contents; }

/* Un botón que es solo un icono. Cuadrado, del tamaño mínimo que se puede
 * pulsar con el dedo sin fallar (44 px es la recomendación de Apple y de
 * Android; por debajo la gente pulsa al lado). */
.icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.icono svg { width: 21px; height: 21px; }
.icono:hover { background: var(--plane); color: var(--ink); }
.icono:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Mientras se baja algo, el icono de refrescar gira. Es la única señal de que
 * está pasando algo cuando el panel ya tiene datos viejos en pantalla. */
.icono.girando svg { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.date {
  min-height: 36px;
  /* Sin esto, en un móvil estrecho «10 de agosto» parte en dos líneas y la
   * barra entera crece de alto en vez de avisar de que no cabe. */
  white-space: nowrap;
  min-width: 9.5rem;
  padding: .35rem .7rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--plane);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-align: center;
  cursor: pointer;
}

.date:hover { border-color: var(--accent); }


/* --------------------------------------------------- la barra de abajo */

/* La navegación entre secciones. En el móvil es la barra de abajo entera —el
 * pulgar llega a todos los destinos—; en pantalla ancha se queda como una fila
 * de pastillas a la izquierda, sin la pestaña del chat, que allí está siempre
 * a la vista y no es un sitio al que ir.
 *
 * Estuvo oculta en ancho durante un tiempo y con ella se perdían Peso y
 * Cumbres: solo se llegaba a Agenda, y por la tecla `c`. */
.tabbar {
  display: flex;
  align-items: stretch;
  gap: .1rem;
  padding: .3rem .4rem;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.tab svg { width: 22px; height: 22px; }
.tab span { white-space: nowrap; }
.tab.activa { color: var(--accent); }

@media (min-width: 901px) {
  /* Pastillas, no columnas: aquí no hay que repartir el ancho de un móvil. */
  .tabbar { justify-content: flex-start; gap: .2rem; }
  .tab { flex: none; flex-direction: row; gap: .4rem; padding: .3rem .75rem;
         font-size: .78rem; }
  .tab svg { width: 18px; height: 18px; }
  .tab:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .tab.activa { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  /* El chat vive fijo a la derecha: como destino no significa nada. */
  .tab[data-vista="chat"] { display: none; }
  .tabbar .lupa { display: none; }
}

@media (max-width: 900px) {
  /* En el flujo, no flotando. Es una fila más del armazón —body.app es una
   * rejilla y esta es su última fila—, así que ocupa exactamente lo que mide y
   * el resto del contenido se encoge solo.
   *
   * Flotando hacía falta reservarle sitio con un alto escrito a mano, y ese
   * número no puede ser correcto: en un iPhone la barra le suma el hueco del
   * indicador de inicio (unos 34 px más) y en un Android no. El resultado era
   * que el cuadro de escribir del chat se quedaba medio tapado.
   *
   * No se pierde nada por no ser fija: lo que se desplaza son las áreas de
   * contenido, cada una con su propio scroll, no la página. */
  .tabbar { padding-bottom: max(.3rem, env(safe-area-inset-bottom)); }

  .tab {
    flex: 1;
    flex-direction: column;
    gap: .12rem;
    padding: .3rem .1rem;
    font-size: .64rem;
  }

  /* La lupa no es una sección: es una acción, y se distingue por la forma
   * —redonda y con fondo— para que no se lea como una quinta pestaña. */
  .lupa {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: .2rem;
    align-self: center;
    color: var(--ink);
    background: var(--plane);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
  }

  .lupa svg { width: 21px; height: 21px; }
  .lupa:active { background: var(--accent-track); }
}

.statusbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem var(--gap);
  padding-bottom: max(.4rem, env(safe-area-inset-bottom));
  font-size: .75rem;
  color: var(--ink-muted);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

/* El gasto no se recorta nunca: es la cifra que importa. El que cede es el
 * mensaje de estado, que se puede leer a medias sin perder nada. */
.gasto { flex: none; white-space: nowrap; }

#status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Datos a la izquierda, entrenador a la derecha. */
.contenido {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 30%);
  min-height: 0;               /* sin esto los hijos no pueden scrollear */
  overflow: hidden;
}

/* El día, el calendario y el peso se alternan dentro de esta columna. */
.principal {
  position: relative;          /* ancla la cinta de tirar para refrescar */
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* min-width: 0 es imprescindible: por defecto un hijo flex no encoge por
 * debajo de su contenido, y sin eso el scroll horizontal de la rejilla no
 * llega a activarse nunca — desborda la página entera. */
.principal > .vista { flex: 1; min-height: 0; min-width: 0; }


/* ------------------------------------------- tirar para refrescar */

/* La cinta aparece por arriba mientras arrastras y se queda girando mientras
 * baja. Se mueve con `transform` y no con `top`: así el navegador lo resuelve
 * en la GPU y el gesto no se entrecorta. */
.tirador {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  opacity: 0;
  transform: translateY(-48px);
  pointer-events: none;
}

.tirador svg { width: 19px; height: 19px; }

/* Mientras se arrastra, el JS pone la posición a mano y no debe haber
 * transición: la cinta tiene que seguir al dedo. Al soltar se le devuelve. */
.tirador.suelto { transition: transform .25s ease, opacity .25s ease; }
.tirador.cargando svg { animation: girar 1s linear infinite; }


/* --------------------------------------------------------------- panel */

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-content: start;
  gap: var(--gap);
  padding: var(--gap);
  overflow-y: auto;
  transition: opacity .15s ease;
}

/* Al recargar se mantiene lo anterior atenuado: sin esqueletos ni saltos. */
.board[aria-busy="true"]:not(:has(.placeholder)) { opacity: .55; }

.placeholder {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2rem 0;
  text-align: center;
  color: var(--ink-muted);
}

.person {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.15rem 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.person > h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
}


/* --------------------------------------------------------------- tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem .9rem;
}

.tile { min-width: 0; }
.tile.wide { grid-column: 1 / -1; }

.tile .label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.tile .value {
  margin-top: .15rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  /* Cifras proporcionales a propósito: tabular-nums deja sueltos los números
   * grandes. Se reserva para las columnas de la tabla de entrenos. */
}

.tile .value .unit {
  margin-left: .12em;
  font-size: .58em;
  font-weight: 500;
  color: var(--ink-2);
}

.tile .value.empty { color: var(--ink-muted); font-weight: 500; }

.tile .meta {
  margin-top: .2rem;
  font-size: .76rem;
  color: var(--ink-2);
}


/* ------------------------------------------------- medidor Body Battery */

.meter {
  height: 8px;
  margin: .5rem 0 .35rem;
  background: var(--accent-track);   /* paso claro de la misma rampa */
  border-radius: 4px;
  overflow: hidden;
}

.meter > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}


/* Pasarse del objetivo no es lo mismo que quedarse corto, así que se marca en
 * vez de dejar la barra llena y ya: el estado «serious» de la paleta, con la
 * cifra al lado para que el color nunca sea el único canal. */
.meter.pasado > i { background: #ec835a; }
.meter.fino { height: 5px; margin: .25rem 0 0; }


/* --------------------------------------------------------------- comida */

.comida .tile { margin-top: .2rem; }

.macros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .55rem .9rem;
  margin: .7rem 0 .2rem;
}

.macro-cab {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .74rem;
}

.macro-nombre { color: var(--ink-muted); font-weight: 600; }
.macro-cifra { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.comida table { margin-top: .8rem; }


/* -------------------------------------------------- fases del sueño */

.phases {
  display: flex;
  gap: 2px;                 /* separa con el fondo, no con bordes */
  height: 10px;
  margin: .55rem 0 .5rem;
}

.phases > i { display: block; min-width: 2px; }
.phases > i:first-child { border-radius: 4px 0 0 4px; }
.phases > i:last-child  { border-radius: 0 4px 4px 0; }

.phases > i.deep  { background: var(--sleep-deep); }
.phases > i.rem   { background: var(--sleep-rem); }
.phases > i.light { background: var(--sleep-light); }
.phases > i.awake { background: var(--sleep-awake); }

/* La leyenda lleva los valores, así que el color nunca es el único canal:
 * quien no distinga las tintas lee igualmente los minutos de cada fase. */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .9rem;
  font-size: .74rem;
  color: var(--ink-2);
}

.legend > span { display: inline-flex; align-items: center; gap: .35rem; }

.legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.legend b { font-weight: 600; color: var(--ink); }


/* ------------------------------------------------------------- entrenos */

.acts h3 {
  margin: 0 0 .5rem;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.acts table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.acts td {
  padding: .38rem 0;
  border-top: 1px solid var(--hairline);
  vertical-align: baseline;
}

.acts tr:first-child td { border-top: 0; }

.acts .sport { font-weight: 600; }
.acts .name  { color: var(--ink-2); }

.acts .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* aquí sí: son columnas alineadas */
  color: var(--ink-2);
  /* Sin esto, dos columnas numéricas seguidas se pegan y se lee «595 kcal67». */
  padding-left: .8rem;
}

.acts .none { margin: 0; font-size: .82rem; color: var(--ink-muted); }


/* ------------------------------------------------------------- avisos */

.warnings {
  margin: 0;
  padding: .6rem .7rem;
  list-style: none;
  font-size: .74rem;
  color: var(--ink-2);
  background: var(--plane);
  border: 1px solid var(--hairline);
  border-radius: 9px;
}

.warnings li + li { margin-top: .25rem; }


/* ---------------------------------------------------------- calendario */

.calendario {
  overflow-y: auto;
  padding: var(--gap);
}

.semana { min-width: 0; }
.semana + .semana { margin-top: 1.5rem; }

.semana > h2 {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Siete columnas siempre. Cuando no caben, la rejilla scrollea sola en
 * horizontal: lo que nunca puede pasar es que scrollee la página entera. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  gap: 2px;                       /* separa con el fondo, no con bordes */
  overflow-x: auto;
  padding-bottom: 2px;
}

/* Es un <button>: se puede pulsar para ver el día entero, y así funciona
 * también con teclado sin inventar nada. */
.dia {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-height: 6.5rem;
  padding: .45rem .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dia:hover { border-color: var(--accent); }
.dia:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* --------------------------------------------------- hojas emergentes */

/* El detalle de un día y el buscador. Mismo cuerpo: en pantalla ancha una
 * ventana centrada; en el móvil, una hoja pegada abajo, que es donde llega la
 * mano. */
.hoja {
  width: min(94vw, 560px);
  max-height: 85dvh;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .18);
}

.hoja::backdrop { background: rgba(0, 0, 0, .45); }

.hoja > header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .7rem .7rem 1.15rem;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.hoja h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
}

/* El icono de la app junto al título. El PNG trae su propio fondo con sombras,
 * así que se trata como una placa: se le redondean las esquinas y no lleva
 * filtros — invertirlo en modo oscuro cambiaría los colores de la marca. */
.hoja .marca {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

/* Solo la primera letra. `text-transform: capitalize` pone mayúscula en cada
 * palabra y deja cosas como «Viernes, 14 De Agosto» o «45 Min». */
.hoja h2::first-letter,
.ficha-meta::first-letter { text-transform: uppercase; }

.hoja > div { padding: 1rem 1.15rem 1.25rem; overflow-y: auto; }

/* El tamaño de letra del detalle, en un sitio y no en veinte: las medidas de
 * dentro de la ficha van en `em`, así que subir esto lo sube todo junto y en
 * proporción —letra, huecos y sangrados—. `--letra` la pone el JS. */
#detalle-cuerpo { font-size: calc(1rem * var(--letra, 1)); }

/* Dos botones pegados, como los de las capas del mapa. La «A» dice de qué van
 * sin gastar una palabra, que en la cabecera no cabe. */
.letra {
  flex: none;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.letra button {
  padding: .3rem .5rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-2);
  background: var(--surface);
  border: 0;
  cursor: pointer;
}
.letra button + button { border-left: 1px solid var(--border); font-size: 1rem; }
.letra button:hover:not(:disabled) { background: var(--plane); color: var(--ink); }
/* Al llegar al tope el botón se queda, pero apagado: quitarlo movería el otro
 * de sitio justo cuando lo estás pulsando. */
.letra button:disabled { color: var(--ink-muted); opacity: .5; cursor: default; }

/* Dos formas para dos trabajos.
 *
 * El buscador se queda como hoja pegada abajo: sale con el teclado delante y
 * conviene seguir viendo por encima de qué estabas mirando.
 *
 * El detalle de un día es para leer —un circuito entero con sus seis
 * ejercicios y el motivo— así que ocupa la pantalla. En media pantalla el
 * texto acaba en una ventanita con scroll propio dentro de otra que también
 * scrollea, que es justo lo que no se quiere para leer. */
@media (max-width: 640px) {
  .hoja {
    width: 100vw;
    max-width: none;
    max-height: 88dvh;
    margin: auto auto 0;          /* pegada abajo */
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }

  .hoja.completa {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  /* El hueco de la barra de estado del móvil: sin esto el título se mete
   * debajo de la hora y del notch. */
  .hoja.completa > header { padding-top: max(.7rem, env(safe-area-inset-top)); }

  /* El cuerpo ocupa lo que queda y scrollea él, no el diálogo entero: así la
   * cabecera con el icono y la cruz se quedan siempre a la vista.
   *
   * El `[open]` es obligatorio. Un <dialog> cerrado se oculta con la regla
   * `dialog:not([open]) { display: none }` del navegador, que tiene menos
   * especificidad que `.hoja.completa`: sin acotarlo, este display lo dejaría
   * plantado sobre la pantalla incluso cerrado, tapándolo todo. */
  .hoja.completa[open] {
    display: flex;
    flex-direction: column;
  }

  .hoja.completa > div {
    flex: 1;
    min-height: 0;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}


/* ------------------------------------------------------------ buscador */

.campo-buscar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .1rem .7rem;
  color: var(--ink-muted);
  background: var(--plane);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.campo-buscar svg { flex: none; width: 18px; height: 18px; }

.campo-buscar input {
  flex: 1;
  min-width: 0;
  padding: .5rem 0;
  font-size: .9rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

/* Safari le pone una cruz propia y un aspecto de campo de iOS que no encaja. */
.campo-buscar input::-webkit-search-decoration,
.campo-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; }

.resultados { display: flex; flex-direction: column; gap: .1rem; }

.resultado {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  width: 100%;
  padding: .6rem .3rem;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
}

.resultado:first-child { border-top: 0; }
.resultado:hover { background: var(--plane); }

.resultado .fecha {
  flex: none;
  width: 4.2rem;
  font-size: .72rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.resultado .cuerpo { flex: 1; min-width: 0; }

.resultado .titulo {
  font-size: .88rem;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}

.resultado .titulo::first-letter { text-transform: uppercase; }

/* Una etiqueta pequeña dice de quién es y si está hecho o pendiente. El color
 * no va solo: siempre lleva la palabra. */
.marca-persona {
  flex: none;
  padding: .05rem .4rem;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.marca-persona.p1 { color: var(--serie-1); }
.marca-persona.p2 { color: var(--serie-2); }

.resultado .detalles {
  margin-top: .12rem;
  font-size: .76rem;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resultado .cifras {
  margin-top: .15rem;
  font-size: .72rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.resultado.plan .titulo { font-weight: 600; }
.resultado.plan .fecha::after {
  content: " plan";
  display: block;
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}


/* -------------------------------------------------- evolución del peso */

.peso { overflow-y: auto; padding: var(--gap); }

.rangos {
  display: flex;
  gap: .3rem;
  margin-bottom: var(--gap);
}

.rango {
  padding: .35rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.rango.activo {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.grafico {
  padding: 1.15rem 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.grafico > h2 {
  margin: 0 0 .15rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.grafico > .sub {
  margin: 0 0 1rem;
  font-size: .78rem;
  color: var(--ink-muted);
}

/* La leyenda va siempre que haya dos series: la identidad no puede depender
 * solo del color. */
.leyenda-serie {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  margin: 0 0 .9rem;
  font-size: .78rem;
  color: var(--ink-2);
}

.leyenda-serie > span { display: inline-flex; align-items: center; gap: .4rem; }

.leyenda-serie i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.leyenda-serie .s1 { color: var(--serie-1); }
.leyenda-serie .s2 { color: var(--serie-2); }
.leyenda-serie b { font-weight: 600; color: var(--ink); }

/* El lienzo se estira al ancho disponible y guarda su proporción. */
.lienzo { display: block; width: 100%; height: auto; overflow: visible; }

.eje { stroke: var(--hairline); stroke-width: 1; }
.eje-texto { fill: var(--ink-muted); font-size: 10px; font-variant-numeric: tabular-nums; }

/* La media móvil es la línea que se lee; las pesadas sueltas son puntos
 * tenues detrás, porque el peso de un día concreto no dice gran cosa. */
.linea { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* El dato en bruto: fino y tenue. La línea que se lee es la media; esta está
 * para que se vea de dónde sale y cuánto oscila. */
.linea-real { fill: none; stroke-width: 1; opacity: .42; }

/* La proyección, a trazos y más clara: es una recta prolongada, no un dato. */
.proyeccion {
  fill: none; stroke-width: 2; stroke-dasharray: 5 4;
  stroke-linecap: round; opacity: .55;
}
.etiqueta-proyeccion { font-size: .68rem; font-weight: 600; opacity: .8; }
.punto { r: 2.5; opacity: .38; }

/* Un anillo del color de la superficie separa los puntos que se solapan. */
.punto-fin { r: 4.5; stroke: var(--surface); stroke-width: 2; }

/* Una pesada aislada entre dos huecos: no da línea, así que se dibuja ella
 * sola o se perdería del gráfico. */
.punto-solo { r: 3.5; stroke: var(--surface); stroke-width: 1.5; }

.etiqueta-fin {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.s1 .linea, .s1 .linea-real, .s1 .proyeccion, .s1 .punto, .s1 .punto-fin,
.s1 .punto-solo, .s1 .etiqueta-proyeccion { stroke: var(--serie-1); fill: var(--serie-1); }
.s1 .linea, .s1 .linea-real, .s1 .proyeccion { fill: none; }
.s1 .etiqueta-proyeccion { stroke: none; }
.s2 .linea, .s2 .linea-real, .s2 .proyeccion, .s2 .punto, .s2 .punto-fin,
.s2 .punto-solo, .s2 .etiqueta-proyeccion { stroke: var(--serie-2); fill: var(--serie-2); }
.s2 .linea, .s2 .linea-real, .s2 .proyeccion { fill: none; }
.s2 .etiqueta-proyeccion { stroke: none; }
.s1 .muestra-pesada, .s1 .muestra-tendencia, .s1 .muestra-proyeccion { color: var(--serie-1); }
.s2 .muestra-pesada, .s2 .muestra-tendencia, .s2 .muestra-proyeccion { color: var(--serie-2); }

/* Nombre a la izquierda, cifra grande a la derecha. La cifra es la media, no
 * la última pesada: es la que responde a «cuánto peso». */
.cabecera-peso {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .8rem;
}

.cabecera-peso h2 { flex: 1; min-width: 0; }

.cabecera-peso .actual {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.cabecera-peso .actual .unit {
  margin-left: .12rem;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.cabecera-peso .cambio {
  flex-basis: 100%;
  font-size: .78rem;
  color: var(--ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* La flecha acompaña al color, nunca al revés: bajar y subir se distinguen
 * por el símbolo aunque no se vea el tono. */
/* Las dos cifras, cada una con su nombre encima. Antes había una sola y al
 * pasar el dedo salía otra distinta sin decir de qué era. */
.cifras-peso { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.cifra-peso { display: flex; flex-direction: column; gap: .05rem; }
.cifra-peso .etiqueta {
  font-size: .68rem; letter-spacing: .03em; color: var(--ink-muted); white-space: nowrap;
}
.cifra-peso .valor {
  font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cifra-peso .valor .unit {
  font-size: .8rem; font-weight: 500; color: var(--ink-muted); margin-left: .12rem;
}
/* La pesada suelta es el dato menos útil de los dos: se enseña, pero no compite
 * con la tendencia por la mirada. */
.cifra-peso.apagada .valor { font-size: 1.15rem; font-weight: 600; color: var(--ink-2); }

.leyenda-peso {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem 1rem;
  margin: -.6rem 0 .5rem; font-size: .74rem; color: var(--ink-2);
}
.leyenda-item { display: inline-flex; align-items: center; gap: .35rem; }
.muestra { display: inline-block; width: 1.1rem; height: 0; flex: none; }
.muestra-pesada {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor; opacity: .5;
}
.muestra-tendencia { border-top: 2px solid currentColor; }
.muestra-proyeccion { border-top: 2px dashed currentColor; opacity: .6; }
.leyenda-nota { color: var(--ink-muted); }

.ver-proyeccion {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-left: auto; cursor: pointer; white-space: nowrap;
}
.ver-proyeccion input { accent-color: var(--accent); width: .95rem; height: .95rem; }

.pie-proyeccion {
  margin: .5rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--ink-muted);
  max-width: 62ch;
}

.guia-media { fill: var(--ink-muted); font-weight: 400; }

.cabecera-peso .cambio.baja { color: #0ca30c; }
.cabecera-peso .cambio.sube { color: #c2410c; }

/* La guía que sigue al dedo. El texto lleva un halo del color del fondo con
 * `paint-order`, así se lee por encima de la línea sin una caja detrás. */
.guia { pointer-events: none; }

.guia-linea {
  stroke: var(--ink-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.guia-texto {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--ink);
  stroke: var(--surface);
  stroke-width: 3.5;
  paint-order: stroke;
}

.lienzo { touch-action: pan-y; }

.sin-datos {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.ficha {
  padding-left: .7em;
  border-left: 5px solid var(--accent);
  margin-bottom: 1.2em;
}

.ficha.completado { border-left-color: #0ca30c; }
.ficha.saltado    { border-left-color: #d03b3b; }
.ficha.cancelado  { border-left-color: var(--ink-muted); }

.ficha h3 { margin: 0 0 .2em; font-size: .92em; font-weight: 600; }

.ficha-meta {
  margin: 0 0 .5em;
  font-size: .75em;
  color: var(--ink-muted);
}

.ficha-texto p { margin: 0 0 .4em; font-size: .85em; line-height: 1.5; }

.ficha-etiqueta {
  margin: .8em 0 .2em;
  font-size: .72em;
  font-weight: 600;
  color: var(--ink-muted);
}

.ficha-motivo {
  margin: 0;
  font-size: .82em;
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
}

.ficha-hecho { margin: 0 0 .3em; font-size: .85em; }

/* --- las cargas del gimnasio --- */
/*
 * Todo va en `em` como el resto de la ficha: los botones A−/A+ de la cabecera
 * suben la letra Y las casillas juntas. Una casilla que se queda pequeña
 * mientras el texto crece es exactamente lo que no sirve con presbicia.
 *
 * Las medidas de toque no bajan de 2,2em de alto: esto se pulsa de pie, con el
 * pulgar y con las manos sudadas.
 */

.ejercicio {
  margin: 0 0 .6em;
  padding: .5em .6em .55em;
  background: var(--plane);
  border-radius: 10px;
}

/* Con dibujo, dos columnas: el dibujo a la izquierda y el texto con sus
 * casillas a la derecha. Ampliado, el dibujo se pone encima y a lo ancho. */
.ejercicio.con-dibujo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55em;
  align-items: start;
}
.ejercicio.con-dibujo:has(.ejercicio-dibujo.grande) { grid-template-columns: 1fr; }

.ejercicio-dibujo { margin: 0; }
.ejercicio-dibujo button {
  display: block;
  width: 100%;
  padding: 0;
  background: #fff;          /* los dibujos vienen con fondo blanco de wger */
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
}
.ejercicio-dibujo img { display: block; width: 5.5em; height: auto; }
.ejercicio-dibujo.grande button { cursor: zoom-out; }
.ejercicio-dibujo.grande img { width: 100%; max-width: 16em; margin: 0 auto; }

/* De dónde sale el dibujo y de quién es, en una línea al pie del bloque. Se
 * enseña siempre: el emparejado con wger es por parecido de palabras y puede
 * fallar, y la licencia obliga a citar al autor. */
.ejercicio-credito {
  grid-column: 1 / -1;
  margin: .15em 0 0;
  font-size: .68em;
  line-height: 1.35;
  color: var(--ink-muted);
}
.ejercicio-credito a { color: var(--ink-2); }
.ejercicio-credito .aprox { font-weight: 700; }

.ejercicio-linea { margin: 0; font-size: .85em; line-height: 1.4; font-weight: 600; }

.ejercicio-ultima {
  margin: .15em 0 .45em;
  font-size: .75em;
  line-height: 1.35;
  color: var(--ink-muted);
}
.ejercicio-ultima .etiqueta { color: var(--ink-2); }
/* El emparejado flojo: se enseña, pero se avisa de que es una apuesta. */
.ejercicio-ultima .ojo { font-style: italic; }

.series { display: flex; flex-direction: column; gap: .3em; }

.serie {
  display: flex;
  align-items: center;
  gap: .35em;
}

.serie-n {
  flex: none;
  width: 1.8em;
  font-size: .78em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.serie-campo {
  display: flex;
  align-items: baseline;
  gap: .2em;
  padding: 0 .45em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.serie-campo input {
  width: 2.6em;
  min-height: 2.2em;
  padding: 0;
  font: inherit;
  font-size: .95em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  background: transparent;
  border: 0;
  /* Las flechitas del number roban la mitad del ancho de la casilla y con el
   * dedo no se aciertan. El teclado numérico del móvil ya lo da todo. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.serie-campo input::-webkit-outer-spin-button,
.serie-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.serie-campo input:focus { outline: none; }
.serie-campo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-track); }

.serie-campo .unidad { font-size: .7em; color: var(--ink-muted); }
.serie-campo.repes input { width: 2.1em; }
.serie .por { font-size: .8em; color: var(--ink-muted); }

/* El estado de cada serie, en el borde izquierdo y sin ocupar sitio: verde va
 * guardada, ámbar se quedó sin mandar y se reintentará al volver la red. */
.serie[data-estado="guardada"] .serie-campo { border-color: color-mix(in srgb, #0ca30c 45%, var(--border)); }
.serie[data-estado="guardando"] .serie-campo { opacity: .6; }
.serie[data-estado="pendiente"] .serie-campo { border-color: #d08a00; background: color-mix(in srgb, #d08a00 8%, var(--surface)); }

.series-pie { display: flex; }

/* --- corregir la sesión --- */
/*
 * Quitar, cambiar y medir en otra cosa. Van al pie del ejercicio y en tinta
 * apagada: se usan una vez cada muchas sesiones y no deben competir con las
 * casillas, que son a lo que se viene. Pero se ven, porque un mando escondido
 * detrás de un menú de tres puntos no existe cuando estás de pie con prisa.
 */
.ejercicio-mandos {
  display: flex;
  flex-wrap: wrap;
  gap: .3em;
  align-items: center;
  margin: .45em 0 0;
}

.mando {
  min-height: 2em;
  padding: .2em .55em;
  font: inherit;
  font-size: .7em;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
}
.mando:hover { color: var(--ink); border-color: var(--ink-muted); }

/* Un ejercicio quitado no desaparece: se queda en una línea fina y tachada con
 * su «deshacer». Que se pueda volver atrás es lo que hace que se pueda pulsar. */
.ejercicio.quitado { background: transparent; border: 1px dashed var(--border); }
.ejercicio.quitado .ejercicio-linea {
  font-weight: 400;
  color: var(--ink-muted);
  text-decoration: line-through;
}
.ejercicio-mandos .quitado-nota { font-size: .7em; color: var(--ink-muted); }

/* Cambiado por otro: el plan se tacha y debajo va lo que se hizo de verdad. */
.ejercicio.cambiado .ejercicio-linea {
  color: var(--ink-muted);
  text-decoration: line-through;
}
.ejercicio-cambio { margin: .1em 0 .3em; font-size: .85em; font-weight: 600; }
.ejercicio-cambio .etiqueta { font-weight: 400; color: var(--ink-muted); }

/* Mientras el ajuste va y viene, y si vuelve mal. */
.ejercicio[data-estado="ajustando"] { opacity: .55; }
.ejercicio[data-estado="error"] { outline: 1px solid #d08a00; }

.serie-campo.segundos input { width: 3.2em; }

/* --- lo que no estaba en el plan --- */
/*
 * Los añadidos van detrás del último ejercicio del plan, con su marca. El plan
 * sigue siendo lo que escribió el entrenador: esto es lo que pusiste tú, y en la
 * revisión de la semana hay que poder distinguirlo de un vistazo.
 */
.ejercicios-extra { display: flex; flex-direction: column; gap: .3em; margin: 0 0 .6em; }

.ejercicio.anadido { border-left: 3px solid var(--accent-track); }

.marca-anadido {
  margin-left: .4em;
  padding: .05em .4em;
  font-size: .72em;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--plane);
  border: 1px solid var(--border);
  border-radius: 5px;
  vertical-align: 1px;
}

.mando.anadir { align-self: flex-start; border-style: dashed; }

/* --- mandar al reloj --- */
/*
 * Al pie de la ficha, apagado como los demás mandos: es una acción que se toma
 * una vez por entreno y no compite con leer la sesión. Cuando ya está enviado, el
 * botón dice qué hace ahora —quitarlo— y al lado va lo que hay en el reloj.
 */
.reloj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em;
  margin: .7em 0 0;
}
.reloj-nota { font-size: .72em; color: var(--ink-muted); }
.reloj[data-estado="enviado"] .mando { color: var(--ink); border-color: var(--accent); }
.reloj[data-estado="enviado"] .reloj-nota { color: var(--accent); }
.reloj[data-estado="trabajando"] { opacity: .6; }
.reloj[data-estado="error"] .reloj-nota { color: #d03b3b; }

/* --- el selector de ejercicios --- */
/*
 * Una lista de fichas con el dibujo a la izquierda. El dibujo es la mitad del
 * selector: «Jalón Mentzer» no dice nada y el dibujo sí, y por eso las fichas son
 * altas y con la imagen grande en vez de un desplegable apretado.
 */
#elegir-cuerpo { padding-top: .6rem; }

.elegir-lista { display: flex; flex-direction: column; gap: .35rem; }

.elegir-ficha {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.4rem;
  padding: .35rem .5rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.elegir-ficha:hover { background: var(--plane); border-color: var(--ink-muted); }

.elegir-ficha img {
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  object-fit: contain;
  background: #fff;          /* los dibujos de wger vienen con fondo blanco */
  border-radius: 7px;
}
/* Los que no tienen dibujo dejan su hueco: si no, la lista se descuadra. */
.elegir-ficha .sin-dibujo {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  color: var(--ink-muted);
  background: var(--plane);
  border-radius: 7px;
}

.elegir-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.elegir-texto strong { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.elegir-texto .cuando { font-size: .72rem; color: var(--ink-muted); }

.elegir-lista .mando { align-self: flex-start; margin-top: .3rem; font-size: .8rem; }

.mas-serie {
  min-height: 2em;
  padding: .2em .6em;
  font: inherit;
  font-size: .75em;
  color: var(--ink-2);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.mas-serie:hover:not(:disabled) { color: var(--ink); border-style: solid; }
.mas-serie:disabled { opacity: .4; cursor: default; }

/* El día de hoy se marca con la tinta de acento, no con un fondo: el color de
 * fondo ya lo usan los estados de cada entreno y se pisarían. */
.dia.hoy { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.dia.pasado { background: var(--plane); }

.dia > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .72rem;
  color: var(--ink-muted);
}

.dia > header b { font-size: .82rem; font-weight: 600; color: var(--ink); }

.tarjeta {
  padding: .3rem .4rem;
  font-size: .74rem;
  line-height: 1.35;
  /* Sin redondeo del lado de la franja: el radio de la caja le comía las
   * puntas al color y la dejaba con forma de pastilla. */
  border-radius: 0 6px 6px 0;
  border-left: 5px solid var(--accent);
  background: var(--plane);
}

.tarjeta .que { font-weight: 600; }
.tarjeta .detalle { color: var(--ink-2); }

/* El motivo es lo que separa esto de una lista de deberes, así que se enseña
 * siempre; en pantalla estrecha se recorta con el título completo en `title`. */
/* El motivo se recorta a tres líneas: entero haría las celdas altísimas, y
 * el texto completo sigue disponible al pasar el ratón. */
.tarjeta .motivo {
  margin-top: .2rem;
  font-size: .7rem;
  color: var(--ink-2);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tarjeta.completado { border-left-color: #0ca30c; }
.tarjeta.saltado    { border-left-color: #d03b3b; opacity: .75; }
.tarjeta.cancelado  { border-left-color: var(--ink-muted); opacity: .6;
                      text-decoration: line-through; }
.tarjeta.descanso   { border-left-style: dashed; }

.hecho {
  font-size: .72rem;
  color: var(--ink-2);
  padding-left: .1rem;
}

.hecho .deporte { font-weight: 600; color: var(--ink); }

.dia .vacio { font-size: .72rem; color: var(--ink-muted); }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1rem;
  margin-top: 1.2rem;
  font-size: .72rem;
  color: var(--ink-2);
}

.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.leyenda i { width: 5px; height: 12px; }


/* ------------------------------------------- calendario en móvil (agenda) */

.agenda { display: flex; flex-direction: column; gap: .5rem; }

.agenda-dia {
  padding: .55rem .7rem .65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.agenda-dia.hoy { border-color: var(--accent); }
.agenda-dia.pasado { background: var(--plane); }

.agenda-dia > header {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .75rem;
  color: var(--ink-muted);
}

.agenda-dia > header b { font-size: .95rem; font-weight: 600; color: var(--ink); }

.agenda-dia .marca {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Una fila por persona. Es un botón: lleva al detalle del día igual que la
 * celda de la rejilla en escritorio. */
.agenda-fila {
  display: flex;
  gap: .6rem;
  width: 100%;
  margin-top: .45rem;
  padding: .35rem .1rem;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
}

.agenda-fila .quien {
  flex: none;
  width: 3.6rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.agenda-fila .cosas { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }

.agenda-fila .cosa {
  font-size: .82rem;
  line-height: 1.35;
  padding-left: .5rem;
  border-left: 5px solid var(--accent);
}

.agenda-fila .cosa.hecho { border-left-color: var(--ink-muted); color: var(--ink-2); }
.agenda-fila .cosa.completado { border-left-color: #0ca30c; }
.agenda-fila .cosa.saltado { border-left-color: #d03b3b; }
.agenda-fila .cosa.cancelado {
  border-left-color: var(--ink-muted);
  text-decoration: line-through;
  opacity: .6;
}

.agenda-dia .vacio { margin: .3rem 0 0; font-size: .8rem; color: var(--ink-muted); }


/* --------------------------------------------------------- el entrenador */

.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-left: 1px solid var(--hairline);
}

.pestanas {
  display: flex;
  flex: none;
  border-bottom: 1px solid var(--hairline);
}

.pestana {
  flex: 1;
  padding: .6rem .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.pestana:hover { color: var(--ink); }

.pestana.activa {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.hilo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.turno { max-width: 92%; font-size: .86rem; line-height: 1.5; }

/* Lo que escribís vosotros va a la derecha y con fondo; lo del entrenador a la
 * izquierda y sin caja, que es lo que se lee de verdad y merece todo el ancho. */
.turno.mio {
  align-self: flex-end;
  padding: .5rem .7rem;
  color: #fff;
  background: var(--accent);
  border-radius: 12px 12px 3px 12px;
}

.turno.suyo { align-self: flex-start; }
.turno.suyo strong { font-weight: 600; }
.turno p { margin: 0 0 .6rem; }
.turno p:last-child { margin-bottom: 0; }

.turno .quien {
  display: block;
  margin-bottom: .15rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Qué herramientas usó: sirve para fiarse de la respuesta o para desconfiar. */
.turno .usadas {
  margin-top: .35rem;
  font-size: .7rem;
  color: var(--ink-muted);
}

.turno.error {
  align-self: stretch;
  padding: .5rem .7rem;
  color: #d03b3b;
  background: rgba(208, 59, 59, .10);
  border: 1px solid rgba(208, 59, 59, .30);
  border-radius: 9px;
}

.pensando { align-self: flex-start; font-size: .82rem; color: var(--ink-muted); }
.pensando::after {
  content: "";
  animation: puntos 1.4s steps(4, end) infinite;
}

@keyframes puntos { 0% { content: ""; } 25% { content: "·"; }
                    50% { content: "··"; } 75% { content: "···"; } }

.redactar {
  flex: none;
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  padding: var(--gap);
  padding-bottom: max(var(--gap), env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
}

.redactar textarea {
  flex: 1;
  min-height: 2.4rem;
  max-height: 9rem;
  padding: .5rem .6rem;
  font-family: inherit;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--plane);
  border: 1px solid var(--border);
  border-radius: 9px;
  resize: none;
}

/* El botón de enviar es un icono, no un texto: se apoya entero en .icono para
 * el tamaño y el centrado, y aquí solo cambia de color.
 *
 * Traía su propio `padding`, heredado de cuando ponía «Enviar», y ganaba por
 * especificidad al `padding: 0` del icono. Eso dejaba la caja de contenido más
 * estrecha que la flecha, y una rejilla no centra lo que se le sale: lo apoya
 * en el borde de inicio. La flecha se iba 7 px a la derecha. */
.enviar {
  flex: none;
  color: #fff;
  background: var(--accent);
}

.enviar:hover { color: #fff; background: var(--accent); filter: brightness(.92); }
.enviar:disabled { opacity: .45; cursor: default; }

/* ------------------------------------------------------------ estrecho */

/* Dos navegaciones distintas para dos formas de mirar.
 *
 * En pantalla ancha el chat cabe a la vez que los datos, así que se queda fijo
 * a la derecha y las tres secciones se alternan a la izquierda: preguntarle al
 * entrenador mientras ves el día es justo lo que hace útil tenerlo.
 *
 * En un móvil no caben los dos, así que el chat pasa a ser una sección más y
 * la barra de abajo manda: cuatro destinos, el pulgar llega a todos. */
@media (max-width: 900px) {
  .contenido { grid-template-columns: 1fr; }

  .chat { display: none; border-left: 0; }
  body.viendo-chat .principal { display: none; }
  body.viendo-chat .chat { display: flex; }

  /* El hueco de abajo lo pone ya la propia barra, que va en el flujo. Al
   * cuadro de escribir se le quita el margen del área segura por lo mismo: es
   * la barra la que se apoya en el borde de la pantalla, no él. */
  .redactar { padding-bottom: .5rem; }

  /* El pie se queda, apretado. Lo escondí al meter la barra de secciones y con
   * él desapareció lo que va gastado de API, que es justo lo que hay que tener
   * a la vista para que no haya sorpresas a fin de mes. Son 25 px. */
  .statusbar { padding: .28rem .7rem; font-size: .7rem; gap: .6rem; }

  .turno { max-width: 88%; }
  /* Siete días no caben en un móvil: la rejilla se arrastra en horizontal. */
  .rejilla { grid-template-columns: repeat(7, 132px); }
  .solo-ancho { display: none; }
}

/* Safari en el iPhone amplía la página él solo en cuanto enfocas un campo con
 * la letra por debajo de 16 px, y en una app instalada ese zoom ya no vuelve
 * atrás: cierras el buscador y te queda todo grande y descuadrado.
 *
 * Se arregla subiendo la letra, no con `maximum-scale=1` en el viewport: eso
 * mata el pellizco para ampliar, que hay gente que necesita.
 *
 * 16px literales y no 1rem: si alguien tiene el tamaño de letra del navegador
 * por debajo del normal, 1rem se queda corto y Safari vuelve a ampliar. */
@media (max-width: 900px) {
  .campo-buscar input,
  .redactar textarea,
  .card select,
  .card input { font-size: 16px; }
}

@media (max-width: 720px) {
  .person { padding: 1rem 1.05rem 1.2rem; }
  .topbar { gap: .3rem; padding-inline: .6rem; }
  .date { min-width: 7rem; font-size: .82rem; padding: .35rem .5rem; }
  .icono { width: 38px; height: 38px; }
  .grafico { padding: 1rem .9rem 1.15rem; }
}

/* La fecha va centrada en la barra, así que lo que crece a los lados se le
 * come el sitio por los dos a la vez. En un móvil estrecho —y con la etiqueta
 * larga del calendario, «10 de agosto»— hay que apretar o se solapan.
 *
 * El `min-width` es un suelo, no un tope: evita que la píldora se encoja hasta
 * el ancho de «Hoy» y pegue un salto cada vez que cambias de día, pero deja
 * que crezca cuando el texto lo pide. */
@media (max-width: 400px) {
  .topbar { padding-inline: .45rem; }
  .icono { width: 34px; height: 34px; }
  .date { min-width: 5.5rem; padding-inline: .5rem; font-size: .8rem; }
}

/* Por debajo de esto el nombre de quien ha entrado ya no cabe junto al
 * selector de día. Se queda el icono, que sigue diciendo dónde estás. */
@media (max-width: 520px) {
  .viewer { display: none; }
  .quien { flex: none; }
  .tiles { gap: 1rem .7rem; }
  .tile .value { font-size: 1.35rem; }
  .resumen-peso { gap: 1rem; }
}


@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ============================================================== las cumbres
 *
 * El mapa de las montañas subidas. Los dos neutros nuevos —tierra y costa— son
 * pasos de la misma rampa que --hairline, escalonados para que la isla se
 * despegue del mar sin gritar; el resto de colores ya existían.
 *
 * El relieve es un mapa de iluminación (255 = a pleno sol, 0 = umbría) que se
 * multiplica sobre la isla. En oscuro no cambia la mezcla: lo que cambia es que
 * la tierra parte de un gris medio, porque multiplicar sobre casi negro no da
 * nada. Una sola imagen sirve para los dos modos.
 */

:root {
  --tierra:         #e8e6db;
  --tierra-relieve: #e8e6db;
  --costa:          #aeab9d;
  --mar:            #f2f2ef;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tierra:         #262625;
    --tierra-relieve: #56534b;
    --costa:          #4e4c46;
    --mar:            #101010;
  }
}

.cumbres {
  overflow-y: auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* --- el mapa --- */

.mapa-marco {
  position: relative;
  /* El gesto del mapa es del mapa. Sin esto, el pellizco para acercar se lo
   * queda el navegador y amplía la aplicación entera. */
  touch-action: none;
  background: var(--mar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  /* Alto propio y no aspect-ratio: en un móvil apaisado un cuadrado se comería
   * la pantalla entera y la lista quedaría fuera de la vista. */
  height: clamp(300px, 52vh, 560px);
  flex: none;
}

.mapa {
  display: block;
  width: 100%;
  height: 100%;
  /* Sin esto el navegador se queda el gesto para hacer scroll y el mapa no se
   * puede arrastrar con el dedo. */
  touch-action: none;
  cursor: grab;
  /* Acota la mezcla del relieve al mapa: sin aislar, el multiply se aplicaría
   * también contra el fondo de la página. */
  isolation: isolate;
}
.mapa.arrastrando { cursor: grabbing; }

.isla {
  fill: var(--tierra);
  stroke: var(--costa);
  stroke-width: .9;
  vector-effect: non-scaling-stroke;
}
.mapa.con-relieve .isla { fill: var(--tierra-relieve); }

.relieve { mix-blend-mode: multiply; opacity: .82; pointer-events: none; }

/* El relieve aplanado haciendo de silueta donde no hay costa. El color se
 * inyecta desde aquí porque un `flood-color` escrito en el SVG no sabría de
 * modo claro y oscuro. */
.silueta-relieve { pointer-events: none; }
#aplanar-tierra feFlood { flood-color: var(--tierra); flood-opacity: 1; }
/* Con el relieve puesto, la base parte más clara por lo mismo que las islas:
 * multiplicar sobre casi negro no da nada. */
.mapa.con-relieve #aplanar-tierra feFlood { flood-color: var(--tierra-relieve); }

.pin { cursor: pointer; }
.pin-letra {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.pin-cuenta {
  font-size: 8.5px;
  font-weight: 600;
  fill: var(--ink-2);
  text-anchor: start;
  pointer-events: none;
  /* Donde se amontonan veinte cumbres, un número sin funda no se lee. */
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}
.pin .halo { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; }
.pin.activa .halo { opacity: 1; }

/* Los altos sin nombre, de trazo discontinuo: se coronaron igual, pero
 * OpenStreetMap no tiene ahí ninguna montaña y el mapa no va a inventarle una.
 * El guion es corto para que a tamaño de chincheta siga leyéndose como anillo
 * y no como una línea de puntos sueltos. */
.pin .sin-nombre circle,
.pin .sin-nombre path { stroke-dasharray: 3 2.2; }

/* --- controles sobre el mapa --- */

/* Los dos grupos comparten fila y se parten solos cuando no caben: en un móvil
 * estrecho, fijarlos a las dos esquinas los hacía chocar en el centro. */
.mapa-barra {
  position: absolute;
  top: .5rem;
  left: .5rem;
  right: .5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem;
}
.mapa-encuadres { display: flex; flex-wrap: wrap; gap: .3rem; }
.mapa-capas {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface);
}
/* Abajo a la derecha, encima de la atribución: arriba chocaban con los botones
 * de encuadre en cuanto la pantalla se estrechaba. */
.mapa-mandos {
  position: absolute;
  right: .5rem;
  bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.mapa-encuadres button, .mapa-mandos button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  min-height: 1.9rem;
  padding: 0 .6rem;
  font-size: .76rem;
  color: var(--ink-2);
  cursor: pointer;
}
.mapa-mandos button { width: 1.9rem; padding: 0; font-size: .95rem; line-height: 1; }
.mapa-capas button {
  background: none;
  border: 0;
  height: 1.9rem;
  padding: 0 .6rem;
  font-size: .76rem;
  color: var(--ink-2);
  cursor: pointer;
}
.mapa-capas button + button { border-left: 1px solid var(--border); }

.mapa-encuadres button[aria-pressed="true"],
.mapa-capas button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.mapa-escala {
  position: absolute;
  left: .6rem;
  bottom: .55rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  pointer-events: none;
}
.mapa-escala .barra { height: 4px; border: 1px solid var(--ink-2); border-top: 0; }

.mapa-credito {
  position: absolute;
  right: .5rem;
  bottom: .45rem;
  margin: 0;
  padding: .1rem .35rem;
  font-size: .64rem;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border-radius: 5px;
}
.mapa-credito a { color: inherit; }

.mapa-recado {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  max-width: min(28rem, calc(100% - 1.2rem));
  margin: 0;
  padding: .5rem .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

/* --- la lista --- */

.cumbre-lista {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  /* `flex: none` o no hay scroll: por defecto un hijo de una columna flex se
   * encoge para caber, y como esta tarjeta recorta lo suyo para redondear las
   * esquinas, la lista se quedaba cortada sin nada que desplazar. Quien
   * desplaza es `.cumbres`, no ella. */
  flex: none;
}
.cumbre-lista > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem .9rem .65rem;
  border-bottom: 1px solid var(--hairline);
}
.cumbre-lista h2 { margin: 0; font-size: .82rem; font-weight: 640; }
.cumbre-lista .cuenta { font-size: .72rem; color: var(--ink-muted); }

.cumbre-fila {
  display: grid;
  grid-template-columns: 3.6rem 1fr auto auto auto;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .9rem;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  color: inherit;
}
.cumbre-fila:last-child { border-bottom: 0; }
.cumbre-fila:hover,
.cumbre-fila.activa { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.cumbre-fila .alt {
  text-align: right;
  font-size: .84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cumbre-fila .alt .u { font-weight: 400; color: var(--ink-muted); }
.cumbre-fila .nom { font-size: .87rem; line-height: 1.25; }
.cumbre-fila .veces {
  font-size: .72rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 1.6rem;
  text-align: right;
}

/* Quién ha estado, en texto. En la lista no hay sitio para dibujar la
 * chincheta y una etiqueta se lee antes que un icono de 10 px. */
.cumbre-fila .quien {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.cumbre-fila .quien.e-juntos { color: var(--accent); font-weight: 700; }
.cumbre-fila .quien.p1 { color: var(--serie-1); font-weight: 700; font-size: .78rem; }
.cumbre-fila .quien.p2 { color: var(--serie-2); font-weight: 700; font-size: .78rem; }

/* La última subida. Es lo que contesta «¿cuánto hace que no subo aquí?» sin
 * abrir nada, que es lo que se mira en una lista de doscientas filas. */
.cumbre-fila .cuando {
  font-size: .72rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 5.6rem;
}

/* En pantalla estrecha la fecha se lleva por delante el nombre. Se va, que en
 * el globo sigue estando y con más detalle. */
@media (max-width: 420px) {
  .cumbre-fila { grid-template-columns: 3.2rem 1fr auto auto; }
  .cumbre-fila .cuando { display: none; }
}

/* --- el globo --- */
/*
 * La ficha de la cumbre, colgada de su chincheta. Va sobre el mapa y no en un
 * cajón modal a propósito: lo que se pregunta al abrirla —quién subió y cuándo—
 * se lee mejor con la montaña a la vista que con la pantalla tapada.
 *
 * `--punta` la pone el JS: es dónde queda la chincheta respecto al borde
 * izquierdo del globo, para que la flecha siga apuntando aunque el globo se
 * haya corrido para no salirse del marco.
 */

.mapa-globo {
  position: absolute;
  z-index: 4;
  width: min(19rem, calc(100% - 1rem));
  max-height: min(20rem, calc(100% - 4.5rem));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgb(0 0 0 / .18);
  /* Los gestos del mapa son del mapa, menos aquí dentro. */
  touch-action: auto;
}

.mapa-globo.fuera { visibility: hidden; }

.mapa-globo .globo-cabeza {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .35rem .5rem .8rem;
  border-bottom: 1px solid var(--hairline);
}

.mapa-globo h3 {
  flex: 1;
  margin: 0;
  font-size: .88rem;
  font-weight: 640;
  line-height: 1.25;
}

.mapa-globo .cerrar {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.mapa-globo .cerrar:hover { background: var(--plane); color: var(--ink); }

.mapa-globo .globo-cuerpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .7rem .8rem .8rem;
}

/* La punta. Dos triángulos, uno del color del borde y otro del fondo un pelo
 * por dentro, que es como se dibuja una flecha con borde sin usar imágenes. */
.mapa-globo .pico {
  position: absolute;
  left: var(--punta, 50%);
  width: 0;
  height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

.mapa-globo .pico::after {
  content: "";
  position: absolute;
  left: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.mapa-globo:not(.debajo) .pico {
  top: 100%;
  border-top: 8px solid var(--border);
}
.mapa-globo:not(.debajo) .pico::after {
  top: -8px;
  border-top: 7px solid var(--surface);
}

.mapa-globo.debajo .pico {
  bottom: 100%;
  border-bottom: 8px solid var(--border);
}
.mapa-globo.debajo .pico::after {
  bottom: -8px;
  border-bottom: 7px solid var(--surface);
}


/* --- la ficha --- */

.cumbre-ficha { display: flex; flex-direction: column; gap: .7rem; }
.cumbre-meta {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.cumbre-subidas { display: flex; flex-direction: column; }
.cumbre-subida {
  padding: .55rem 0 .6rem .7rem;
  border-top: 1px solid var(--hairline);
  /* Una barra del color de la persona: dice de quién es la subida sin gastar
   * una palabra, y es el mismo código de color que la gráfica de peso. */
  border-left: 3px solid var(--hairline);
}
.cumbre-subida.p1 { border-left-color: var(--serie-1); }
.cumbre-subida.p2 { border-left-color: var(--serie-2); }
.cumbre-subida-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  font-size: .86rem;
}
.cumbre-subida-cabeza .cuando {
  font-size: .76rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.cumbre-datos { margin: .15rem 0 .25rem; font-size: .76rem; color: var(--ink-2); }
.cumbre-enlace { font-size: .74rem; color: var(--accent); text-decoration: none; }
.cumbre-enlace:hover { text-decoration: underline; }


/* ========================================================= pantalla de inicio
 *
 * Tapa el hueco entre que el navegador pinta algo y la app tiene datos que
 * enseñar. Antes de esto se veía el armazón vacío con «Cargando…» durante un
 * segundo, que es peor que no ver nada.
 *
 * El fondo es el gris del propio icono: #d3d4d3, la media de su borde. No es un
 * gris cualquiera y por eso está escrito aquí y en el manifiesto.
 *
 * Se probó a fundir el icono con una sombra interior para que no se viera el
 * canto de la imagen, y no vale: el dibujo de curvas de nivel del icono llega
 * hasta el borde mismo, así que no hay margen que desvanecer sin comerse el
 * «PpSoft». Se queda como una pastilla de esquinas redondeadas, que además es
 * la forma en la que ya se ve el icono en el móvil. Como el fondo de la
 * pastilla y el de la pantalla son el mismo gris, lo único que se distingue es
 * el degradado propio del icono, y muy poco.
 */

.arranque {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #d3d4d3;
  /* Se va desvaneciendo, no desaparece de golpe. */
  transition: opacity .32s ease, visibility .32s;
}

.arranque.fuera {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.arranque-icono img {
  display: block;
  width: clamp(148px, 36vmin, 208px);
  height: auto;
  /* La misma proporción que usa el sistema para el icono de una app. */
  border-radius: 23%;
}

/* En oscuro, el gris del icono a pantalla completa sería un fogonazo a las
 * siete de la mañana. La pantalla se queda en el fondo de la app y la pastilla
 * se apaga un poco para no deslumbrar; ahí sí se ve que es una pastilla, que es
 * exactamente lo que se ve al abrirla desde el icono del móvil. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .arranque { background: var(--plane); }
  :root:not([data-theme="light"]) .arranque-icono img { opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  .arranque { transition: none; }
}

/* El deporte con el que se manda, cuando el del plan no existe en Garmin. Sale
 * al lado del botón y solo entonces: en una carrera no hay nada que elegir. */
.reloj-deporte {
  font: inherit;
  font-size: .72em;
  padding: .2em .3em;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
}