/* ============================================================
   HRG TOKENS · Base visual compartida de la plataforma
   Hernán Rey Golf Academy
   ------------------------------------------------------------
   Usado por: Putt Lab Pro · Short Game Lab Pro · Radar Reader
   Vive en:   Golf Lab Hub  (assets/css/rr-tokens.css)
   Fallback:  copia idéntica dentro de cada lab

   Cambiar un valor acá lo cambia en las tres labs.
   ============================================================ */

:root {

  /* --- Marca -------------------------------------------------
     Un solo color de acento en toda la plataforma.
     Estados activos, botones, tabs seleccionadas y alertas.
     Nunca se introduce un segundo rojo.                        */
  --rr-brand:        #8E1813;
  --rr-brand-hover:  #741310;
  --rr-brand-soft:   #8E181314;  /* 8% — fondos de estado activo */

  /* --- Texto ------------------------------------------------ */
  --rr-ink:          #2A3547;    /* principal (0.57.0: el de la app, mas suave que el negro) */
  --rr-text-2:       #5A6A85;    /* secundario  */
  --rr-text-3:       #999999;    /* terciario   */
  --rr-on-brand:     #ffffff;    /* texto sobre el rojo */

  /* --- Superficies ------------------------------------------ */
  --rr-bg:           #f7f7f7;    /* fondo de página */
  --rr-surface:      #ffffff;    /* cards           */
  --rr-surface-alt:  #fbfbfb;    /* filas alternas  */
  --rr-border:       #EEF2F6;    /* bordes y hairlines */

  /* --- Semántica -------------------------------------------- */
  --rr-positive:     #1f7a3a;    /* verde sobrio */
  --rr-negative:     var(--rr-brand);
  --rr-neutral:      var(--rr-text-3);
  --rr-tentative:    #8a6a1f;    /* dato marcado como no confiable */

  /* --- Tipografía ------------------------------------------- */
  --rr-font:      inherit;   /* 0.48.0: la familia la pone el tema del sitio. */
  /* Cifras: tabulares y monoespaciadas para que los decimales
     aliñen en columna. Lo estrena Radar Reader; sirve para
     cualquier lab que muestre tablas de números.              */
  --rr-font-mono: inherit;   /* idem; la alineacion de numeros va por tabular-nums. */

  --rr-size-xs:   0.75rem;
  --rr-size-sm:   0.875rem;
  --rr-size-base: 1rem;
  --rr-size-lg:   1.25rem;
  --rr-size-xl:   1.563rem;
  --rr-size-2xl:  1.953rem;

  /* --- Espaciado (grilla base 4px) --------------------------- */
  --rr-space-1:  4px;
  --rr-space-2:  8px;
  --rr-space-3:  12px;
  --rr-space-4:  16px;
  --rr-space-5:  20px;
  --rr-space-6:  24px;
  --rr-space-8:  32px;
  --rr-space-12: 48px;

  /* ------------------------------------------------------------------
     ALIAS QUE FALTABAN Y ROMPIAN 30 DECLARACIONES.

     Una variable inexistente NO cae a un valor por defecto: el navegador
     descarta la declaracion ENTERA en silencio. `--rr-space-5` se usaba
     en 20 lugares (paddings de tarjetas del informe) y no existia, asi
     que esas tarjetas se quedaban SIN RELLENO y el texto tocaba el borde.
     `--rr-line` y `--rr-muted` son los nombres que usa el Calendario;
     aca los equivalentes se llaman distinto, y donde se colaron el borde
     o el color desaparecian.

     Se definen como alias en vez de reemplazar los usos: es un cambio y
     no treinta, y los dos nombres quedan validos.
     ------------------------------------------------------------------ */
  --rr-line:  var(--rr-border);
  --rr-muted: var(--rr-text-3);

  /* --- Forma ------------------------------------------------- */
  --rr-radius:    8px;   /* 0.57.0: esquinas del estilo de la app */
  --rr-radius-lg: 16px;  /* idem, para tarjetas */
  --rr-focus:     2px solid var(--rr-brand);

  /* --- Layout ------------------------------------------------ */
  --rr-maxw:      100%;  /* 0.49.0: el ancho lo pone la pagina, no el plugin. */
}

/* ============================================================
   ESCALA DE PALO · propia de Radar Reader
   ------------------------------------------------------------
   Excepción justificada a la regla del acento único:
   el color CODIFICA la longitud del palo, de corto a largo.
   Arranca exactamente en el rojo de marca y se enfría.
   Uso permitido: SOLO dentro de gráficos y tabs de palo.
   Prohibido en botones, estados y alertas.
   ============================================================ */

:root {
  /* Rampa cálido → frío por longitud de palo. Los cuatro tienen que
     distinguirse de un vistazo dentro de un gráfico: dos violetas
     parecidos vuelven ilegible la lámina. */
  --club-pw: #8E1813;   /* = rojo de marca */
  --club-8i: #A85A2A;
  --club-6i: #5D4A80;
  --club-dr: #2B4C6F;

  /* Palos fuera del protocolo de diagnóstico, interpolados
     sobre la misma rampa por longitud.                        */
  --club-wedge: #A32418;
  --club-short: #A85A2A;
  --club-mid:   #6E4670;
  --club-long:  #46507A;
  --club-wood:  #2B4C6F;
}

/* Utilidades mínimas que las tres labs comparten */

.rr-mono { font-family: var(--rr-font-mono); font-variant-numeric: tabular-nums; }
.rr-pos  { color: var(--rr-positive); }
.rr-neg  { color: var(--rr-negative); }
.rr-na   { color: var(--rr-text-3); }

:where(a, button, [tabindex]):focus-visible {
  outline: var(--rr-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}