/* OVA GYM · reproductor de rutina: TODA la estética está acá, en variables (tokens).
   Estética del timer de tabata de OVA que pasó Simón el 04/10 (docs/motor/diseno/timer_referencia/: estilos_timer.css
   y capturas): amarillo OVA, negro, Bebas Neue para títulos y números, Montserrat para el resto, tarjetas de 16 px,
   botones grandes redondeados y, en marcha, la pantalla entera del color de la fase con el número enorme. Se tomó la
   estética, no la organización (Simón: el reproductor sigue el criterio minimalista y de a poco).

   Cambios contra el timer, para llegar a 7:1 (WCAG 1.4.6, AAA; D17-R7): el gris suave pasa de #6b6b66 (4,7:1 sobre
   el fondo claro) a #4f4f4a (7,3:1); el gris sobre negro, de #8f8f89 (6,1:1) a #a8a8a2 (8,3:1); el texto secundario
   sobre amarillo, de negro al 60 % a #3d3a1f (8,3:1). El rojo de alerta con texto blanco, #9a1f18 (8,1:1), el MISMO en claro y en oscuro: la alarma no se suaviza
   en oscuro (revisión de diseño de D20). Amarillo
   con negro: 14,3:1. Las fases nunca solo por color: siempre con su palabra (TRABAJO, DESCANSO…). */
/* las letras del timer van en la carpeta (no de Google Fonts): así andan sin señal en el gimnasio. Bebas Neue
   (Dharma Type) y Montserrat, licencia SIL Open Font License 1.1 (fuentes/OFL-*.txt); subconjunto latino. */
@font-face{font-family:"Bebas Neue";src:url("fuentes/bebas-neue-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fuentes/montserrat-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  color-scheme:light;
  /* base (pantallas fuera de la sesión) */
  --fondo:#f1f1ee; --superficie:#ffffff; --superficie2:#ececE8; --texto:#0d0d0d; --suave:#4f4f4a; --linea:#8a8a84; --linea-suave:rgba(0,0,0,.10);
  --accion:#ffd900; --sobre-accion:#0a0a0a; --accion-borde:#0a0a0a;
  --alerta:#9a1f18; --sobre-alerta:#ffffff; --alerta-suave:#fcecea;
  --listo:#145a2c; --foco:#0a0a0a; --ladrillo:#b5532e;
  --sombra:0 1px 2px rgba(0,0,0,.04),0 10px 28px -16px rgba(0,0,0,.22);
  /* fases (como el timer): fondo de TODA la pantalla (--pc), tinta (--pi), la palabra de la fase (--pa), texto
     secundario (--pm), líneas y bordes (--pl), y las tarjetas que van encima (--ps) */
  --trabajo-pc:#ffd900; --trabajo-pi:#0a0a0a; --trabajo-pa:#0a0a0a; --trabajo-pm:#3d3a1f; --trabajo-pl:rgba(10,10,10,.6); --trabajo-ps:#fff3a6;
  --descanso-pc:#0a0a0a; --descanso-pi:#f5f5f2; --descanso-pa:#ffd900; --descanso-pm:#a8a8a2; --descanso-pl:rgba(245,245,242,.24); --descanso-ps:#171717;
  --preparar-pc:#f5f5f2; --preparar-pi:#0a0a0a; --preparar-pa:#0a0a0a; --preparar-pm:#4f4f4a; --preparar-pl:rgba(10,10,10,.18); --preparar-ps:#ffffff;
  /* discos (además del número escrito en cada uno: el color solo no alcanza) */
  --disco-25:#c62828; --disco-20:#1f4fa8; --disco-15:#e0b400; --disco-10:#2e7d32; --disco-5:#f3f3ef; --disco-chico:#3a3a36;
  --barra:#8a8a84; --banda:#e07a00; --mancuerna:#3a3a36;
  --display:"Bebas Neue","Oswald","Impact","Arial Narrow Bold",sans-serif;
  --font:"Montserrat","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --radio:16px; --radio-chico:11px; --radio-boton:20px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  /* el número: un dígito de ~75 px se lee a 2 m con visión 20/40; "lejos" (solo los segundos), ~200 px para 20/80
     (Legge y Bigelow 2011; D17, evidencia B4). Bebas Neue es angosta: entra más grande en 360 px */
  --cuenta-tam:clamp(120px, 42vw, 230px);
  --cuenta-tam-lejos:clamp(190px, 64vw, 330px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --fondo:#0a0a0a; --superficie:#131313; --superficie2:#1c1c1c; --texto:#f5f5f2; --suave:#a8a8a2; --linea:#7a7a74; --linea-suave:rgba(255,255,255,.10);
    --accion-borde:#ffd900; --alerta:#9a1f18; --sobre-alerta:#ffffff; --alerta-suave:#2e1513; --listo:#5cc883; --foco:#ffd900;
    --sombra:inset 0 1px 0 rgba(255,255,255,.03),0 14px 32px -18px rgba(0,0,0,.9);
    --preparar-pc:#131313; --preparar-pi:#f5f5f2; --preparar-pa:#ffd900; --preparar-pm:#a8a8a2; --preparar-pl:rgba(245,245,242,.18); --preparar-ps:#1c1c1c;
    --disco-5:#d8d8d2; --disco-chico:#7a7a74; --mancuerna:#b4b4ac;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --fondo:#0a0a0a; --superficie:#131313; --superficie2:#1c1c1c; --texto:#f5f5f2; --suave:#a8a8a2; --linea:#7a7a74; --linea-suave:rgba(255,255,255,.10);
  --accion-borde:#ffd900; --alerta:#9a1f18; --sobre-alerta:#ffffff; --alerta-suave:#2e1513; --listo:#5cc883; --foco:#ffd900;
  --sombra:inset 0 1px 0 rgba(255,255,255,.03),0 14px 32px -18px rgba(0,0,0,.9);
  --preparar-pc:#131313; --preparar-pi:#f5f5f2; --preparar-pa:#ffd900; --preparar-pm:#a8a8a2; --preparar-pl:rgba(245,245,242,.18); --preparar-ps:#1c1c1c;
  --disco-5:#d8d8d2; --disco-chico:#7a7a74; --mancuerna:#b4b4ac;
}
@media (prefers-contrast: more){
  :root{ --suave:#3a3a36; --linea:#4a4a46; }
}