/* Sistema de diseño de Training (F2) · familia Cardona Labs: parte del de Entreteniment (estilo «Mezcla B+C») con el
   naranja del logo (#F79C71) como color principal y degradados propios.
   Todo el estilo de la app sale de estas variables: no se escriben colores, tamaños ni radios sueltos en otros
   archivos (lo comprueba tests/InterfazTest.php). Solo hay tema oscuro (03-experiencia.md).
   Acento: cualquier elemento con la clase .tintado y las variables --acento-h / --acento-s recalcula su color de
   acento (lo mantiene la familia; en Training casi todo usa el naranja de la marca). */

:root {
  color-scheme: dark;

  /* Tipografía (la de la familia) */
  --fuente: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: "Space Grotesk", var(--fuente);
  --fuente-datos: "JetBrains Mono", ui-monospace, Consolas, "Cascadia Mono", monospace;
  --texto-xs: 0.75rem;    /* 12 px · etiquetas en monoespaciada */
  --texto-s: 0.8125rem;   /* 13 px · datos secundarios */
  --texto-m: 0.9375rem;   /* 15 px · texto normal */
  --texto-l: 1.125rem;    /* 18 px · subtítulos */
  --texto-xl: 1.5rem;     /* 24 px · títulos de pantalla */
  --texto-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem); /* 28-38 px · nombre del ejercicio, cifras destacadas */
  --texto-numero: clamp(3.5rem, 2.6rem + 4vw, 5rem);    /* 56-80 px · el número de repeticiones al apuntar */
  --texto-control: 1rem;  /* 16 px · campos: con menos, el iPhone hace zoom al tocarlos */
  --interlineado: 1.55;
  --espaciado-etiquetas: 0.12em; /* rótulos en mayúsculas */
  --espaciado-chips: 0.06em;

  /* Espacios (escala de 4 px) */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;
  --margen-pagina: clamp(16px, 4vw, 32px);
  --ancho-max: 720px;          /* móvil primero: en el PC, una columna centrada */
  --alto-barra-movil: 68px;    /* barra de navegación inferior */
  --toque: 44px;               /* tamaño mínimo de lo que se toca */

  /* Formas */
  --radio-s: 6px;
  --radio: 10px;
  --radio-l: 14px;
  --radio-xl: 18px;
  --radio-2xl: 24px;           /* hojas que suben desde abajo, tarjetas grandes */
  --radio-pildora: 999px;
  --borde: 1px;

  /* Movimiento */
  --duracion: 0.2s;
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
  --curva-rebote: cubic-bezier(0.3, 1.4, 0.5, 1); /* el número que salta, la celebración */
  --duracion-pantalla: 0.3s;   /* cambio de pantalla e imagen que crece */

  /* Capas */
  --capa-cabecera: 20;
  --capa-menu: 30;
  --capa-hoja: 35;
  --capa-visor: 40;
  --capa-avisos: 50;
  --capa-carga: 60;

  /* ---------- Colores (tema oscuro) ---------- */
  /* Fondos y textos: los de la familia (Entreteniment) */
  --fondo: #0a0d12;
  --superficie: #11161e;
  --superficie-2: #1a212c;
  --superficie-3: #232c39;
  --texto: #e4eaf0;
  --texto-suave: #8f9caa;
  --linea: #232c38;
  --linea-fuerte: #34404f;

  /* Naranja de la marca: #F79C71 = hsl(19 89% 71%). Contraste medido: 9,2:1 sobre --fondo y 8,9:1 con --sobre-acento (ver /pruebas/estilos) */
  --acento-h: 19;
  --acento-s: 89%;
  --acento-l: 71%;
  --naranja-claro: #fbbf9c;    /* brillo del degradado (parte alta del logo) */
  --naranja: #f79c71;          /* el del logo */
  --naranja-intenso: #f07a4b;  /* parte baja del logo */
  --coral: #e85a3c;
  --rojo-fuego: #df3d55;       /* final de los degradados «fuego» (como las imágenes de músculos) */
  --sobre-acento: #1b0e07;     /* texto sobre el naranja */

  /* Estados (distintos del naranja para que no se confundan con la marca) */
  --ok: #4ad295;
  --aviso: #f5cf4f;
  --error: #ff6b6b;
  --info: #6aa8ff;
  --oro: #ffd166;              /* récords */

  /* Dificultad de los ejercicios (T122): del naranja suave al rojo fuego */
  --nivel-facil: var(--naranja-claro);
  --nivel-moderado: var(--naranja);
  --nivel-dificil: var(--coral);
  --nivel-elite: var(--rojo-fuego);

  /* Maniquí de las ilustraciones (F10): la piel algo más clara que las tarjetas, para que la figura se despegue del fondo */
  --maniqui-piel: #2f3a4a;
  --maniqui-musculo: #252e3c;
  --maniqui-palma: #46546a;

  /* Velos y sombras */
  --velo: rgba(4, 6, 10, 0.86);
  --sobre-velo: #eef2f6;
  --sombra-s: 0 2px 8px rgba(0, 0, 0, 0.25);
  --sombra: 0 6px 18px rgba(0, 0, 0, 0.3);
  --sombra-l: 0 18px 50px rgba(0, 0, 0, 0.4);
  --intensidad-brillo: 35%;

  /* ---------- Degradados de la marca (T007) ---------- */
  /* Marca: el del logo, de claro a intenso. Botón principal, chips activos, barras de progreso. */
  --degradado-marca: linear-gradient(135deg, var(--naranja-claro) 0%, var(--naranja) 45%, var(--naranja-intenso) 100%);
  /* Fuego: más vivo, del naranja al rojo, como las imágenes de músculos. Récords, celebraciones, músculos trabajados. */
  --degradado-fuego: linear-gradient(135deg, var(--naranja) 0%, var(--coral) 55%, var(--rojo-fuego) 100%);
  /* Número: vertical, para el número grande de repeticiones y las cifras destacadas (texto con degradado). */
  --degradado-numero: linear-gradient(180deg, var(--naranja-claro) 0%, var(--naranja) 50%, var(--coral) 100%);
  /* Halo: resplandor naranja suave detrás de cabeceras y tarjetas destacadas. */
  --degradado-halo: radial-gradient(120% 90% at 50% 0%, rgba(247, 156, 113, 0.22) 0%, rgba(247, 156, 113, 0) 70%);
  /* Suelo: resplandor cálido desde abajo (detrás del mapa del cuerpo de los grupos). */
  --degradado-suelo: radial-gradient(120% 100% at 50% 100%, rgba(247, 156, 113, 0.25) 0%, rgba(247, 156, 113, 0) 70%);
  /* Superficie: tarjeta con un toque cálido arriba. */
  --degradado-superficie: linear-gradient(180deg, rgba(247, 156, 113, 0.08) 0%, rgba(247, 156, 113, 0) 60%), var(--superficie);
}

/* El acento se calcula donde se declaran sus piezas: en la raíz y en cada elemento tintado. */
:root,
.tintado {
  --acento: hsl(var(--acento-h) var(--acento-s) var(--acento-l));
  --acento-suave: hsl(var(--acento-h) var(--acento-s) var(--acento-l) / 0.16);
  --acento-borde: hsl(var(--acento-h) var(--acento-s) var(--acento-l) / 0.5);
  --brillo: 0 0 22px hsl(var(--acento-h) var(--acento-s) var(--acento-l) / var(--intensidad-brillo));
}

@media (max-width: 700px) {
  :root {
    /* En el móvil: el texto secundario algo más grande y los rótulos con menos espacio entre letras */
    --texto-s: 0.875rem;
    --espaciado-etiquetas: 0.09em;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion: 0s;
    --duracion-pantalla: 0s;
  }
}