/* =========================================================================
   components.css — piezas reutilizables del sistema de diseño.
   Las vistas de los pasos siguientes se montan con esto, sin inventar
   estilos nuevos cada vez.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Colores por tipo de sesión
   Cada tipo del JSON se traduce a una variable local --color-tipo. Las claves
   que trae plan.json hoy son: rodaje, calidad, rm, larga, fuerza, padel,
   movilidad, carrera, maraton, descanso y bloqueado.
   Descanso y bloqueado no tienen color propio: gris.
   RECORDATORIO: el color nunca va solo. Siempre con el nombre del tipo al lado.
   ------------------------------------------------------------------------- */

[data-tipo]              { --color-tipo: var(--tinta-3); }
[data-tipo="rodaje"]     { --color-tipo: var(--rodaje); }
[data-tipo="calidad"]    { --color-tipo: var(--calidad); }
[data-tipo="rm"]         { --color-tipo: var(--rm); }
[data-tipo="larga"]      { --color-tipo: var(--larga); }
[data-tipo="fuerza"]     { --color-tipo: var(--fuerza); }
[data-tipo="padel"]      { --color-tipo: var(--fuerza); }
[data-tipo="movilidad"]  { --color-tipo: var(--fuerza); }
[data-tipo="carrera"]    { --color-tipo: var(--carrera); }
[data-tipo="maraton"]    { --color-tipo: var(--carrera); }
[data-tipo="descanso"]   { --color-tipo: var(--tinta-3); }
[data-tipo="bloqueado"]  { --color-tipo: var(--tinta-3); }

/* Colores del semáforo lumbar */
[data-semaforo]             { --color-semaforo: var(--tinta-3); }
[data-semaforo="verde"]     { --color-semaforo: var(--verde); }
[data-semaforo="amarillo"]  { --color-semaforo: var(--amarillo); }
[data-semaforo="naranja"]   { --color-semaforo: var(--naranja); }
[data-semaforo="rojo"]      { --color-semaforo: var(--rojo); }

/* -------------------------------------------------------------------------
   Tarjeta
   ------------------------------------------------------------------------- */

.tarjeta {
  position: relative;
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.tarjeta + .tarjeta { margin-top: var(--e3); }

.tarjeta--destacada {
  border-color: var(--tinta-3);
  border-width: 2px;
}

/* Franja de color a la izquierda, según el tipo de sesión. */
.tarjeta--franja {
  padding-left: calc(var(--e4) + 6px);
  overflow: hidden;
}
.tarjeta--franja::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--color-tipo);
}

.tarjeta__titulo {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tarjeta__pie {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
  color: var(--tinta-2);
  font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
   Chips: tipo de sesión y semáforo. Color + palabra, siempre.
   ------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 2px var(--e2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tinta-2);
  white-space: nowrap;
}

.chip__punto {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--color-tipo, var(--tinta-3));
}

.chip--semaforo .chip__punto { background: var(--color-semaforo); }

/* -------------------------------------------------------------------------
   Botones. Nada por debajo de 44px de alto pulsable.
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: var(--e2) var(--e4);
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--eje);
  border-radius: var(--radio-s);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover { background: var(--plano); }

.btn--principal {
  width: 100%;
  min-height: 52px;
  background: var(--tinta);
  color: var(--superficie);
  border-color: var(--tinta);
  font-size: 1rem;
}

.btn--principal:hover { opacity: 0.9; background: var(--tinta); }

/* Estado "ya hecho": cambia el texto además del color, nunca solo el color. */
.btn--hecho {
  background: var(--superficie);
  color: var(--tinta);
  border-color: var(--tinta-3);
}

.btn--icono {
  min-width: 44px;
  min-height: 44px;
  padding: var(--e2);
  border-color: transparent;
  background: transparent;
  color: var(--tinta-2);
}
.btn--icono:hover { background: var(--plano); color: var(--tinta); }
.btn--icono svg { width: 20px; height: 20px; }

/* -------------------------------------------------------------------------
   Stat tiles: número grande arriba, etiqueta pequeña debajo. Sin gráficos.
   ------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e2);
}

@media (min-width: 480px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

.stat {
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-align: left;
}

.stat__valor {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* Sin tabular-nums: en números grandes se lee peor. */
}

.stat__unidad {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.stat__etiqueta {
  display: block;
  margin-top: var(--e1);
  font-size: 0.75rem;
  /* Texto pequeño → --tinta-2. --tinta-3 se reserva para lo que no hay que
     leer: rejillas, ejes y textos de gráfico grandes. */
  color: var(--tinta-2);
  line-height: 1.25;
}

/* -------------------------------------------------------------------------
   Barra de progreso
   ------------------------------------------------------------------------- */

.barra {
  height: 8px;
  background: var(--plano);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  overflow: hidden;
}

.barra__relleno {
  height: 100%;
  background: var(--color-tipo, var(--rodaje));
  border-radius: var(--radio-s) 0 0 var(--radio-s);
}

/* -------------------------------------------------------------------------
   Avisos
   ------------------------------------------------------------------------- */

.aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--eje);
  border-left: 4px solid var(--color-semaforo, var(--eje));
  border-radius: var(--radio-s);
  font-size: 0.875rem;
  color: var(--tinta-2);
}

.aviso--error { --color-semaforo: var(--rojo); }
.aviso--atencion { --color-semaforo: var(--amarillo); }

.aviso strong { color: var(--tinta); }

.aviso code {
  padding: 1px var(--e1);
  background: var(--plano);
  border: 1px solid var(--linea);
  border-radius: 3px;
  font-size: 0.8125em;
}

/* -------------------------------------------------------------------------
   Iconos en línea (semáforo, sellos)
   ------------------------------------------------------------------------- */

.icono {
  width: 14px;
  height: 14px;
  display: block;
}

.chip__forma {
  display: flex;
  color: var(--color-semaforo, var(--tinta-3));
}

/* -------------------------------------------------------------------------
   VISTA HOY
   ------------------------------------------------------------------------- */

.vista-hoy {
  display: flex;
  flex-direction: column;
  /* 8px y no 12: con el pliegue del móvil tan justo, cada 4px cuenta para que
     el aviso de la rutina lumbar entre entero en pantalla. */
  gap: var(--e2);
}

.vista__cabecera {
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.35;
}

/* --- Tarjeta de la sesión: el elemento dominante ------------------------- */

.sesion {
  padding-top: var(--e3);
  padding-bottom: var(--e4);
}

.sesion__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  margin-bottom: var(--e2);
}

.sesion__sello {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.sesion__titulo {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.sesion__km {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  margin-top: var(--e2);
}

.sesion__km-numero {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  /* Sin tabular-nums: aquí estorba. */
}

.sesion__km-unidad {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.sesion__zona {
  margin-top: var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--plano);
  border-radius: var(--radio-s);
}

.sesion__zona dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}

.sesion__zona dd {
  margin: var(--e1) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2);
}

.sesion__ritmo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sesion__pulso {
  font-size: 0.8125rem;
  color: var(--tinta-2);
}

.sesion__detalle {
  margin-top: var(--e3);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinta);
}

.sesion__descanso { margin-top: var(--e3); }

.sesion__descanso-titulo {
  font-size: 0.9375rem;
  font-weight: 600;
}

.lista-reglas {
  margin-top: var(--e2);
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.lista-reglas li {
  position: relative;
  padding-left: var(--e3);
  font-size: 0.875rem;
  color: var(--tinta-2);
  line-height: 1.4;
}

.lista-reglas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--eje);
}

.sesion .btn--principal { margin-top: var(--e4); }

/* Sesión ya hecha: se atenúa la franja, pero el texto sigue a pleno contraste. */
.sesion--hecha::before { opacity: 0.45; }

/* --- Stat tiles: el semáforo entra como chip, no como número ------------- */

.stat__valor--chip {
  font-size: 1rem;
  display: flex;
  align-items: center;
  min-height: 1.725rem;
}

/* --- Rutina lumbar ------------------------------------------------------- */

.rutina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
}

.rutina__check {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 44px;
  padding: var(--e1) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.rutina__caja {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid var(--eje);
  border-radius: var(--radio-s);
  font-size: 0.875rem;
  font-weight: 700;
}

.rutina__check--hecha .rutina__caja {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--superficie);
}

.rutina__nombre {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.rutina__estado {
  display: block;
  font-size: 0.75rem;
  color: var(--tinta-2);
}

.rutina__enlace {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Nota de la semana --------------------------------------------------- */

.nota {
  background: var(--plano);
}

.nota__titulo {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
  margin-bottom: var(--e1);
}

.nota p {
  font-size: 0.875rem;
  line-height: 1.45;
}

/* --- Pie: la sesión de mañana -------------------------------------------- */

.manana {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e1) 0;
  border-top: 1px solid var(--linea);
  font-size: 0.8125rem;
  color: var(--tinta-2);
}

.manana__etiqueta {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}

.manana__cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}

.manana__titulo { color: var(--tinta); }

/* -------------------------------------------------------------------------
   VISTA SEMANA
   ------------------------------------------------------------------------- */

.vista-semana {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

/* --- Cabecera de la semana ---------------------------------------------- */

.semana__cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.semana__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
}

.semana__numero {
  flex: 1;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.semana__numero span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tinta-2);
}

.semana__flecha {
  border-color: var(--linea);
}

.semana__flecha[disabled] {
  opacity: 0.35;
  cursor: default;
}

.semana__meta {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--tinta-2);
  line-height: 1.35;
}

.semana__progreso {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.semana__progreso-texto {
  font-size: 0.8125rem;
  color: var(--tinta-2);
}

.semana__progreso-texto strong {
  color: var(--tinta);
  font-size: 0.9375rem;
}

/* --- Nota destacada, arriba --------------------------------------------- */

.nota--arriba {
  background: var(--superficie);
}

/* --- Los 7 días ---------------------------------------------------------- */

.dias {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.dia {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--e1) var(--e2);
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--linea);
  /* La franja del tipo de sesión, a la izquierda. */
  border-left: 6px solid var(--color-tipo);
  border-radius: var(--radio);
}

/* El día de hoy: borde completo, no solo un fondo distinto.
   El outline no desplaza nada y se ve en los dos modos. */
.dia--hoy {
  outline: 2px solid var(--tinta);
  outline-offset: -1px;
}

.dia--hecha { border-left-color: color-mix(in srgb, var(--color-tipo) 45%, transparent); }

.dia__fecha {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e2);
}

.dia__nombre {
  font-size: 0.9375rem;
  font-weight: 700;
}

.dia__numero {
  font-size: 0.75rem;
  color: var(--tinta-2);
}

.dia__hoy-etiqueta {
  padding: 1px var(--e2);
  background: var(--tinta);
  color: var(--superficie);
  border-radius: var(--radio-s);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dia__cuerpo {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.dia__linea {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
}

.dia__titulo {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.dia__cifras {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e1) var(--e3);
  margin-top: var(--e1);
  font-size: 0.8125rem;
  color: var(--tinta-2);
}

.dia__km {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinta);
}

.dia__reales {
  font-weight: 600;
  color: var(--tinta);
}

.dia__detalle {
  margin-top: var(--e1);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--tinta-2);
}

/* Botón de marcar: a la derecha, centrado, 44px largos. */
.dia__check {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 60px;
  min-height: 56px;
  padding: var(--e1);
  background: none;
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  cursor: pointer;
}

.dia__check:hover { background: var(--plano); }

.dia__caja {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid var(--eje);
  border-radius: var(--radio-s);
  font-size: 0.8125rem;
  font-weight: 700;
}

.dia__check--hecha .dia__caja {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--superficie);
}

.dia__check-texto {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.dia__check--hecha .dia__check-texto { color: var(--tinta); }

/* --- La regla, al pie ---------------------------------------------------- */

.semana__regla {
  padding: var(--e3);
  background: var(--plano);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.semana__regla-etiqueta {
  display: block;
  margin-bottom: var(--e1);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}

.semana__regla p {
  font-size: 0.875rem;
  line-height: 1.45;
}

/* --- Escritorio: una fila por día ---------------------------------------- */

@media (min-width: 768px) {
  .semana__nav { justify-content: flex-start; }
  .semana__numero { text-align: left; flex: none; }
  .semana__meta { text-align: left; }

  .dia {
    grid-template-columns: 104px 1fr auto;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
  }

  .dia__fecha {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .dia__cuerpo { grid-column: 2; grid-row: 1; }

  .dia__check {
    grid-column: 3;
    grid-row: 1;
    flex-direction: row;
    gap: var(--e2);
    min-height: 44px;
    padding: var(--e1) var(--e3);
  }

  .dia__check-texto { font-size: 0.8125rem; }
}

/* -------------------------------------------------------------------------
   VISTA PLAN COMPLETO
   ------------------------------------------------------------------------- */

.vista-plan {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.plan__pista {
  font-size: 0.75rem;
  color: var(--tinta-2);
  line-height: 1.4;
}

/* --- Cada bloque, con su fondo propio ------------------------------------ */

.bloque {
  padding: var(--e3);
  background: var(--plano);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

/* Los bloques impares llevan el fondo de superficie: así se ven los cuatro
   grupos aunque no se lean las etiquetas. */
.bloque[data-bloque="2"],
.bloque[data-bloque="4"] {
  background: var(--superficie);
}

.bloque__cabecera { margin-bottom: var(--e2); }

.bloque__nombre {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bloque__meta {
  font-size: 0.75rem;
  color: var(--tinta-2);
}

.bloque__foco {
  margin-top: var(--e1);
  font-size: 0.8125rem;
  color: var(--tinta-2);
  line-height: 1.4;
}

/* --- Una fila por semana -------------------------------------------------- */

.filas {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.fila {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
}

.bloque[data-bloque="2"] .fila,
.bloque[data-bloque="4"] .fila {
  background: var(--plano);
}

/* La semana de hoy: borde entero, más la etiqueta "Ahora". */
.fila--actual {
  outline: 2px solid var(--tinta);
  outline-offset: -1px;
}

/* Columnas de ANCHO FIJO salvo la del medio.
   Es lo que hace que la pista de la barra mida exactamente lo mismo en las 16
   filas y que, por tanto, dos semanas con los mismos km dibujen barras iguales.
   Si la columna de la derecha creciera con el "Pico" o con los km hechos, cada
   barra se estaría midiendo contra una regla distinta. */
.fila__cabecera {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 38px 1fr 76px 18px;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.fila__cabecera:hover { background: var(--plano); }
.bloque[data-bloque="2"] .fila__cabecera:hover,
.bloque[data-bloque="4"] .fila__cabecera:hover { background: var(--superficie); }

/* Ancho fijo: si la columna del número creciera con la etiqueta "Ahora", la
   barra de esa semana arrancaría más a la derecha y la curva saldría torcida. */
.fila__n {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 38px;
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fila__ahora {
  padding: 0 var(--e1);
  background: var(--tinta);
  color: var(--superficie);
  border-radius: 3px;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fila__medio {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fila__fechas {
  font-size: 0.6875rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.fila__barra {
  display: block;
  height: 10px;
  background: var(--plano);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
}

.bloque[data-bloque="2"] .fila__barra,
.bloque[data-bloque="4"] .fila__barra { background: var(--superficie); }

.fila__barra-relleno {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--rodaje);
  border-radius: 0 2px 2px 0;
}

.fila__hitos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e2);
  margin-top: 2px;
}

.hito {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.hito .icono { width: 12px; height: 12px; }

.fila__derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}

.fila__km {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fila__km span {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.fila__pico {
  padding: 0 var(--e1);
  border: 1px solid var(--eje);
  border-radius: 3px;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-2);
}

.fila__hechos {
  font-size: 0.625rem;
  color: var(--tinta-2);
  white-space: nowrap;
}

.fila__flecha {
  display: flex;
  color: var(--tinta-2);
}

.fila__flecha svg { width: 16px; height: 16px; }

.fila__cabecera[aria-expanded="true"] .fila__flecha { transform: rotate(180deg); }

/* --- El desplegable con los 7 días --------------------------------------- */

.fila__detalle {
  padding: var(--e2) var(--e2) var(--e3);
  border-top: 1px solid var(--linea);
}

.fila__titulo-semana {
  margin-bottom: var(--e2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.mini-dias {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.mini-dia {
  display: grid;
  grid-template-columns: 30px auto 1fr auto;
  align-items: center;
  gap: var(--e1) var(--e2);
  padding: var(--e1) 0 var(--e1) var(--e2);
  border-left: 3px solid var(--color-tipo);
  font-size: 0.75rem;
}

.mini-dia--hecha { border-left-color: color-mix(in srgb, var(--color-tipo) 45%, transparent); }

.mini-dia__dia {
  font-weight: 700;
  color: var(--tinta-2);
}

/* El título se parte en dos líneas si hace falta. Nunca se recorta con puntos
   suspensivos: un texto cortado es un texto que hay que adivinar. */
.mini-dia__titulo {
  min-width: 0;
  line-height: 1.3;
}

.mini-dia__km {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fila__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--e1);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--tinta-2);
}

@media (min-width: 768px) {
  .bloque { padding: var(--e4); }

  /* Mismo criterio que en móvil: solo la columna de la barra es elástica. */
  .fila__cabecera {
    grid-template-columns: 56px 1fr 150px 24px;
    gap: var(--e3);
    padding: var(--e2) var(--e3);
  }

  .fila__n { flex-direction: row; align-items: baseline; gap: var(--e2); width: auto; }

  .fila__fechas { font-size: 0.75rem; }

  .fila__derecha {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--e2);
  }

  .mini-dia { grid-template-columns: 40px auto 1fr auto; font-size: 0.8125rem; }
}

/* -------------------------------------------------------------------------
   VISTA RITMOS
   ------------------------------------------------------------------------- */

.vista-ritmos {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.seccion { padding: var(--e3); }

.seccion__titulo {
  margin-bottom: var(--e3);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Tabla de zonas ------------------------------------------------------ */

.tabla-zonas th,
.tabla-zonas td {
  padding: var(--e2) var(--e2) var(--e2) 0;
  vertical-align: top;
}

.zona__nombre {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  font-weight: 600;
  color: var(--tinta);
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
}

/* El punto lleva el color del tipo de sesión; el nombre va escrito al lado. */
.zona__punto {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--color-tipo, var(--tinta-3));
}

.zona__tipo {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--tinta-2);
}

.zona__ritmo {
  font-weight: 700;
  white-space: nowrap;
}

.zona__uso {
  color: var(--tinta-2);
  line-height: 1.35;
}

/* En móvil la tabla se convierte en fichas apiladas. Cuatro columnas en 360px
   obligarían a hacer zoom, y esconder la columna "para qué" sería perder
   contenido del JSON. Así se ve todo, sin scroll horizontal. */
@media (max-width: 559px) {
  .tabla-zonas thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tabla-zonas tr {
    display: block;
    padding: var(--e2) 0;
    border-bottom: 1px solid var(--linea);
  }

  .tabla-zonas tr:last-child { border-bottom: 0; }

  .tabla-zonas td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e3);
    padding: 2px 0 2px var(--e5);
    border: 0;
  }

  .tabla-zonas td::before {
    content: attr(data-etiqueta);
    flex: none;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--tinta-2);
  }

  .tabla-zonas .zona__uso {
    text-align: right;
    line-height: 1.3;
  }

  .tabla-zonas .zona__nombre { padding-bottom: var(--e1); }
}

/* --- Aviso fuerte -------------------------------------------------------- */

.aviso--fuerte {
  border-left-width: 4px;
  border-left-color: var(--tinta);
  background: var(--plano);
}

.aviso--fuerte p { line-height: 1.45; }
.aviso--fuerte p + p { margin-top: var(--e1); }

/* --- Calculadora --------------------------------------------------------- */

.calc {
  display: grid;
  gap: var(--e3);
}

@media (min-width: 620px) {
  .calc { grid-template-columns: 1fr 1fr; }
}

.calc__caja {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3);
  background: var(--plano);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
}

.calc__titulo {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.calc__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  min-width: 0;
}

.campo__etiqueta {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.campo input {
  width: 100%;
  min-height: 44px;
  padding: var(--e2);
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--eje);
  border-radius: var(--radio-s);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.campo input[aria-invalid="true"] { border-color: var(--rojo); }

.calc__resultado {
  min-height: 1.25rem;
  font-size: 0.875rem;
}

.calc__resultado--error { color: var(--tinta-2); }

.calc__resultado--ok {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2);
}

.calc__resultado--ok strong {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.calc__resultado--ok span {
  font-size: 0.75rem;
  color: var(--tinta-2);
}

/* --- Parciales del maratón ----------------------------------------------- */

.objetivo {
  display: flex;
  align-items: flex-end;
  gap: var(--e2);
}

.objetivo__campo { flex: 1; max-width: 200px; }

.objetivo__botones {
  display: flex;
  gap: var(--e1);
}

.objetivo__botones .btn {
  min-width: 56px;
  border-color: var(--eje);
  font-size: 0.8125rem;
  font-weight: 700;
}

.objetivo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e1) var(--e2);
  margin-top: var(--e3);
  font-size: 0.875rem;
  color: var(--tinta-2);
}

.objetivo__meta strong {
  font-size: 1.125rem;
  color: var(--tinta);
}

.objetivo__origen {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.objetivo__volver {
  min-height: 44px;
  padding: 0 var(--e2);
  background: none;
  border: 0;
  color: var(--tinta);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Letra grande: esta tabla se mira corriendo, con el dorsal puesto. */
.tabla-parciales {
  margin-top: var(--e3);
  font-size: 1rem;
}

.tabla-parciales th[scope="row"] {
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
}

.tabla-parciales .parcial__tiempo {
  text-align: right;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.parcial__nota {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}

.parcial--hito { background: var(--plano); }

/* -------------------------------------------------------------------------
   VISTA PROGRESO Y GRÁFICOS
   ------------------------------------------------------------------------- */

.vista-progreso {
  position: relative;          /* el tooltip se coloca respecto a esto */
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.grafico { padding: var(--e3); }

.grafico__titulo {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.grafico__descripcion {
  margin-top: var(--e1);
  font-size: 0.8125rem;
  color: var(--tinta-2);
  line-height: 1.35;
}

.grafico__lienzo { margin-top: var(--e3); }

.gr {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- Ejes y rejilla: discretos, 1px, textos en --tinta-3 ------------------ */

.rejilla {
  stroke: var(--linea);
  stroke-width: 1;
}

.eje-linea {
  stroke: var(--eje);
  stroke-width: 1;
}

.eje-texto {
  fill: var(--tinta-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.eje-titulo {
  fill: var(--tinta-3);
  font-size: 11px;
}

/* En el lienzo estrecho los tamaños van en las unidades del viewBox, que se
   escalan menos. Se suben un punto para que en el móvil se lean igual. */
.gr--compacto .eje-texto,
.gr--compacto .eje-titulo { font-size: 13px; }
.gr--compacto .etiqueta-directa { font-size: 14px; }

/* --- Series: 2px. Puntos de 8px de diámetro como mínimo ------------------ */

.serie {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.serie--acwr {
  stroke: var(--rodaje);
  stroke-width: 3;
}

.punto {
  stroke: var(--superficie);
  stroke-width: 1.5;
}

.punto--acwr { fill: var(--rodaje); }

/* Hueco = calculado con kilómetros planificados, no con los corridos. */
.punto--planificado {
  fill: var(--superficie);
  stroke: var(--rodaje);
  stroke-width: 2;
}

.etiqueta-directa {
  fill: var(--tinta);
  font-size: 12px;
  font-weight: 700;
}

.etiqueta-directa--aviso {
  fill: var(--tinta-2);
  font-weight: 600;
  font-size: 11px;
}

/* --- Gráfico 1: barras --------------------------------------------------- */

.barra-plan { fill: var(--rodaje); }

.barra-grupo--descarga .barra-plan { fill: var(--rodaje-claro); }

.barra-real { fill: var(--tinta); }

/* --- Gráfico 2: lesiones ------------------------------------------------- */

.lesion__halo {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 1;
}

.lesion__aspa {
  stroke: var(--tinta);
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* --- Gráfico 3: zona objetivo y aviso ------------------------------------ */

.zona-objetivo {
  fill: var(--rodaje-claro);
  opacity: 0.22;
}

.linea-aviso {
  stroke: var(--tinta-2);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.partida__punto {
  fill: var(--superficie);
  stroke: var(--tinta);
  stroke-width: 2.5;
}

.partida__guia {
  stroke: var(--tinta-3);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

/* --- Zonas sensibles: invisibles, grandes y por encima de todo ----------- */

.sensible {
  fill: transparent;
  cursor: pointer;
}

/* --- Leyenda: el color nunca va solo ------------------------------------- */

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin-top: var(--e3);
}

.leyenda__item {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: 0.75rem;
  color: var(--tinta-2);
}

.leyenda__marca {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  flex: none;
}

/* --- Ver datos ----------------------------------------------------------- */

.grafico__ver-datos {
  margin-top: var(--e3);
  font-size: 0.8125rem;
}

.grafico__datos { margin-top: var(--e3); }

.grafico__datos table + table { margin-top: var(--e4); }

.grafico__pie {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

.grafico__pie strong { color: var(--tinta); }

/* --- Tus datos: guardar e importar --------------------------------------- */

.datos__explica,
.datos__cuenta {
  margin-top: var(--e2);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

.datos__explica strong,
.datos__cuenta strong { color: var(--tinta); }

.datos__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}

.datos__botones .btn { flex: 1 1 auto; }

/* El input de fichero es feo y distinto en cada navegador: se esconde y se
   pulsa la etiqueta, que ya tiene pinta de botón. */
.datos__importar {
  position: relative;
  cursor: pointer;
}

.datos__importar input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* El foco del teclado tiene que verse en la etiqueta, no en el input oculto. */
.datos__importar:focus-within {
  outline: 2px solid var(--rodaje);
  outline-offset: 2px;
}

.datos__aviso {
  margin-top: var(--e2);
  font-size: 0.8125rem;
  line-height: 1.4;
  min-height: 1.2em;
}

.datos__aviso--bien { color: var(--tinta); font-weight: 600; }
.datos__aviso--mal { color: var(--tinta); font-weight: 600; }

.datos__aviso--mal::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--e2);
  border-radius: 50%;
  background: var(--rojo);
}

.datos__letra-pequena {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

.datos__letra-pequena strong { color: var(--tinta); }

/* --- La cuenta de Google ------------------------------------------------- */

.cuenta {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
}

.cuenta__explica,
.cuenta__quien {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tinta-2);
  margin-bottom: var(--e2);
}

.cuenta__quien strong { color: var(--tinta); }

.cuenta__salir {
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cuenta__aviso {
  margin-top: var(--e2);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--tinta-2);
}

.cuenta__aviso--mal { color: var(--tinta); font-weight: 600; }

.cuenta__letra-pequena {
  margin-top: var(--e2);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

.cuenta__letra-pequena strong { color: var(--tinta); }

/* --- Indicador de sincronización, en la cabecera -------------------------- */

.sincro {
  display: flex;
  align-items: center;
  gap: var(--e1);
  flex: none;
  font-size: 0.6875rem;
  color: var(--tinta-2);
  white-space: nowrap;
}

/* De esconderlo cuando no hay nada que contar se encarga la regla [hidden] de
   styles.css, que vale para todo el proyecto. */

.sincro__punto {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--tinta-3);
}

/* El color acompaña, pero la palabra de al lado es la que informa. */
.sincro[data-sincro="sincronizado"] .sincro__punto { background: var(--verde); }
.sincro[data-sincro="sin-conexion"] .sincro__punto { background: var(--amarillo); }
.sincro[data-sincro="sin-sesion"] .sincro__punto { background: var(--tinta-3); }
.sincro[data-sincro="error"] .sincro__punto { background: var(--naranja); }

/* El texto NO se esconde en móvil. Sería dejar el significado en manos del
   color, que es justo lo que este proyecto no hace. Por eso las palabras son
   cortas: la explicación larga va en el title. */

/* --- Tooltip ------------------------------------------------------------- */

.tooltip {
  position: absolute;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 260px;
  padding: var(--e2);
  background: var(--superficie);
  border: 1px solid var(--eje);
  border-radius: var(--radio-s);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--tinta-2);
  pointer-events: none;
}

.tooltip span:first-child {
  font-weight: 700;
  color: var(--tinta);
}

/* -------------------------------------------------------------------------
   VISTA ESPALDA
   ------------------------------------------------------------------------- */

.vista-espalda {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.cargando {
  padding: var(--e8) var(--e4);
  text-align: center;
  color: var(--tinta-2);
}

.seccion__cabecera { margin-bottom: var(--e3); }

.seccion__cabecera .seccion__titulo { margin-bottom: 2px; }

.seccion__meta {
  font-size: 0.75rem;
  color: var(--tinta-2);
}

.stats--dos { grid-template-columns: 1fr 1fr; }

@media (min-width: 480px) {
  .stats--dos { grid-template-columns: 1fr 1fr; }
}

/* --- Los ejercicios ------------------------------------------------------ */

.ejercicios {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-bottom: var(--e4);
}

.ejercicio {
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  background: var(--superficie);
}

.ejercicio--hecho { background: var(--plano); }

.ejercicio__boton {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  min-height: 44px;
  padding: var(--e3);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.ejercicio__caja {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border: 2px solid var(--eje);
  border-radius: var(--radio-s);
  font-size: 0.875rem;
  font-weight: 700;
}

.ejercicio--hecho .ejercicio__caja {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--superficie);
}

.ejercicio__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ejercicio__nombre {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.ejercicio__numero {
  flex: none;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.ejercicio__dosis {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.ejercicio__clave {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--tinta-2);
}

/* --- Calendario de adherencia -------------------------------------------- */

.cuadricula {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--e1);
  margin-top: var(--e3);
}

@media (min-width: 480px) {
  .cuadricula { grid-template-columns: repeat(15, 1fr); }
}

/* El cuadro relleno lleva su ✓ dentro: el color no va solo. */
.cuadro {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--plano);
  border: 1px solid var(--linea);
  border-radius: 3px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--superficie);
}

.cuadro--hecho {
  background: var(--tinta);
  border-color: var(--tinta);
}

.cuadro--hoy {
  outline: 2px solid var(--tinta-2);
  outline-offset: 1px;
}

.cuadricula__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  margin-top: var(--e3);
  font-size: 0.75rem;
  color: var(--tinta-2);
}

.cuadricula__clave {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.cuadricula__clave .cuadro {
  width: 14px;
  height: 14px;
  aspect-ratio: auto;
  flex: none;
}

/* --- Botones del semáforo ------------------------------------------------ */

.semaforo-botones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e2);
}

@media (min-width: 560px) {
  .semaforo-botones { grid-template-columns: repeat(4, 1fr); }
}

/* Color + icono + palabra. Los tres, siempre. */
.semaforo-boton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  min-height: 76px;
  padding: var(--e2);
  background: var(--superficie);
  border: 2px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
}

.semaforo-boton__icono {
  display: flex;
  color: var(--color-semaforo);
}

.semaforo-boton__icono .icono {
  width: 22px;
  height: 22px;
}

.semaforo-boton__palabra {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--tinta);
}

.semaforo-boton:hover { background: var(--plano); }

/* El elegido: borde grueso del color MÁS el fondo cambiado. */
.semaforo-boton--activo {
  border-color: var(--color-semaforo);
  background: var(--plano);
}

.semaforo-boton__elegido {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}

.semaforo-vacio {
  margin-top: var(--e3);
  font-size: 0.875rem;
  color: var(--tinta-2);
}

.semaforo-accion {
  margin-top: var(--e3);
  padding: var(--e3);
  background: var(--plano);
  border-left: 4px solid var(--color-semaforo);
  border-radius: var(--radio-s);
}

.semaforo-accion__criterio {
  font-size: 0.8125rem;
  color: var(--tinta-2);
  line-height: 1.4;
}

.semaforo-accion__titulo {
  margin-top: var(--e2);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}

.semaforo-accion__texto {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.semaforo-accion__borrar {
  min-height: 44px;
  margin-top: var(--e1);
  padding: 0;
  background: none;
  border: 0;
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --- Tira del historial --------------------------------------------------- */

.tira {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--e1);
}

@media (min-width: 480px) {
  .tira { grid-template-columns: repeat(15, 1fr); }
}

.tira__dia {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--plano);
  border: 1px solid var(--color-semaforo, var(--linea));
  border-radius: 3px;
  color: var(--color-semaforo);
}

.tira__dia--vacio { border-style: dashed; }

.tira__icono { display: flex; }
.tira__icono .icono { width: 11px; height: 11px; }

.leyenda--semaforo { gap: var(--e2) var(--e3); }

/* --- Aviso de la regla ---------------------------------------------------- */

.aviso--regla { border-left-color: var(--naranja); }

.aviso__texto {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.35;
}

.aviso__detalle {
  margin-top: var(--e1);
  font-size: 0.8125rem;
}

/* --- Notas ---------------------------------------------------------------- */

.campo textarea {
  width: 100%;
  padding: var(--e2);
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--eje);
  border-radius: var(--radio-s);
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
}

.campo__ayuda {
  margin-top: var(--e1);
  font-size: 0.75rem;
  color: var(--tinta-2);
}

/* -------------------------------------------------------------------------
   VISTA NUTRICIÓN
   ------------------------------------------------------------------------- */

.vista-nutricion {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

/* --- Lo de hoy ------------------------------------------------------------ */

.objetivo-ch {
  padding: var(--e3);
  background: var(--plano);
  border-radius: var(--radio-s);
}

.objetivo-ch__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}

.objetivo-ch__sesion {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.objetivo-ch__cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2);
  margin-top: var(--e2);
}

.objetivo-ch__cifra strong {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.objetivo-ch__totales {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.objetivo-ch__texto,
.objetivo-ch__falta {
  margin-top: var(--e1);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--tinta-2);
}

.comidas {
  display: flex;
  flex-direction: column;
  margin-top: var(--e3);
}

.comida {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--linea);
}

.comida:last-child { border-bottom: 0; }

.comida__nombre {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
  padding-top: 2px;
}

.comida__texto {
  font-size: 0.875rem;
  line-height: 1.4;
}

.comidas__falta,
.panel__falta {
  margin-top: var(--e3);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

/* --- Pestañas ------------------------------------------------------------- */

.pestanas {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

.pestanas__lista {
  display: flex;
  border-bottom: 1px solid var(--linea);
}

.pestana {
  flex: 1;
  min-height: 48px;
  padding: var(--e2) var(--e1);
  background: var(--plano);
  border: 0;
  border-right: 1px solid var(--linea);
  color: var(--tinta-2);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.pestana:last-child { border-right: 0; }

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

/* La activa: fondo distinto MÁS una barra abajo, no solo color de texto. */
.pestana--activa {
  position: relative;
  background: var(--superficie);
  color: var(--tinta);
}

.pestana--activa::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--tinta);
}

.pestanas__panel { padding: var(--e3); }
.pestanas__panel:focus { outline: none; }

.panel__subtitulo {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
  margin-bottom: var(--e1);
}

/* --- Selectores de semana y día ------------------------------------------ */

.selector + .selector { margin-top: var(--e3); }

.selector__etiqueta {
  display: block;
  margin-bottom: var(--e1);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}

.selector__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}

.selector__boton {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--e2);
  background: var(--superficie);
  border: 1px solid var(--eje);
  border-radius: var(--radio-s);
  color: var(--tinta);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.selector__boton:hover { background: var(--plano); }

.selector__boton--activo {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--superficie);
}

/* Sin menú puesto: se marca con el borde de puntos, no solo con el color. */
.selector__boton--vacio {
  border-style: dashed;
  color: var(--tinta-2);
}

.selector__boton--vacio.selector__boton--activo { color: var(--superficie); }

.comidas--rotacion { margin-top: var(--e4); }

.reglas-nutricion {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
}

/* --- La compra ------------------------------------------------------------ */

.compra {
  display: grid;
  gap: var(--e4);
}

@media (min-width: 560px) {
  .compra { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.compra__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}

.compra__articulo {
  position: relative;
  padding-left: var(--e4);
  font-size: 0.875rem;
  line-height: 1.4;
}

.compra__articulo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border: 1px solid var(--eje);
  border-radius: 2px;
}

/* --- Protocolo de carrera ------------------------------------------------- */

.protocolo {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.protocolo__fila dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
  margin-bottom: 2px;
}

.protocolo__fila dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.nota-pie {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

.nota-pie code,
.panel__falta code,
.comidas__falta code,
.objetivo-ch__falta code {
  padding: 1px var(--e1);
  background: var(--plano);
  border: 1px solid var(--linea);
  border-radius: 3px;
  font-size: 0.8125em;
}

/* -------------------------------------------------------------------------
   Aviso de "sin conexión"
   Discreto: dice lo que pasa y se quita de en medio. La app funciona igual.
   ------------------------------------------------------------------------- */

.sin-conexion {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--alto-nav) + var(--e2) + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--e2);
  max-width: calc(100% - var(--e6));
  padding: var(--e1) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--eje);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--tinta-2);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
}

.sin-conexion svg {
  width: 14px;
  height: 14px;
  flex: none;
}

@media (min-width: 768px) {
  .sin-conexion {
    left: auto;
    right: var(--e4);
    transform: none;
    bottom: var(--e4);
  }
}

/* -------------------------------------------------------------------------
   Tablas
   ------------------------------------------------------------------------- */

.tabla-envoltorio { width: 100%; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th, td {
  padding: var(--e2) var(--e2);
  text-align: left;
  border-bottom: 1px solid var(--linea);
}

th {
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}