/* ==========================================================================
   Rewards Portfolio – BASE (variables, resets, utilidades)
   Archivo: assets/css/rewards-base.css
   Descripción:
   - Variables de color/espaciado/radio.
   - Tipografías y ajustes generales.
   - Resets ligeros y utilidades globales.
   ========================================================================= */

/* ------------------------------
   Tipografía global y base
   ------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Paleta principal */
  --rp-color-primary-1: #667eea; /* morado 1 */
  --rp-color-primary-2: #764ba2; /* morado 2 */
  --rp-color-text:       #1f2937; /* gris muy oscuro */
  --rp-color-text-2:     #4b5563; /* gris medio */
  --rp-color-muted:      #6b7280;
  --rp-color-border:     rgba(0, 0, 0, 0.06);
  --rp-color-bg:         #ffffff;
  --rp-color-bg-soft:    #f9fafb;

  /* Estados */
  --rp-success-bg: #e6f7e6;
  --rp-success-fg: #2e7d32;
  --rp-danger-bg:  #fee;
  --rp-danger-fg:  #c62828;

  /* Dimensiones */
  --rp-radius-sm: 10px;
  --rp-radius-md: 14px;
  --rp-radius-lg: 20px;
  --rp-radius-xl: 24px;

  /* Sombra */
  --rp-shadow-sm: 0 5px 15px rgba(0,0,0,0.1);
  --rp-shadow-md: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  --rp-shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.15);
  --rp-shadow-xxl: 0 30px 80px rgba(0,0,0,.35);

  /* Layout */
  --rp-gap: 30px;
  --rp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Reset/normalización MUY ligera (no invasiva) */
.rp-reset * {
  box-sizing: border-box;
}

/* Utilidad de tipografía global para wrappers del plugin */
.rp-sans {
  font-family: var(--rp-font);
  color: var(--rp-color-text);
}

/* Enlaces con color primario */
.rp-link {
  color: var(--rp-color-primary-1);
  text-decoration: none;
}
.rp-link:hover {
  text-decoration: underline;
}

/* Botón primario reutilizable */
.rp-btn {
  display: inline-block;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--rp-radius-md);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--rp-color-primary-1) 0%, var(--rp-color-primary-2) 100%);
  box-shadow: 0 10px 24px rgba(102,126,234,.25);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.rp-btn:hover { filter: brightness(0.98); transform: translateY(-1px); }
.rp-btn:active { transform: translateY(0); }

/* Utilidades de espaciado (por si las necesitas) */
.rp-mt-0 { margin-top: 0 !important; }
.rp-mb-0 { margin-bottom: 0 !important; }

/* Mensajes genéricos */
.rp-login-message,
.rp-no-rewards {
  text-align: center;
  font-family: var(--rp-font);
  padding: 40px;
}

/* Modo oscuro básico opcional */
@media (prefers-color-scheme: dark) {
  :root {
    --rp-color-text:  #e5e7eb;
    --rp-color-bg:    #0f172a;
    --rp-color-bg-soft: #0b1220;
    --rp-color-border: rgba(255,255,255,0.08);
  }
}