/* ==========================================================================
   KOACHE — design tokens v1.0
   Importar una sola vez en el punto de entrada de la app, antes que todo lo demás.
   Regla: ningún componente escribe un HEX. Siempre var(--koache-*).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Chivo:wght@700;900&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;

  /* ---------- marca ---------- */
  --koache-brand:          #0D5C46;  /* Verde Cancha — autoridad y dinero */
  --koache-brand-fg:       #FFFFFF;  /* texto sobre el primario */
  --koache-brand-deep:     #08402F;  /* hover / pressed en tema claro */
  --koache-volt:           #C8F531;  /* acento de energia — max 10% de pantalla */
  --koache-volt-fg:        #0B0F0D;  /* texto sobre volt: SIEMPRE ink, nunca blanco */
  --koache-volt-text:      #5C7A00;  /* unica version del volt legible como texto en claro */
  --koache-ink:            #0B0F0D;  /* casi-negro con tinte verde — nunca #000 */

  /* ---------- superficies ---------- */
  --koache-canvas:         #F5F7F5;  /* fondo de la app */
  --koache-surface:        #FFFFFF;  /* tarjetas, tablas, modales */
  --koache-surface-2:      #EDF1EE;  /* fondo de fila, encabezado de tabla, chip */

  /* ---------- texto ---------- */
  --koache-text:           #0B0F0D;
  --koache-text-muted:     #5A6660;  /* etiquetas, ayudas, metadatos */

  /* ---------- bordes ---------- */
  --koache-border:         #E2E7E3;  /* separadores y bordes de tarjeta */
  --koache-border-strong:  #838F89;  /* bordes de input y controles (3:1) */

  /* ---------- estados (reservados, nunca decorativos) ---------- */
  --koache-success:        #0D5C46;
  --koache-warning:        #F5A524;  /* por vencer, atencion requerida */
  --koache-danger:         #E5484D;  /* relleno: mora y error */
  --koache-danger-text:    #C62A30;  /* el rojo como texto sobre fondo claro */
  --koache-info:           #2563C9;  /* avisos del sistema — jamas color de marca */

  /* ---------- deportes: SOLO chips y filtros, siempre con el nombre al lado ---------- */
  --koache-sport-gym:      #C8F531;
  --koache-sport-futbol:   #0D5C46;
  --koache-sport-voley:    #F5A524;
  --koache-sport-basket:   #E8622C;
  --koache-sport-patinaje: #1BA8C4;
  --koache-sport-natacion: #2563C9;
  --koache-sport-atletismo:#C8377E;
  --koache-sport-combate:  #8B5CF6;

  /* ---------- tipografia ---------- */
  --koache-font-display: "Chivo", "Archivo", system-ui, sans-serif;
  --koache-font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --koache-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---------- forma ---------- */
  --koache-radius-sm: 6px;
  --koache-radius:    9px;
  --koache-radius-lg: 14px;
  --koache-shadow: 0 1px 2px rgba(11,15,13,.06), 0 8px 24px -12px rgba(11,15,13,.18);
}

/* ==========================================================================
   Tema oscuro — modulos de entreno (rutinas, sesion, progreso)
   Se redefinen SOLO los tokens. Ningun color existe unicamente aqui.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --koache-brand:         #45C79B;
    --koache-brand-fg:      #06100C;
    --koache-brand-deep:    #6BD8B3;
    --koache-volt-text:     #C8F531;
    --koache-canvas:        #0B0F0D;
    --koache-surface:       #141A17;
    --koache-surface-2:     #1B2320;
    --koache-text:          #E8EFE9;
    --koache-text-muted:    #93A39A;
    --koache-border:        #232D28;
    --koache-border-strong: #5C6E64;
    --koache-success:       #45C79B;
    --koache-danger-text:   #FF6369;
    --koache-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --koache-brand:         #45C79B;
  --koache-brand-fg:      #06100C;
  --koache-brand-deep:    #6BD8B3;
  --koache-volt-text:     #C8F531;
  --koache-canvas:        #0B0F0D;
  --koache-surface:       #141A17;
  --koache-surface-2:     #1B2320;
  --koache-text:          #E8EFE9;
  --koache-text-muted:    #93A39A;
  --koache-border:        #232D28;
  --koache-border-strong: #5C6E64;
  --koache-success:       #45C79B;
  --koache-danger-text:   #FF6369;
  --koache-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--koache-canvas);
  color: var(--koache-text);
  font-family: var(--koache-font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .koache-display {
  font-family: var(--koache-font-display);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

/* Toda columna de numeros alinea digitos */
.koache-num, td.koache-num, .koache-stat-value {
  font-variant-numeric: tabular-nums;
}

.koache-label {
  font-family: var(--koache-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--koache-text-muted);
}

/* ==========================================================================
   Botones — la accion principal es verde en claro y volt en oscuro
   ========================================================================== */

.koache-btn {
  font-family: var(--koache-font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--koache-radius);
  border: 1px solid transparent;
  cursor: pointer;
}

.koache-btn--primary {
  background: var(--koache-brand);
  color: var(--koache-brand-fg);
}

[data-theme="dark"] .koache-btn--primary {
  background: var(--koache-volt);
  color: var(--koache-volt-fg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .koache-btn--primary {
    background: var(--koache-volt);
    color: var(--koache-volt-fg);
  }
}

.koache-btn--ghost {
  background: transparent;
  color: var(--koache-text);
  border-color: var(--koache-border-strong);
}

:focus-visible {
  outline: 3px solid var(--koache-brand);
  outline-offset: 2px;
  border-radius: 4px;
}