@layer components {
  /* ---------- Estructura de la app ---------- */
  .app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--acero);
  }

  .vista {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pantalla {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* position: relative hace de este contenedor el límite de los elementos absolutos que lleva dentro (textos ocultos),
     para que no ensanchen el documento y lo dejen desplazarse. */
  .cuerpo {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--space-2);
  }

  .zona-inferior { flex: 0 0 auto; }

  .cabecera {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: calc(env(safe-area-inset-top, 0px) + var(--space-2)) var(--space-2) 0 var(--space-4);
  }

  /* Con botón de volver o de ajustes al lado, el título ocupa el hueco y queda a la izquierda. */
  .cabecera .titulo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

  .titulo {
    font-family: var(--fuente-display);
    font-size: 2.125rem;
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: normal;
  }

  .subtitulo {
    margin: var(--space-1) var(--space-4) 0;
    color: var(--tinta-suave);
  }

  .seccion-titulo {
    margin: var(--space-5) var(--space-4) var(--space-2);
    font-size: 0.9375rem;
    line-height: 1.33;
    font-weight: 600;
    color: var(--tinta-suave);
  }

  .estado-vacio {
    margin: var(--space-5) var(--space-4);
    color: var(--tinta-suave);
  }

  /* ---------- Botones ---------- */
  .boton-icono {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-campo);
    color: var(--tinta);
  }
  .boton-icono--suave { color: var(--tinta-suave); }

  .boton-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-boton);
    background: var(--brasa);
    color: var(--sobre-brasa);
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .boton-principal:active { filter: brightness(0.92); }

  .boton-secundario {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-4);
    border: 1.5px solid var(--tinta-suave);
    border-radius: var(--radius-boton);
    color: var(--tinta);
    font-weight: 600;
  }

  .boton-peligro { color: var(--alerta); border-color: var(--alerta); }

  .boton-texto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    min-width: 72px;
    padding: 0 var(--space-3);
    color: var(--brasa);
    font-weight: 600;
  }
  .boton-texto--suave { color: var(--tinta-suave); min-height: 44px; min-width: 44px; }
  .boton-texto--tinta { color: var(--tinta); }

  [aria-disabled="true"], button:disabled { opacity: 0.5; cursor: default; }

  /* ---------- Listas de filas ---------- */
  .lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 var(--space-4);
  }

  .fila-lista {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 64px;
    padding: 0 var(--space-1) 0 var(--space-4);
    border-radius: var(--radius-campo);
    background: var(--superficie);
    text-align: left;
  }
  .fila-lista--56 { min-height: 56px; }
  .fila-lista--derecha { padding-right: var(--space-3); }

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

  .fila-lista__enlace {
    flex: 1 1 auto;
    align-self: stretch;
    justify-content: center;
  }

  .fila-lista__titulo {
    font-size: 1.125rem;
    line-height: 1.33;
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  .fila-lista__titulo--medio { font-size: 1rem; line-height: 1.4; font-weight: 600; }

  .fila-lista__sub {
    font-size: 0.8125rem;
    line-height: 1.385;
    font-weight: 500;
    color: var(--tinta-suave);
  }

  .fila-ajuste {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-campo);
    background: var(--superficie);
  }
  .fila-ajuste__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; }
  .fila-ajuste__titulo { font-weight: 600; }
  .fila-ajuste__ayuda { font-size: 0.8125rem; line-height: 1.385; font-weight: 500; color: var(--tinta-suave); }

  /* ---------- Figura provisional de ejercicio ---------- */
  .figura {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-campo);
    background: var(--acero);
    color: var(--tinta-suave);
  }
  .figura svg { width: 32px; height: 32px; }
  .figura--grande { width: 96px; height: 96px; }
  .figura--grande svg { width: 64px; height: 64px; }

  .fila-ejercicio {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-3);
    border-radius: var(--radius-campo);
    background: var(--superficie);
    text-align: left;
  }

  /* ---------- Tabla de series ---------- */
  .bloque-ejercicio { margin: 0 var(--space-4); }

  .bloque-ejercicio__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding-top: var(--space-2);
  }

  .bloque-ejercicio__nombre {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.125rem;
    line-height: 1.33;
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .tabla-series {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0 2px;
  }

  .tabla-series th {
    height: 24px;
    padding: 0 0 0 var(--space-2);
    font-size: 0.8125rem;
    line-height: 1.385;
    font-weight: 500;
    color: var(--tinta-suave);
    text-align: center;
  }
  .tabla-series th:first-child { padding-left: 0; }

  .tabla-series td {
    height: 56px;
    padding: 0 0 0 var(--space-2);
    text-align: center;
    vertical-align: middle;
    background: var(--superficie);
    transition: background-color 80ms linear;
  }
  .tabla-series td:first-child { padding-left: 0; border-radius: var(--radius-campo) 0 0 var(--radius-campo); }
  .tabla-series td:last-child { border-radius: 0 var(--radius-campo) var(--radius-campo) 0; }

  .fila-serie.is-done td { background: var(--templada); }
  /* Al marcar, la fila se enciende en brasa y se enfría hasta quedar templada. */
  .fila-serie.is-hot td { background: var(--brasa); transition: none; }

  @media (prefers-reduced-motion: no-preference) {
    .tabla-series td { transition: background-color var(--dur-estandar) var(--ease-out); }
  }

  .col-serie { width: 36px; }
  .col-campo { width: 80px; }
  .col-marca { width: 64px; }

  .numero-serie {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tinta-suave);
  }

  .valor-anterior {
    display: block;
    width: 100%;
    min-height: 48px;
    font-size: 0.9375rem;
    color: var(--tinta-suave);
  }

  .campo-numerico {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-campo);
    background: var(--acero);
    color: var(--tinta);
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .campo-numerico::placeholder { color: var(--tinta-suave); opacity: 1; }
  .campo-numerico[aria-invalid="true"] { color: var(--alerta); box-shadow: inset 0 0 0 2px var(--alerta); }

  .marca-serie {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border: 2px solid var(--tinta-suave);
    border-radius: 24px;
    color: var(--sobre-brasa);
  }
  .marca-serie svg { visibility: hidden; }
  .marca-serie[aria-checked="true"] { background: var(--brasa); border-color: var(--brasa); }
  .marca-serie[aria-checked="true"] svg { visibility: visible; }

  .anadir-serie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 48px;
    color: var(--brasa);
    font-weight: 600;
  }

  .error-campo {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-1) 0;
    font-size: 0.8125rem;
    line-height: 1.385;
    font-weight: 500;
    color: var(--alerta);
  }
  .error-campo svg { flex: 0 0 auto; margin-top: 1px; }

  /* ---------- Barras fijas: descanso, retomar, ajuste y navegación ---------- */
  .barra-descanso,
  .barra-retomar,
  .barra-ajuste {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: 0 var(--space-2) 0 var(--space-4);
    background: var(--superficie);
  }

  .barra-descanso__tiempo {
    min-width: 76px;
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: 700;
  }

  .barra-descanso__pista {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--acero);
    overflow: hidden;
  }
  .barra-descanso__relleno {
    height: 100%;
    background: var(--brasa);
    transform-origin: left center;
    transform: scaleX(var(--progreso, 0));
  }

  .boton-barra {
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-1);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tinta);
  }
  .boton-barra--brasa { color: var(--brasa); }

  .barra-retomar { justify-content: space-between; border-top: 2px solid var(--acero); }
  .barra-retomar__texto { display: flex; flex-direction: column; min-width: 0; }
  .barra-retomar__titulo { font-weight: 600; line-height: 1.3; }
  .barra-retomar__sub { font-size: 0.8125rem; line-height: 1.3; color: var(--tinta-suave); }

  .barra-ajuste { justify-content: space-between; border-top: 2px solid var(--acero); }
  .barra-ajuste__grupo { display: flex; gap: var(--space-2); }
  .barra-ajuste .boton-barra {
    min-width: 72px;
    border-radius: var(--radius-campo);
    background: var(--acero);
    font-size: 1rem;
  }

  .barra-inferior {
    display: flex;
    min-height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--superficie);
    border-top: 2px solid var(--acero);
  }

  .pestana {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    min-width: 48px;
    font-size: 0.8125rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--tinta-suave);
  }
  .pestana[aria-current="page"] { color: var(--tinta); font-weight: 700; }
  .pestana svg { stroke-width: 2; }
  .pestana[aria-current="page"] svg { stroke-width: 2.6; }

  /* ---------- Controles segmentados (periodo, unidades, tema) ---------- */
  .segmentado { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .segmentado button {
    min-width: 52px;
    min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-campo);
    color: var(--tinta-suave);
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .segmentado button[aria-pressed="true"] { background: var(--tinta); color: var(--acero); }

  /* ---------- Formularios ---------- */
  .grupo-campo { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
  .etiqueta { font-size: 0.8125rem; line-height: 1.385; font-weight: 500; color: var(--tinta-suave); }

  .campo-texto {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-campo);
    background: var(--acero);
    color: var(--tinta);
  }
  .campo-texto::placeholder { color: var(--tinta-suave); opacity: 1; }
  .campo-texto[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--alerta); }

  select.campo-texto { appearance: none; background-image: none; padding-right: 40px; }

  .selector { position: relative; }
  .selector svg {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--tinta-suave);
  }

  .hoja__acciones { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }

  .opciones-tipo { display: flex; flex-direction: column; gap: 2px; }
  .opcion-tipo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-campo);
    background: var(--acero);
    text-align: left;
    font-weight: 500;
  }
  .opcion-tipo[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--brasa); font-weight: 600; }

  /* ---------- Hoja inferior ---------- */
  .capa-hojas {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
  }
  .capa-hojas.is-abierta { pointer-events: auto; }

  .hoja-velo {
    position: absolute;
    inset: 0;
    background: var(--velo);
    opacity: 0;
    transition: opacity 80ms linear;
  }

  .hoja {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 90dvh;
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-hoja) var(--radius-hoja) 0 0;
    background: var(--superficie);
    opacity: 0;
    transition: opacity 80ms linear;
  }

  /* El asa se ve de 36 por 4 px, pero la zona que se puede agarrar es de 80 por 28 px. */
  .hoja__asa {
    flex: 0 0 auto;
    width: 80px;
    height: 28px;
    padding: 12px 22px;
    margin: calc(var(--space-1) * -1) auto var(--space-1);
    background: var(--tinta-suave);
    background-clip: content-box;
    opacity: 0.5;
    touch-action: none;
  }

  .hoja__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .hoja__titulo {
    font-family: var(--fuente-display);
    font-size: 2.125rem;
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: normal;
  }

  .capa-hojas.is-abierta .hoja-velo,
  .capa-hojas.is-abierta .hoja { opacity: 1; }

  @media (prefers-reduced-motion: no-preference) {
    .hoja-velo { transition: opacity var(--dur-hoja) var(--ease-out); }
    .hoja {
      opacity: 1;
      transform: translateY(100%);
      transition: transform var(--dur-hoja) var(--ease-drawer);
    }
    .capa-hojas.is-abierta .hoja { transform: translateY(var(--arrastre, 0px)); }
    .capa-hojas.is-arrastrando .hoja { transition: none; }
  }

  /* ---------- Gráfica de progreso ---------- */
  .tarjeta-grafica {
    margin: var(--space-2) var(--space-4) 0;
    min-height: 192px;
    padding: var(--space-3) var(--space-4) var(--space-2);
    border-radius: var(--radius-campo);
    background: var(--superficie);
  }

  .grafica-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .grafica-cab__etiqueta { font-size: 0.8125rem; line-height: 1.385; font-weight: 500; color: var(--tinta-suave); }
  .grafica-cab__valor { font-size: 1.25rem; line-height: 1.2; font-weight: 600; }

  .grafica { width: 100%; height: auto; margin-top: 2px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .grafica__eje { stroke: var(--acero); stroke-width: 2; }
  .grafica__texto { fill: var(--tinta-suave); font-size: 13px; font-family: var(--fuente-texto); font-weight: 500; }
  .grafica__linea { fill: none; stroke: var(--brasa); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .grafica__anillo { fill: var(--superficie); }
  .grafica__punto { fill: var(--brasa); }
  .grafica__guia { stroke: var(--tinta-suave); stroke-width: 1; }
  .grafica__valor-guia { fill: var(--tinta); font-size: 13px; font-weight: 600; font-family: var(--fuente-texto); }

  .tabla-datos { width: 100%; border-spacing: 0 2px; font-size: 0.9375rem; }
  .tabla-datos th { padding: var(--space-1) var(--space-3); text-align: left; font-size: 0.8125rem; font-weight: 500; color: var(--tinta-suave); }
  .tabla-datos td { padding: var(--space-2) var(--space-3); background: var(--superficie); }
  .tabla-datos td:first-child { border-radius: var(--radius-campo) 0 0 var(--radius-campo); }
  .tabla-datos td:last-child { border-radius: 0 var(--radius-campo) var(--radius-campo) 0; text-align: right; }

  .insignia-record {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1.5px solid var(--brasa);
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .bloqueo-premium {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 var(--space-2);
    border: 1.5px solid var(--tinta-suave);
    border-radius: 12px;
    color: var(--tinta-suave);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  /* ---------- Calendario de entrenos ---------- */
  .calendario-semana,
  .calendario {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--space-2);
    margin: 0 var(--space-4);
  }
  .calendario-semana { font-size: 0.8125rem; line-height: 1.385; font-weight: 500; color: var(--tinta-suave); text-align: center; }
  .calendario { row-gap: 6px; margin-top: var(--space-1); }

  .dia {
    display: grid;
    place-items: center;
    min-height: 44px;
    border-radius: var(--radius-campo);
    background: var(--superficie);
    color: var(--tinta-suave);
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .dia[data-nivel="1"] { background: var(--cal-1); color: var(--tinta); }
  .dia[data-nivel="2"] { background: var(--cal-2); color: var(--tinta); }
  .dia[data-nivel="3"] { background: var(--cal-3); color: var(--sobre-brasa); }
  .dia[data-futuro="true"] { background: transparent; color: var(--tinta-suave); font-weight: 400; }

  /* ---------- Avisos ---------- */
  .avisos {
    position: fixed;
    left: var(--space-4);
    right: var(--space-4);
    top: calc(env(safe-area-inset-top, 0px) + var(--space-2));
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
  }
  .aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-campo);
    background: var(--tinta);
    color: var(--acero);
    font-size: 0.9375rem;
    font-weight: 600;
    pointer-events: auto;
  }
  .aviso--error { background: var(--superficie); color: var(--alerta); box-shadow: inset 0 0 0 1.5px var(--alerta); }
  .aviso svg { flex: 0 0 auto; margin-top: 2px; }

  /* ---------- Dígito de ancho fijo ---------- */
  /* Big Shoulders no tiene cifras tabulares: cada dígito va en una celda de ancho fijo para que el contador no baile. */
  .digito {
    display: inline-block;
    width: 0.49em;
    text-align: center;
  }
  .digito--sep { width: 0.2em; }
}