/* ============================================================
   MinerOS Hub · REFERIDOS (estilos)
   ------------------------------------------------------------
   Sigue el vocabulario que ya usa la cuenta: paneles sobre --card,
   bordes de 1px en --border, mono en versalitas para los rótulos de
   campo y dorado solo para el acento. Ni un color nuevo.

   Dos decisiones que vienen del spec:

   · No hay carditis. El embudo es UNA rejilla de cuatro columnas con
     una barra cada una, no cuatro tarjetas con sombra. La cartera es
     una fila de dos cifras, no dos cajas.

   · Las animaciones son de 160-320 ms con salida suave y nada más.
     Sin confeti, sin brillos, sin rebotes. Lo único que se mueve por
     su cuenta es el punto de "en verificación", porque comunica que
     algo está pasando ahora mismo.
   ============================================================ */

/* ---------- franja de invitación ---------- */
/* Arriba y fija, por encima del contenido pero sin taparlo: el body no
   se desplaza, así que no hay salto al aparecer. Se acepta cubrir 44px
   de cabecera durante unos segundos a cambio de no mover la página. */
.ref-invite{position:fixed;top:0;left:0;right:0;z-index:1400;
  display:flex;align-items:center;gap:13px;padding:11px 18px;
  background:linear-gradient(180deg,rgba(231,189,90,.13),var(--bg-2));
  border-bottom:1px solid var(--border-gold);
  transform:translateY(-100%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.ref-invite.on{transform:translateY(0)}
.ref-invite-ic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;color:var(--gold);background:rgba(231,189,90,.12);border:1px solid var(--border-gold)}
.ref-invite-ic .mos-ic{width:15px;height:15px}
.ref-invite p{margin:0;font-size:.9rem;color:var(--text);line-height:1.5}
.ref-invite p b{color:var(--gold)}
.ref-invite p span{color:var(--text-2)}
.ref-invite-x{margin-left:auto;flex:0 0 auto;width:44px;height:44px;
  background:none;border:0;color:var(--text-muted);font-size:1.3rem;line-height:1;cursor:pointer}
.ref-invite-x:hover{color:var(--text)}

/* ---------- enlace y acciones ---------- */
.rf-link{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:18px 20px;margin-top:4px}
.rf-link-row{display:flex;flex-direction:column;gap:5px;min-width:0}
.rf-link-lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
/* El enlace puede ser largo y no debe romper la caja ni quedar cortado
   sin aviso: se parte por donde toca y se lee entero. */
.rf-link-v{display:block;font-family:var(--mono);font-size:.94rem;color:var(--gold);
  overflow-wrap:anywhere;line-height:1.5}
.rf-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
.rf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;border-radius:11px;cursor:pointer;
  background:none;border:1px solid var(--border);color:var(--text-2);
  font-family:var(--font);font-size:.86rem;font-weight:600;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.rf-btn:hover{border-color:var(--border-gold);color:var(--gold)}
.rf-btn b{font-family:var(--mono);color:var(--text);font-weight:700;letter-spacing:.02em}
.rf-btn .mos-ic{width:15px;height:15px}
.rf-btn-main{background:var(--gold);border-color:var(--gold);color:#17120a}
.rf-btn-main:hover{background:var(--gold-2);border-color:var(--gold-2);color:#17120a}
/* Confirmación de copiado: cambia el color, no el tamaño. El ancho lo
   fija el JS antes de cambiar el texto para que la fila no salte. */
.rf-btn.is-done{border-color:var(--gold);color:var(--gold);background:rgba(231,189,90,.1)}
.rf-btn-main.is-done{background:var(--gold);color:#17120a}

/* ---------- embudo ---------- */
/* Cuatro etapas en una sola rejilla. `auto-fit` con minmax las baja a
   dos columnas en móvil sin media query, y nunca deja una huérfana
   porque son cuatro. */
.rf-funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;margin-top:14px}
.rf-stage{background:var(--card);padding:16px 16px 14px;display:flex;flex-direction:column;gap:4px}
.rf-stage-n{font-family:var(--display);font-size:1.7rem;font-weight:700;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums}
.rf-stage-l{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.rf-stage-bar{display:block;height:3px;border-radius:999px;background:var(--bg-3);margin-top:7px;overflow:hidden}
.rf-stage-bar i{display:block;height:100%;border-radius:999px;background:var(--gold);
  transition:width .38s cubic-bezier(.2,.7,.2,1)}
/* Etapa en cero: se atenúa la cifra pero la caja sigue ahí con su
   rótulo. Un hueco vacío parecería un fallo de carga; un cero
   atenuado dice "aún no" sin ambigüedad. */
.rf-stage.is-zero .rf-stage-n{color:var(--text-muted)}
.rf-stage.is-zero .rf-stage-bar i{background:var(--border)}

/* ---------- cartera ---------- */
.rf-wallet{display:flex;flex-wrap:wrap;gap:0;margin-top:14px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.rf-w{flex:1 1 150px;min-width:0;padding:15px 18px;display:flex;flex-direction:column;gap:3px;
  border-right:1px solid var(--border)}
.rf-w:last-child{border-right:0}
.rf-w span{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.rf-w b{font-family:var(--display);font-size:1.4rem;font-weight:700;line-height:1.1;color:var(--text);
  font-variant-numeric:tabular-nums}
.rf-w em{font-style:normal;font-size:.8rem;color:var(--text-2)}
/* Recompensa retenida: dorado y con un punto latiendo. Es el único
   elemento que se mueve solo, y se mueve porque hay algo en curso. */
.rf-w-pend{background:linear-gradient(160deg,rgba(231,189,90,.07),var(--card) 70%)}
.rf-w-pend b{color:var(--gold)}
.rf-w-pend span{color:var(--gold);display:inline-flex;align-items:center;gap:6px}
.rf-w-pend span::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:rfPulse 2.2s ease-in-out infinite}
@keyframes rfPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- línea de tiempo ---------- */
.rf-time{list-style:none;margin:16px 0 0;padding:0;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.rf-t{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--border)}
.rf-t:last-child{border-bottom:0}
.rf-t-dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex:0 0 auto}
.rf-t.is-ok .rf-t-dot{background:var(--gold)}
.rf-t.is-wait .rf-t-dot{background:var(--text-muted)}
.rf-t-who{font-family:var(--mono);font-size:.88rem;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf-t-st{font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.rf-t.is-ok .rf-t-st{color:var(--gold)}
.rf-t-at{font-family:var(--mono);font-size:.76rem;color:var(--text-muted);white-space:nowrap}

/* ---------- estados vacío, error y carga ---------- */
/* Los tres comparten forma: caja punteada, texto centrado, sin gris
   plano. El spec insiste en que ningún estado parezca roto. */
.rf-empty,.rf-off{border:1px dashed var(--border);border-radius:var(--radius);
  padding:26px 22px;margin-top:16px;text-align:center}
.rf-empty p,.rf-off p{margin:0;color:var(--text-2);font-size:.92rem;line-height:1.65;max-width:52ch;
  margin-left:auto;margin-right:auto}
.rf-off .rf-btn{margin-top:14px}
/* Esqueleto de carga con la FORMA del contenido que llega: tres
   bloques de la altura real del enlace, el embudo y la cartera. Así la
   caja no cambia de alto al resolverse y no hay salto de maquetación. */
.rf-skel{margin-top:4px;display:flex;flex-direction:column;gap:14px}
.rf-skel i{display:block;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);
  animation:rfBreathe 1.5s ease-in-out infinite}
.rf-skel i:nth-child(1){height:118px}
.rf-skel i:nth-child(2){height:96px}
.rf-skel i:nth-child(3){height:78px}
@keyframes rfBreathe{0%,100%{opacity:.55}50%{opacity:.85}}

/* ---------- compartir ---------- */
.rf-share{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:1500;
  display:flex;gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:13px;overflow:hidden;opacity:0;transition:opacity .2s ease,transform .2s ease}
.rf-share.on{opacity:1;transform:translate(-50%,0)}
.rf-share a{display:flex;align-items:center;min-height:44px;padding:0 20px;background:var(--card);
  color:var(--text);font-size:.88rem;font-weight:600}
.rf-share a:hover{background:var(--bg-3);color:var(--gold)}

/* ---------- aviso suelto ---------- */
.ref-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:1500;
  max-width:min(92vw,420px);padding:13px 18px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--border-gold);color:var(--text);
  font-size:.9rem;line-height:1.5;opacity:0;transition:opacity .22s ease,transform .22s ease}
.ref-toast.on{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  .ref-invite,.rf-share,.ref-toast{transition:none}
  .rf-stage-bar i{transition:none}
  .rf-w-pend span::before,.rf-skel i{animation:none}
}

@media(max-width:767px){
  .ref-invite{padding:10px 12px;gap:10px}
  .ref-invite p{font-size:.85rem}
  /* En móvil la segunda frase sobra: el titular ya dice lo esencial y
     la franja no debe comerse tres líneas de pantalla. */
  .ref-invite p span{display:none}
  .rf-link{padding:16px}
  .rf-acts .rf-btn{flex:1 1 auto}
  .rf-t{grid-template-columns:auto 1fr auto;gap:10px;padding:12px 14px}
  /* La fecha se cae antes que el estado: saber que alguien se activó
     importa más que saber qué día fue. */
  .rf-t-at{display:none}
}