/* Metas del programa de referidos — js/components/referral-goals.js.
   Dos variantes: --light (Invita y gana, fondo de la app) y --dark (paso de
   referidos de #/upgrade, mismo lenguaje que las tarjetas de planes: vidrio,
   borde de 2px y sombra desplazada).

   Tarjetas iguales en fila son un "AI tell" en una landing; aquí es a propósito:
   son cuatro metas del mismo tipo que se comparan entre sí, igual que los planes,
   y el estado (progreso / completada) las diferencia.

   Contraste medido (2026-10-08): detalle claro #5F5B57 sobre #FFFFFF 6.7:1;
   detalle oscuro rgba(255,255,255,.74) sobre el fondo del modal ≈ 9:1; check
   verde #15803D sobre #F0FDF4 4.8:1 y #4ADE80 sobre fondo oscuro ≈ 9:1. */
.rgoals {
  --rg-ease: cubic-bezier(0.23, 1, 0.32, 1);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.rgoal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 18px;
  padding: 18px 16px 16px;
  transition: transform 200ms var(--rg-ease), box-shadow 200ms var(--rg-ease), border-color 200ms var(--rg-ease);
}
.rgoal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rgoal-icon { font-size: 26px; }
.rgoal-step { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.rgoal-title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
/* base.css le pone color a los h3: sin esto el título salía oscuro sobre el modal. */
.rgoals--light .rgoal-title { color: var(--text-primary); }
.rgoals--dark .rgoal-title { color: #fff; }
.rgoal-reward { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.rgoal-detail { margin: 0; font-size: 13px; line-height: 1.45; flex: 1; }
.rgoal-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rgoal-bar { flex: 1; height: 8px; border-radius: 4px; overflow: hidden; }
.rgoal-bar > span { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.rgoal-count { font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Claro (Invita y gana) ── */
.rgoals--light .rgoal { background: var(--bg-white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text-primary); }
.rgoals--light .rgoal-icon, .rgoals--light .rgoal-reward { color: var(--violet); }
.rgoals--light .rgoal-step, .rgoals--light .rgoal-detail, .rgoals--light .rgoal-count { color: #5F5B57; }
.rgoals--light .rgoal-bar { background: var(--bg-secondary); }
.rgoals--light .rgoal-bar > span { background: var(--violet); }
.rgoals--light .rgoal.is-done { background: #F0FDF4; border-color: #86EFAC; }
.rgoals--light .rgoal.is-done .rgoal-icon,
.rgoals--light .rgoal.is-done .rgoal-step { color: #15803D; }
.rgoals--light .rgoal.is-done .rgoal-bar > span { background: #16A34A; }
[data-theme="dark"] .rgoals--light .rgoal-step,
[data-theme="dark"] .rgoals--light .rgoal-detail,
[data-theme="dark"] .rgoals--light .rgoal-count { color: #A5A3B4; }
[data-theme="dark"] .rgoals--light .rgoal-icon,
[data-theme="dark"] .rgoals--light .rgoal-reward { color: #A78BFA; }
[data-theme="dark"] .rgoals--light .rgoal.is-done { background: rgba(34, 197, 94, 0.10); border-color: rgba(74, 222, 128, 0.45); }
[data-theme="dark"] .rgoals--light .rgoal.is-done .rgoal-icon,
[data-theme="dark"] .rgoals--light .rgoal.is-done .rgoal-step { color: #4ADE80; }

/* ── Oscuro (paso de referidos de #/upgrade) ── */
.rgoals--dark .rgoal {
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: 5px 5px 0 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
}
.rgoals--dark .rgoal:nth-child(1) .rgoal-icon { color: #FF8C00; }
.rgoals--dark .rgoal:nth-child(2) .rgoal-icon { color: #FF3CAC; }
.rgoals--dark .rgoal:nth-child(3) .rgoal-icon { color: #A78BFA; }
.rgoals--dark .rgoal:nth-child(4) .rgoal-icon { color: #00B4D8; }
.rgoals--dark .rgoal-step, .rgoals--dark .rgoal-count { color: rgba(255, 255, 255, 0.74); }
.rgoals--dark .rgoal-detail { color: rgba(255, 255, 255, 0.74); }
.rgoals--dark .rgoal-reward { color: #fff; }
.rgoals--dark .rgoal-bar { background: rgba(255, 255, 255, 0.12); }
.rgoals--dark .rgoal-bar > span { background: linear-gradient(90deg, #FF8C00, #FF3CAC); }
.rgoals--dark .rgoal.is-done { border-color: rgba(74, 222, 128, 0.7); box-shadow: 5px 5px 0 0 rgba(74, 222, 128, 0.3); background: rgba(34, 197, 94, 0.08); }
.rgoals--dark .rgoal.is-done .rgoal-icon,
.rgoals--dark .rgoal.is-done .rgoal-step { color: #4ADE80; }
.rgoals--dark .rgoal.is-done .rgoal-bar > span { background: #4ADE80; }
@media (hover: hover) and (pointer: fine) {
  .rgoals--dark .rgoal:hover { transform: translateY(-4px); box-shadow: 9px 9px 0 0 rgba(255, 255, 255, 0.18); }
  .rgoals--dark .rgoal.is-done:hover { box-shadow: 9px 9px 0 0 rgba(74, 222, 128, 0.4); }
}

/* En "Invita y gana" (columna de ~880px) cuatro en fila quedan angostas: 2×2. */
.rgoals--light { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .rgoals--dark { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rgoals, .rgoals--light, .rgoals--dark { grid-template-columns: 1fr; gap: 10px; }
  .rgoal { padding: 14px; gap: 4px; }
  .rgoal-head { margin-bottom: 0; }
  .rgoal-title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rgoal { transition: none; }
}

/* ── Paso de referidos de #/upgrade (views/upgrade.html) ──
   Antes era una lista angosta junto al zorro; ahora las metas van en fila,
   como los planes, y el enlace y los botones debajo. */
.skora-super-referrals { max-width: 980px; margin: 0 auto; padding: 0 8px; }
.skora-super-referrals .referral-subtitle { text-align: center; font-size: 1.35rem; font-weight: 800; margin: 0 0 0.5rem; }
.skora-super-referrals .referral-lead {
  max-width: 640px; margin: 0 auto 1.4rem; text-align: center;
  color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; line-height: 1.5;
}
.skora-super-referrals .referral-lead strong { color: #fff; }
.skora-super-referrals-foot { max-width: 560px; margin: 1.4rem auto 0; }
.skora-super-referrals .referral-actions { display: flex; gap: 10px; }
.skora-super-referrals .referral-actions .referral-view-btn { flex: 1; text-decoration: none; }
@media (max-width: 640px) {
  .skora-super-referrals .referral-subtitle { font-size: 1.15rem; }
  .skora-super-referrals .referral-actions { flex-direction: column; gap: 0; }
}