/* RewardWave — design tokens (branding real: ~/Desktop/REWARDWAVE/Branding) */
/* RewardWave — tokens de diseño · ESTILO v2 (2026-10-02)
   Fondo gris cálido, tarjetas blancas sólidas de borde suave, tipografía display muy gruesa,
   píldoras con brillo. Jerarquía de color: naranja (protagonista) > celeste (apoyo / estados
   positivos) > azul (detalle). El estilo anterior "liquid glass" quedó archivado en
   ../app-redesign-liquid-glass. Los nombres --rw-* se conservan para no romper los componentes:
   --rw-teal ahora es el celeste, --rw-coral el naranja y --rw-navy el azul. */
:root {
  --v2-bg: #f3f2f0;
  --v2-surface: #ffffff;
  --v2-line: #e9e6e2;
  --v2-ink: #17141f;
  --v2-ink-2: #4b4757;
  --v2-muted: #6e6978;
  --v2-orange: #e3552f;
  --v2-orange-2: #f07a4f;
  --v2-orange-soft: #fdebe4;
  /* WCAG AA: fondo naranja con texto blanco (4.8:1) y texto naranja sobre blanco o naranja suave (≥5:1) */
  --v2-orange-strong: #c9461f;
  --v2-orange-ink: #b03d1a;
  --v2-cyan: #1aa3b6;
  --v2-cyan-2: #5ccad8;
  --v2-cyan-soft: #e2f5f7;
  --v2-blue: #0b2e63;
  --v2-blue-soft: #e7ecf4;
  --v2-radius: 22px;
  --v2-shadow: 0 1px 2px rgba(23,20,31,.04), 0 10px 30px rgba(23,20,31,.06);
  --v2-shadow-lg: 0 2px 4px rgba(23,20,31,.04), 0 24px 60px rgba(23,20,31,.12);
  --v2-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --v2-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --v2-side-w: 248px;

  /* Nombres heredados → paleta v2 */
  --rw-teal: #1aa3b6;
  --rw-teal-dark: #0a6f7d;
  --rw-navy: #0b2e63;
  --rw-coral: #e3552f;
  --rw-orange: #e3552f;

  --rw-ink: #17141f;
  --rw-muted: #6f6a7a;
  --rw-muted-2: #75707f;

  --rw-bg: #f3f2f0;
  --rw-success: #0a6f7d;
  --rw-success-bg: #e2f5f7;

  /* Lo que antes era "vidrio" ahora es una superficie blanca sólida con borde suave */
  --rw-glass-bg: #ffffff;
  --rw-glass-bg-strong: #ffffff;
  --rw-glass-border: #e9e6e2;
  --rw-glass-highlight: 0 0 0 transparent;
  --rw-glass-shadow: 0 1px 2px rgba(23,20,31,.04), 0 10px 30px rgba(23,20,31,.06);
  --rw-glass-shadow-lg: 0 2px 4px rgba(23,20,31,.04), 0 24px 60px rgba(23,20,31,.12);
  --rw-glass-shadow-sm: 0 1px 2px rgba(23,20,31,.04), 0 6px 18px rgba(23,20,31,.05);

  --rw-radius-lg: 22px;
  --rw-radius-md: 18px;
  --rw-radius-sm: 12px;

  --rw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --rw-font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --rw-font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--rw-bg);
  color: var(--rw-ink);
  font-family: var(--rw-font-body);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* Tracking negativo en titulares/cifras grandes — el "apretado" característico
   de la tipografía de apple.com en textos de mayor tamaño. */
.rw-page-title, .rw-logo-word, .rw-kpi-value, .rw-stat-value, .rw-gauge-value,
.rw-section-title, .rw-chart-title, .rw-summary-value, .rw-list-title,
.rw-table-name, .rw-tab-btn, .rw-nav-item, .rw-btn-primary, .rw-btn-secondary {
  letter-spacing: -0.02em;
}

::selection { background: var(--rw-teal); color: #fff; }
a { color: var(--rw-teal); text-decoration: none; }
a:hover { color: var(--rw-ink); text-decoration: underline; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #dcd8d3; border-radius: 4px; }

button { font-family: inherit; }

.rw-page-bg {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background: transparent;
}
html { background: var(--v2-bg); }
body {
  background-color: var(--v2-bg);
  background-image: radial-gradient(42% 38% at 92% 4%, rgba(227,85,47,.08), transparent 70%), radial-gradient(38% 34% at 6% 98%, rgba(26,163,182,.08), transparent 70%);
  background-attachment: fixed;
}

/* Nota histórica: hubo blobs de color de marca flotando detrás de todo (.rw-blob-1..4)
   para que el "liquid glass" se tiñera al blurear el fondo. El usuario pidió volver a
   un fondo blanco sólido sin degradados — se quitaron los divs de las 9 páginas y estas
   reglas. El degradado ahora vive solo en recuadros puntuales (el header, el gauge-card,
   los botones primarios, etc.), nunca en el fondo de la página. No revivir sin que lo pidan. */

.rw-glass {
  background: var(--rw-glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--rw-glass-border);
  border-radius: var(--rw-radius-md);
  box-shadow: var(--rw-glass-shadow);
}

/* Brillo de cristal — SIEMPRE visible (no depende de hover), es lo que hace que
   una tarjeta se lea como "vidrio" incluso en una captura estática: una franja de
   luz que entra por arriba-izquierda, como en un panel de vidrio real bajo luz.
   Va incorporado directamente en todas las superficies de vidrio compartidas.
   Nota: .rw-header queda FUERA a propósito — overflow:hidden ahí recortaría el
   dropdown "Más" (bug ya resuelto una vez en esta sesión, no repetir). */
.rw-sheen,
.rw-card, .rw-kpi-card, .rw-table-card, .rw-list-row,
.rw-stat-card, .rw-gauge-card, .rw-summary-card, .rw-more-panel, .rw-cardmock {
  position: relative;
  overflow: hidden;
}
.rw-sheen::before,
.rw-card::before, .rw-kpi-card::before, .rw-table-card::before, .rw-list-row::before,
.rw-stat-card::before, .rw-gauge-card::before, .rw-summary-card::before, .rw-more-panel::before, .rw-cardmock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(122deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.22) 16%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, 0.14) 100%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  display: none; /* v2: sin brillo de cristal */
}
.rw-stat-highlight::before { mix-blend-mode: soft-light; }

/* Interacciones fluidas por defecto: todo lo clicable responde con un leve
   "spring" en vez de un corte seco — es lo que hace sentir el diseño "vivo". */
button, a.rw-nav-item, a.rw-bottomnav-item, .rw-chip, .rw-icon-btn, .rw-icon-action,
.rw-card, .rw-kpi-card, .rw-stat-card, .rw-list-row, .rw-cardtpl, .rw-switch-track {
  transition: transform .35s var(--rw-ease), box-shadow .35s var(--rw-ease),
    background-color .25s var(--rw-ease), color .25s var(--rw-ease), border-color .25s var(--rw-ease);
}
button:active, a.rw-nav-item:active, .rw-chip:active, .rw-icon-btn:active, .rw-icon-action:active {
  transform: scale(0.96);
}

.rw-pill-badge {
  background: var(--v2-orange-soft);
  color: var(--v2-orange);
  font-size: 12px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
}

.rw-up {
  font-size: 12px;
  font-weight: 800;
  color: var(--rw-teal-dark);
  background: var(--rw-success-bg);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.rw-down {
  font-size: 12px;
  font-weight: 700;
  color: var(--rw-coral);
  background: rgba(219, 74, 43, 0.12);
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Íconos SVG del set compartido (assets/js/icons.js) — el proyecto no usa emojis */
.rw-i { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.rw-stars-svg { display: inline-flex; gap: 1px; vertical-align: middle; }
.rw-stars-svg .is-on { color: var(--rw-coral); }
.rw-stars-svg .is-off { color: rgba(91, 107, 120, 0.35); }