/* ==========================================================================
 * JR FITNESS TV - theme.css
 * Tokens de diseño corporativos y variables de color para TV
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@700;800;900&display=swap');

:root {
  /* Marca JR Fitness */
  --jr-primary:        #5cb870;
  --jr-primary-glow:   rgba(92, 184, 112, 0.45);
  --jr-primary-dark:   #3d824d;
  --jr-primary-light:  #7ee293;
  --jr-primary-15:     rgba(92, 184, 112, 0.15);
  --jr-primary-25:     rgba(92, 184, 112, 0.25);

  /* Fondos de alto contraste (Gym TV Dark Mode) */
  --bg-tv:             #080c14;
  --bg-card:           #111827;
  --bg-card-hover:     #172033;
  --bg-elevated:       #1e293b;
  --border-subtle:     #1e293b;
  --border-active:     rgba(92, 184, 112, 0.4);

  /* Estados de Entrenamiento */
  --state-work:        #22c55e;
  --state-work-bg:     rgba(34, 197, 94, 0.12);
  --state-work-glow:   0 0 45px rgba(34, 197, 94, 0.5);
  --state-work-border: #22c55e;

  --state-rest:        #f59e0b;
  --state-rest-bg:     rgba(245, 158, 11, 0.14);
  --state-rest-glow:   0 0 45px rgba(245, 158, 11, 0.55);
  --state-rest-border: #f59e0b;

  --state-prep:        #38bdf8;
  --state-prep-bg:     rgba(56, 189, 248, 0.12);
  --state-prep-glow:   0 0 45px rgba(56, 189, 248, 0.45);
  --state-prep-border: #38bdf8;

  --state-finished:    #a855f7;
  --state-finished-glow: 0 0 45px rgba(168, 85, 247, 0.5);

  /* Textos y neutros */
  --text-main:         #f8fafc;
  --text-muted:        #94a3b8;
  --text-dim:          #64748b;
  --text-highlight:    #ffffff;

  /* Tipografía */
  --font-main:         'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:         'JetBrains Mono', monospace;

  /* Transiciones */
  --trans-smooth:      all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --trans-bounce:      all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Base Reset & Zero-Scroll TV Guarantee */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html, body {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background-color: var(--bg-tv);
  color: var(--text-main);
  font-family: var(--font-main);
  overflow: hidden !important;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}