/* Plantilla de la app (F4): cabecera, pantallas, barra inferior y cambio de pantalla. Solo usa variables de tokens.css.
   Móvil primero; en el PC, una columna centrada y la barra flotando abajo. */

/* Saltar al contenido (teclado y lectores de pantalla) */
.saltar { position: absolute; left: var(--esp-3); top: -100px; z-index: var(--capa-avisos); padding: var(--esp-2) var(--esp-4); border-radius: var(--radio-pildora); background: var(--degradado-marca); color: var(--sobre-acento); font-weight: 700; }
.saltar:focus { top: calc(var(--esp-2) + env(safe-area-inset-top)); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--capa-cabecera);
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: calc(var(--esp-2) + env(safe-area-inset-top)) var(--margen-pagina) var(--esp-2);
  padding-inline: max(var(--margen-pagina), calc((100% - var(--ancho-max)) / 2 + var(--margen-pagina)));
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--borde) solid color-mix(in srgb, var(--linea) 60%, transparent);
}
.cabecera-logo { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--toque); color: var(--texto); text-decoration: none; font-family: var(--fuente-titulos); font-weight: 600; font-size: var(--texto-l); }
.cabecera-logo img { width: 32px; height: 32px; }

/* ---------- Pantallas ---------- */
.contenido {
  display: block;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--esp-4) var(--margen-pagina) calc(var(--alto-barra-movil) + var(--esp-7) + env(safe-area-inset-bottom));
  outline: none;
}
.pagina { display: grid; gap: var(--esp-5); }
.pagina-cabecera { display: grid; gap: var(--esp-1); padding-top: var(--esp-2); }
.pagina-rotulo { font-family: var(--fuente-datos); font-size: var(--texto-xs); letter-spacing: var(--espaciado-etiquetas); text-transform: uppercase; color: var(--naranja); }
.pagina-titulo { font-family: var(--fuente-titulos); font-size: var(--texto-2xl); font-weight: 600; line-height: 1.15; }
.pagina-subtitulo { color: var(--texto-suave); }

/* Estado vacío: icono en su halo, qué falta y qué hacer */
.vacio { display: grid; justify-items: center; gap: var(--esp-3); padding: var(--esp-7) var(--esp-4); text-align: center; border: var(--borde) dashed var(--linea-fuerte); border-radius: var(--radio-2xl); background: var(--degradado-halo); }
.vacio-icono { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: var(--naranja); background: var(--superficie-2); border: var(--borde) solid var(--acento-borde); box-shadow: var(--brillo); }
.vacio-titulo { font-family: var(--fuente-titulos); font-size: var(--texto-l); }
.vacio-texto { max-width: 34ch; color: var(--texto-suave); }

/* ---------- Barra inferior ---------- */
.barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--capa-menu);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  height: calc(var(--alto-barra-movil) + env(safe-area-inset-bottom));
  padding: 0 var(--esp-2) env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: var(--borde) solid var(--linea);
}
.barra-enlace {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  height: var(--alto-barra-movil);
  color: var(--texto-suave);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--duracion) var(--curva), transform var(--duracion) var(--curva);
}
.barra-enlace:active { transform: scale(0.92); }
.barra-enlace[aria-current="page"] { color: var(--naranja); }
/* La sección actual: una rayita con brillo encima del icono */
.barra-enlace[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 var(--radio-s) var(--radio-s); background: var(--degradado-marca); box-shadow: var(--brillo); }
.barra-enlace:focus-visible { outline: 2px solid var(--naranja); outline-offset: -4px; border-radius: var(--radio-l); }

/* En el PC: la barra flota centrada abajo, como una píldora */
@media (min-width: 701px) {
  .barra-inferior {
    left: 50%;
    right: auto;
    bottom: var(--esp-4);
    width: 460px;
    height: var(--alto-barra-movil);
    padding: 0 var(--esp-3);
    transform: translateX(-50%);
    border: var(--borde) solid var(--linea-fuerte);
    border-radius: var(--radio-pildora);
    box-shadow: var(--sombra-l);
  }
  .contenido { padding-top: var(--esp-6); padding-bottom: calc(var(--alto-barra-movil) + var(--esp-8)); }
}

/* ---------- Cambio de pantalla (de Entreteniment F25) ---------- */
/* La pantalla actual se queda tal cual hasta que la nueva está lista; si tarda, una barra fina arriba. */
.barra-carga { position: fixed; inset: 0 0 auto 0; height: 3px; overflow: hidden; z-index: var(--capa-carga); pointer-events: none; opacity: 0; transition: opacity var(--duracion) var(--curva); }
.barra-carga::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 3px; background: var(--degradado-marca); box-shadow: var(--brillo); transform: translateX(-100%); }
body.cargando-lento .barra-carga { opacity: 1; }
body.cargando-lento .barra-carga::after { animation: barra-carga 1.1s var(--curva) infinite; }
@keyframes barra-carga { to { transform: translateX(300%); } }
/* Fundido corto de toda la pantalla y la pieza tocada que crece hasta la pantalla nueva (data-transicion) */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--duracion-pantalla); animation-timing-function: var(--curva); }
::view-transition-group(pieza) { animation-duration: var(--duracion-pantalla); animation-timing-function: var(--curva); }
::view-transition-image-pair(pieza) { border-radius: var(--radio-xl); overflow: hidden; }
/* La barra inferior y la cabecera no se funden: se quedan quietas al cambiar de pantalla */
.barra-inferior { view-transition-name: barra; }
.cabecera { view-transition-name: cabecera; }

/* ---------- Bienvenida: entrar o crear cuenta (F5) ---------- */
/* Sin sesión no hay cabecera ni barra: la bienvenida ocupa toda la pantalla */
body.sin-sesion .cabecera,
body.sin-sesion .barra-inferior { display: none; }
body.sin-sesion { background: var(--degradado-halo), var(--fondo); background-repeat: no-repeat; }
body.sin-sesion .contenido { padding-top: calc(var(--esp-6) + env(safe-area-inset-top)); padding-bottom: calc(var(--esp-6) + env(safe-area-inset-bottom)); }
.bienvenida { display: grid; gap: var(--esp-6); max-width: 440px; margin: 0 auto; }
.bienvenida-marca { display: grid; justify-items: center; gap: var(--esp-1); text-align: center; }
.bienvenida-logo { width: 112px; height: 112px; border-radius: 28px; box-shadow: var(--sombra-l), var(--brillo); margin-bottom: var(--esp-3); }
.bienvenida-titulo { font-family: var(--fuente-titulos); font-size: var(--texto-2xl); font-weight: 600; }
.bienvenida-lema { color: var(--texto-suave); }
.bienvenida-caja { display: grid; gap: var(--esp-5); padding: var(--esp-5); border: var(--borde) solid var(--linea); border-radius: var(--radio-2xl); background: var(--degradado-superficie); box-shadow: var(--sombra-l); }
.bienvenida-formulario { display: grid; gap: var(--esp-4); }
.bienvenida-nota { font-size: var(--texto-s); color: var(--texto-suave); text-align: center; }

/* Control segmentado (dos o tres opciones que se excluyen) */
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--esp-1); padding: var(--esp-1); border-radius: var(--radio-pildora); background: var(--superficie-2); border: var(--borde) solid var(--linea); }
.segmentado-opcion { min-height: 40px; border: 0; border-radius: var(--radio-pildora); background: transparent; color: var(--texto-suave); font-weight: 700; font-size: var(--texto-m); cursor: pointer; transition: background var(--duracion) var(--curva), color var(--duracion) var(--curva); }
.segmentado-opcion[aria-selected="true"] { background: var(--degradado-marca); color: var(--sobre-acento); box-shadow: var(--brillo); }
.segmentado-opcion:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }

/* Contraseña con el botón «Ver» dentro del campo */
.control-con-boton { position: relative; display: flex; align-items: center; }
.control-con-boton .control { padding-right: 96px; }
.control-con-boton .ver-contrasena { position: absolute; right: var(--esp-1); }

/* ---------- Perfil (F6) ---------- */
.perfil-cabecera { justify-items: center; gap: var(--esp-2); padding: var(--esp-5) var(--esp-4); text-align: center; }
.perfil-avatar { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; transition: transform var(--duracion) var(--curva); }
.perfil-avatar:active { transform: scale(0.95); }
.perfil-avatar:focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; }
.perfil-avatar-editar { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--degradado-marca); color: var(--sobre-acento); border: 3px solid var(--superficie); font-size: var(--texto-s); }
.perfil-nombre { font-family: var(--fuente-titulos); font-size: var(--texto-xl); }
.perfil-peso { gap: var(--esp-3); }
.perfil-peso-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-3); }
.perfil-peso-valor { font-family: var(--fuente-titulos); font-size: var(--texto-2xl); font-weight: 600; background: var(--degradado-numero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.minigrafico { width: 46%; max-width: 200px; height: 56px; flex: none; }
.minigrafico polyline { fill: none; stroke: var(--naranja); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.minigrafico circle { fill: var(--naranja-claro); stroke: var(--fondo); stroke-width: 2; }
.perfil-pesos { list-style: none; margin: 0; padding: 0; display: grid; }
.perfil-pesos li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--esp-3); padding: var(--esp-1) 0; border-top: var(--borde) solid var(--linea); color: var(--texto-suave); font-size: var(--texto-s); }
.perfil-pesos strong { color: var(--texto); }
.perfil-ajustes { padding: 0; gap: 0; overflow: hidden; }
.perfil-fila { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--esp-3); min-height: 60px; padding: var(--esp-3) var(--esp-4); border: 0; background: none; color: var(--texto); text-align: left; font: inherit; cursor: pointer; transition: background var(--duracion) var(--curva); }
.perfil-fila + .perfil-fila { border-top: var(--borde) solid var(--linea); }
.perfil-fila:active { background: var(--superficie-2); }
.perfil-fila-texto { display: grid; }
.perfil-fila-etiqueta { font-weight: 700; }
.perfil-fila-nota { font-size: var(--texto-s); color: var(--texto-suave); }
.perfil-fila-valor { color: var(--naranja); font-weight: 600; }
.perfil-fila-flecha { color: var(--texto-suave); font-size: var(--texto-xl); line-height: 1; }
/* Elegir avatar */
.avatares-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--esp-3); }
.avatar-opcion { display: grid; justify-items: center; gap: var(--esp-1); padding: var(--esp-3) var(--esp-1); border: var(--borde) solid var(--linea); border-radius: var(--radio-l); background: var(--superficie-2); color: var(--texto-suave); font-size: var(--texto-s); cursor: pointer; transition: transform var(--duracion) var(--curva), border-color var(--duracion) var(--curva); }
.avatar-opcion:active { transform: scale(0.95); }
.avatar-opcion[aria-checked="true"] { border-color: var(--naranja); color: var(--texto); box-shadow: var(--brillo); }

/* ---------- Administración (F7) ---------- */
.admin-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.admin-usuario { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--esp-3); width: 100%; min-height: 64px; padding: var(--esp-2) var(--esp-3); border: var(--borde) solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); color: var(--texto); text-align: left; font: inherit; cursor: pointer; transition: transform var(--duracion) var(--curva); }
.admin-usuario:active { transform: scale(0.98); }
.admin-usuario-texto { display: grid; min-width: 0; }
.admin-usuario-nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-usuario-dato { font-size: var(--texto-s); color: var(--texto-suave); }
.admin-ficha { display: flex; align-items: center; gap: var(--esp-3); }
.admin-clave { padding: var(--esp-3); border-radius: var(--radio-l); background: var(--superficie-2); border: var(--borde) dashed var(--acento-borde); font-family: var(--fuente-datos); font-size: var(--texto-xl); text-align: center; user-select: all; }
a.perfil-fila { text-decoration: none; }

/* ---------- Ilustraciones de los ejercicios (F12) ---------- */
.ilu-acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ilu-filtros { margin-block: var(--esp-2); }
.ilu-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.ilu-fila { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: var(--esp-3); width: 100%; padding: var(--esp-2); border: var(--borde) solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); color: var(--texto); text-align: left; font: inherit; cursor: pointer; transition: transform var(--duracion) var(--curva); }
.ilu-fila:active { transform: scale(0.98); }
.ilu-fila .imagen-ejercicio { width: 88px; border-radius: var(--radio); }
.ilu-fila-texto { display: grid; gap: 2px; min-width: 0; }
.ilu-fila .ilu-estado { justify-self: start; margin-top: var(--esp-1); min-height: 22px; padding-block: 1px; }
.ilu-fila-nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilu-fila-dato { font-size: var(--texto-s); color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilu-estado[data-estado="sin_pose"] { color: var(--texto-suave); }
.ilu-estado[data-estado="borrador"] { border-color: var(--info); color: var(--info); }
.ilu-estado[data-estado="cambios"] { border-color: var(--aviso); color: var(--aviso); }
.ilu-estado[data-estado="aprobada"] { border-color: var(--ok); color: var(--ok); }
.ilu-grande { aspect-ratio: 4 / 3; padding: var(--esp-2); border-radius: var(--radio-l); background: var(--degradado-halo), var(--superficie-2); border: var(--borde) solid var(--linea); }
.ilu-grande .maniqui { width: 100%; height: 100%; }
.ilu-ahora summary, .ilu-otro-lado summary { cursor: pointer; color: var(--texto-suave); font-size: var(--texto-s); padding-block: var(--esp-2); }
.ilu-nota { padding: var(--esp-2) var(--esp-3); border-left: 3px solid var(--aviso); background: var(--superficie-2); border-radius: var(--radio); }
.ilu-avisos { margin: 0; padding-left: var(--esp-4); color: var(--aviso); font-size: var(--texto-s); }
.ilu-pedir { display: grid; gap: var(--esp-2); }
.ilu-botones { flex-wrap: wrap; }
.ilu-rangos { display: grid; gap: var(--esp-1); }
.ilu-rango-fila { display: grid; grid-template-columns: 72px 1fr 48px; align-items: center; gap: var(--esp-2); font-size: var(--texto-s); }
.ilu-rango { width: 100%; accent-color: var(--naranja); }
.ilu-rango-valor { font-family: var(--fuente-datos); text-align: right; color: var(--texto-suave); }
.ilu-informe h3 { font-size: var(--texto-m); margin: var(--esp-3) 0 var(--esp-1); }
.ilu-informe ul { margin: 0 0 var(--esp-2); padding-left: var(--esp-4); color: var(--texto-suave); font-size: var(--texto-s); }

/* ---------- Catálogo: grupos, un grupo y la ficha de un ejercicio (F8) ---------- */
.ejercicios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.ejercicio-fila { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: var(--esp-3); padding: var(--esp-2); border: var(--borde) solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); color: var(--texto); text-decoration: none; transition: transform var(--duracion) var(--curva); }
.ejercicio-fila:active { transform: scale(0.98); }
.ejercicio-fila .imagen-ejercicio { border-radius: var(--radio); }
.ejercicio-fila-texto { display: grid; gap: var(--esp-1); min-width: 0; }
.ejercicio-fila-nombre { font-weight: 700; }
.ejercicio-fila-flecha { color: var(--texto-suave); font-size: var(--texto-xl); }
.ejercicio-cabecera { display: grid; gap: var(--esp-2); }
.ejercicio-cabecera .imagen-ejercicio { aspect-ratio: 4 / 3; border-radius: var(--radio-2xl); margin-bottom: var(--esp-2); }
a.pagina-rotulo { text-decoration: none; }

/* ---------- Filtros y tarjetas limpias (T122) ---------- */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.segmentado--s .segmentado-opcion { min-height: 34px; padding: 0 var(--esp-3); font-size: var(--texto-s); }
.ejercicio-fila-musculos { font-size: var(--texto-s); color: var(--texto-suave); line-height: 1.45; } /* entera: crece en varias líneas (T123) */
.ejercicio-fila-tuyo { color: var(--naranja); font-weight: 600; font-size: var(--texto-s); }
.ejercicios-vacio { padding: var(--esp-5); text-align: center; color: var(--texto-suave); border: var(--borde) dashed var(--linea-fuerte); border-radius: var(--radio-l); }
.ejercicio-datos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.filtros .segmentado { flex: 1 1 260px; }
.filtros-bloque { display: grid; gap: var(--esp-3); }

/* Mientras escribes en el móvil, la barra de abajo se esconde (T126): no se sube encima del teclado ni se descuadra */
body.escribiendo .barra-inferior { display: none; }
body.escribiendo .contenido { padding-bottom: var(--esp-6); }
body.escribiendo .avisos { bottom: calc(var(--esp-3) + env(safe-area-inset-bottom)); }

/* ---------- Crear y editar un ejercicio (F14) ---------- */
.form-ejercicio { display: grid; gap: var(--esp-5); }
.form-bloque { display: grid; gap: var(--esp-2); }
.form-bloque-titulo { margin: 0; font-size: var(--texto-m); font-weight: 700; }
.form-mapa { justify-self: center; width: 100%; max-width: 380px; padding: var(--esp-2); border-radius: var(--radio-l); background: var(--degradado-halo), var(--superficie-2); border: var(--borde) solid var(--linea); }
.form-mapa .cuerpo { width: 100%; height: auto; display: block; }
.form-mapa .cuerpo-musculo { cursor: pointer; }
.form-extra { display: grid; gap: var(--esp-2); }
.grupo-crear { margin-top: var(--esp-3); }
.ejercicio-grupos a { color: inherit; text-decoration: none; }