/* ════════════════════════════════════════════════════════
   css/referidos.css — Presumela.com
   Módulo 5: Referidos
   Depende de: css/base.css (variables, cards, botones, badges, etc.)
   Solo contiene estilos exclusivos de este módulo.
   ════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════
   LAYOUT DE PÁGINA
   ════════════════════════════════════════ */
.ref-pagina {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 16px 80px;
}

@media (min-width: 768px) {
  .ref-pagina { padding: 32px 16px 40px; }
}


/* ════════════════════════════════════════
   HERO — TU LINK
   ════════════════════════════════════════ */
.ref-hero {
  text-align: center;
  padding: var(--espacio-xl) var(--espacio-md);
  background: var(--fondo-card);
  border-radius: var(--radio-xl);
  border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-card);
  margin-bottom: var(--espacio-lg);
}

.ref-hero-icono {
  font-size: 48px;
  margin-bottom: var(--espacio-md);
  line-height: 1;
}

.ref-hero h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}

.ref-hero p {
  font-size: 14px;
  color: var(--texto-muted);
  margin-bottom: var(--espacio-lg);
}

/* Caja del link copiable */
.ref-link-box {
  display: flex;
  align-items: center;
  gap: var(--espacio-sm);
  background: var(--fondo-app);
  border: 1.5px solid var(--borde-input);
  border-radius: var(--radio-md);
  padding: 10px 14px;
  margin-bottom: var(--espacio-md);
}

.ref-link-texto {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--morado);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.ref-link-copiar {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--morado);
  color: #fff;
  border: none;
  border-radius: var(--radio-sm);
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transicion);
  white-space: nowrap;
}
.ref-link-copiar:hover  { background: var(--morado-dk); }
.ref-link-copiar:active { transform: scale(0.97); }

/* Botones de compartir */
.ref-compartir {
  display: flex;
  gap: var(--espacio-sm);
  justify-content: center;
}

.ref-btn-compartir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radio-pill);
  border: none;
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transicion);
  text-decoration: none;
}

.ref-btn-presumir {
  background: var(--gradiente);
  color: #fff;
  width: 100%;
  justify-content: center;
}
.ref-btn-presumir:hover { opacity: 0.92; color: #fff; }


/* ════════════════════════════════════════
   STATS — Contadores
   ════════════════════════════════════════ */
.ref-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-md);
  margin-bottom: var(--espacio-lg);
}

.ref-stat {
  background: var(--fondo-card);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  padding: var(--espacio-md);
  text-align: center;
  box-shadow: var(--sombra-card);
}

.ref-stat-numero {
  font-size: 28px;
  font-weight: 900;
  color: var(--morado);
  line-height: 1;
  margin-bottom: 4px;
}

.ref-stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-muted);
}


/* ════════════════════════════════════════
   PETS GANADOS — chip especial
   Usa .famas-chip de base.css como base,
   este solo sobreescribe el tamaño para la stat grande
   ════════════════════════════════════════ */
.ref-stat-pets {
  font-size: 24px;
  font-weight: 900;
  color: var(--naranja-dk);
  line-height: 1;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}


/* ════════════════════════════════════════
   CÓMO FUNCIONA — niveles
   ════════════════════════════════════════ */
.ref-niveles {
  background: var(--fondo-card);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  margin-bottom: var(--espacio-lg);
}

.ref-niveles-titulo {
  padding: var(--espacio-md) var(--espacio-lg);
  font-size: 14px;
  font-weight: 800;
  border-bottom: 1px solid var(--borde-divisor);
}

.ref-nivel-fila {
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
  padding: 12px var(--espacio-lg);
  border-bottom: 1px solid var(--borde-divisor);
}
.ref-nivel-fila:last-child { border-bottom: none; }

.ref-nivel-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--morado-light);
  border: 1.5px solid var(--morado-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: var(--morado-dk);
  flex-shrink: 0;
}

.ref-nivel-desc {
  flex: 1;
  font-size: 13px;
  color: var(--texto-secundario);
}

.ref-nivel-conteo {
  font-size: 12px;
  font-weight: 700;
  min-width: 80px;
  text-align: center;
}

.ref-nivel-pets {
  font-size: 14px;
  font-weight: 900;
  color: var(--naranja-dk);
  white-space: nowrap;
}


/* ════════════════════════════════════════
   LISTA DE REFERIDOS RECIENTES
   ════════════════════════════════════════ */
.ref-lista {
  background: var(--fondo-card);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.ref-lista-titulo {
  padding: var(--espacio-md) var(--espacio-lg);
  font-size: 14px;
  font-weight: 800;
  border-bottom: 1px solid var(--borde-divisor);
}

.ref-item {
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
  padding: 12px var(--espacio-lg);
  border-bottom: 1px solid var(--borde-divisor);
}
.ref-item:last-child { border-bottom: none; }

.ref-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fondo-hover);
  border: 2px solid var(--borde-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ref-item-info { flex: 1; min-width: 0; }

.ref-item-nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-principal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ref-item-fecha {
  font-size: 12px;
  color: var(--texto-muted);
  margin-top: 2px;
}

/* Estado del referido — usa badge de base.css como base */
.ref-estado-valido   { /* usa .badge-exito de base.css */ }
.ref-estado-pendiente { /* usa .badge-aviso de base.css */ }

.ref-item-nivel {
  font-size: 11px;
  font-weight: 700;
  color: var(--morado);
  background: var(--morado-light);
  border: 1px solid var(--morado-border);
  border-radius: var(--radio-pill);
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Estado vacío de la lista */
.ref-lista-vacia {
  text-align: center;
  padding: var(--espacio-xl) var(--espacio-md);
  color: var(--texto-muted);
  font-size: 14px;
}
.ref-lista-vacia-icono {
  font-size: 36px;
  margin-bottom: var(--espacio-sm);
}


/* ════════════════════════════════════════
   RESPONSIVE — Móvil pequeño
   ════════════════════════════════════════ */
@media (max-width: 480px) {
  .ref-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-sm);
  }

  .ref-stat-numero { font-size: 22px; }
  .ref-stat-pets   { font-size: 20px; }
  .ref-stat-label  { font-size: 11px; }

  .ref-compartir { flex-direction: column; }

  .ref-btn-compartir { justify-content: center; width: 100%; }
}