/* ============================================================
   ENTRENADOR — base.css
   Tokens del sistema de diseño. No añadir componentes aquí.
   ============================================================ */

:root {
  /* ---- TIPOGRAFÍA ---------------------------------------- */
  /* En iPhone resuelve a SF Pro real. En Android cae a Roboto. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Inter", "Segoe UI", Roboto, sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display",
              "Inter", sans-serif;

  --t-large-title: 700 34px/41px var(--font);
  --t-title-1:     700 28px/34px var(--font);
  --t-title-2:     700 22px/28px var(--font);
  --t-title-3:     600 20px/25px var(--font);
  --t-headline:    600 17px/22px var(--font);
  --t-body:        400 17px/22px var(--font);
  --t-callout:     400 16px/21px var(--font);
  --t-subhead:     400 15px/20px var(--font);
  --t-footnote:    400 13px/18px var(--font);
  --t-caption:     400 12px/16px var(--font);

  /* Métricas: peso, repeticiones, temporizador */
  --t-metric:    700 44px/48px var(--font-num);
  --t-metric-lg: 200 76px/80px var(--font-num);

  /* ---- ESPACIADO (rejilla de 4pt) ------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s16: 64px;

  /* ---- RADIOS --------------------------------------------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  /* ---- ACENTO --------------------------------------------- */
  --accent:      #30D158;
  --accent-dark: #248A3D;
  --accent-soft: rgba(48, 209, 88, .12);

  --red:    #FF453A;
  --orange: #FF9F0A;
  --blue:   #0A84FF;

  /* ---- MOVIMIENTO ----------------------------------------- */
  --ease-out:    cubic-bezier(.25, .1, .25, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;

  /* ---- ÁREAS SEGURAS -------------------------------------- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- ALTURAS FIJAS -------------------------------------- */
  --h-navbar: 44px;
  --h-tabbar: 49px;
}

/* ---- MODO CLARO ------------------------------------------- */
:root {
  --bg:          #F2F2F7;
  --bg-elevated: #FFFFFF;
  --bg-input:    #E9E9EB;
  --text:        #000000;
  --text-2:      rgba(60, 60, 67, .60);
  --text-3:      rgba(60, 60, 67, .30);
  --separator:   rgba(60, 60, 67, .29);
  --material:    rgba(249, 249, 249, .82);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-sheet: 0 -2px 20px rgba(0, 0, 0, .10);
  --overlay:     rgba(0, 0, 0, .40);
  --mancha-1: rgba(48, 209, 88, .12);
  --mancha-2: rgba(10, 132, 255, .09);
}

/* ---- MODO OSCURO ------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #000000;
    --bg-elevated: #1C1C1E;
    --bg-input:    #2C2C2E;
    --text:        #FFFFFF;
    --text-2:      rgba(235, 235, 245, .60);
    --text-3:      rgba(235, 235, 245, .30);
    --separator:   rgba(84, 84, 88, .65);
    --material:    rgba(30, 30, 30, .82);
    --shadow-card:  none;
    --shadow-sheet: 0 -2px 24px rgba(0, 0, 0, .5);
    --overlay:     rgba(0, 0, 0, .60);
    --mancha-1: rgba(48, 209, 88, .16);
    --mancha-2: rgba(10, 132, 255, .13);
  }
}

/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Comportamiento de app, no de página web */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior-y: none;
  user-select: none;
  position: relative;
}

/* Fondo con textura muy sutil: dos manchas de color que casi no se
   notan pero rompen la planitud del gris/negro liso. No interfiere
   con el contenido porque va detrás de todo y no capta toques. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 420px at 12% -6%, var(--mancha-1), transparent 60%),
    radial-gradient(560px 380px at 108% 18%, var(--mancha-2), transparent 55%);
}

/* El texto que sí debe poder copiarse */
input, textarea, .seleccionable { user-select: text; }

h1, h2, h3, h4, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

a { color: var(--accent); text-decoration: none; }

input, select, textarea {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
}

img { display: block; max-width: 100%; }

/* Foco visible solo para teclado */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Respeta la preferencia del sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   UTILIDADES DE TEXTO
   ============================================================ */

.t-large-title { font: var(--t-large-title); letter-spacing: .37px; }
.t-title-1     { font: var(--t-title-1); letter-spacing: .36px; }
.t-title-2     { font: var(--t-title-2); letter-spacing: .35px; }
.t-title-3     { font: var(--t-title-3); }
.t-headline    { font: var(--t-headline); }
.t-body        { font: var(--t-body); }
.t-callout     { font: var(--t-callout); }
.t-subhead     { font: var(--t-subhead); }
.t-footnote    { font: var(--t-footnote); }
.t-caption     { font: var(--t-caption); }

.gris  { color: var(--text-2); }
.gris3 { color: var(--text-3); }
.acento { color: var(--accent); }
.rojo  { color: var(--red); }
.oculto { display: none !important; }