@layer screens {
  /* ---------- Columna centrada en pantallas anchas ---------- */
  @media (min-width: 600px) {
    .app {
      max-width: 480px;
      margin-inline: auto;
    }

    /* Las hojas se quedan dentro de la columna de la app. */
    .hoja {
      max-width: 480px;
      margin-inline: auto;
    }

    .avisos {
      max-width: 448px;
      margin-inline: auto;
    }
  }

  /* ---------- Menos de 360 px: ajuste de emergencia de la tabla de series ---------- */
  @media (max-width: 359px) {
    .col-campo { width: 72px; }
    .col-marca { width: 56px; }
    .campo-numerico { font-size: 1.125rem; }
    .marca-serie { width: 44px; height: 44px; }
    .valor-anterior { font-size: 0.8125rem; }
  }

  /* ---------- Entrenar ---------- */
  .entrenar__retomar { margin: var(--space-5) var(--space-4) 0; }
  .entrenar__acciones { flex: 0 0 auto; padding: 0 var(--space-4) var(--space-4); }
  .entrenar__lista { margin-top: 0; }

  /* ---------- Entrenamiento activo ---------- */
  .cabecera-activa {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: calc(env(safe-area-inset-top, 0px) + var(--space-2)) var(--space-2) 0 var(--space-2);
  }
  .cabecera-activa__centro { display: flex; align-items: baseline; gap: var(--space-3); }
  .cabecera-activa__titulo { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; }
  .cabecera-activa__tiempo { font-size: 1.0625rem; font-weight: 500; color: var(--tinta-suave); }
  .activo__pie { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) var(--space-4) var(--space-2); }

  /* ---------- Progreso ---------- */
  /* Un botón no se estira solo: el ancho se calcula restando los márgenes laterales. */
  .progreso__selector { margin: var(--space-4) var(--space-4) 0; width: calc(100% - 2 * var(--space-4)); }
  .progreso__periodos { margin: var(--space-2) var(--space-4) 0; }
  .progreso__fila { margin: var(--space-2) var(--space-4) 2px; }
  .progreso__fila + .progreso__fila { margin-top: 0; }
  .progreso__valor { font-size: 1.25rem; font-weight: 600; }
  .progreso__unidad { font-size: 0.8125rem; font-weight: 500; color: var(--tinta-suave); }
  .progreso__acciones { padding: var(--space-3) var(--space-4) var(--space-2); }

  /* ---------- Resumen ---------- */
  .resumen__cuerpo { padding: 0 var(--space-4) var(--space-4); }
  .resumen__volumen {
    margin-top: var(--space-5);
    font-family: var(--fuente-display);
    font-size: 4rem;
    line-height: 0.95;
    font-weight: 800;
    font-variant-numeric: normal;
    color: var(--brasa);
  }
  .resumen__volumen.is-enfriado { color: var(--tinta); }
  @media (prefers-reduced-motion: no-preference) {
    .resumen__volumen { transition: color var(--dur-dramatica) var(--ease-out); }
  }
  .resumen__unidad { margin-left: var(--space-2); font-size: 1.5rem; font-weight: 700; }
  .resumen__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: var(--space-5); }
  .resumen__dato { padding: var(--space-3) var(--space-3); border-radius: var(--radius-campo); background: var(--superficie); }
  .resumen__dato-valor { font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
  .resumen__records { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
  .resumen__record { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .resumen__acciones { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }

  @media (prefers-reduced-motion: no-preference) {
    .resumen__record {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity var(--dur-estandar) var(--ease-out), transform var(--dur-estandar) var(--ease-out);
      transition-delay: calc(var(--i, 0) * 80ms);
    }
    .resumen__record.is-visible { opacity: 1; transform: none; }
  }

  /* ---------- Biblioteca y detalle de ejercicio ---------- */
  .ejercicios__filtros { display: flex; gap: var(--space-2); margin: var(--space-3) var(--space-4) 0; }
  .ejercicios__filtros .grupo-campo { flex: 1 1 0; margin-bottom: 0; }
  .ejercicios__buscar { margin: var(--space-3) var(--space-4) 0; }
  .ejercicios__lista { margin-top: var(--space-3); }
  /* Los campos que van sobre el fondo de la pantalla usan la superficie; los de las hojas y filas, el acero hundido. */
  .ejercicios__buscar .campo-texto,
  .ejercicios__filtros .campo-texto { background: var(--superficie); }
  .detalle__cab { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-4) var(--space-4) 0; }
  .detalle__historial { margin-top: var(--space-2); }

  /* ---------- Rutinas ---------- */
  .rutinas__acciones { flex: 0 0 auto; padding: 0 var(--space-4) var(--space-4); }
  .editor__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .editor__series { display: flex; align-items: center; gap: var(--space-1); }
  .editor__cuenta { min-width: 72px; text-align: center; font-weight: 600; }
  .editor__acciones { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4); }

  /* ---------- Ajustes ---------- */
  .ajustes__lista { margin-top: var(--space-4); }

  /* ---------- Hojas con contenido ---------- */
  .hoja-premium__fila { margin-bottom: 2px; padding: 10px var(--space-4); border-radius: var(--radius-campo); background: var(--acero); }
  .hoja-premium__etiqueta { font-size: 0.8125rem; line-height: 1.385; font-weight: 500; color: var(--tinta-suave); }
  .hoja-premium__sub { margin: var(--space-1) 0 var(--space-4); color: var(--tinta-suave); }
  .hoja-premium__texto--suave { color: var(--tinta-suave); }
  .resumen__subtitulo { margin-inline: 0; }
  .hoja-premium__acciones { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
}