/* ============================================================================
   CLUBE SAFIRION — entrada pela conta da corretora (au-*), convite (au-*),
   Rankings (rk-*), atalhos do Clube no Painel (cl-*) e selo "ao vivo" do menu.
   Só variáveis do tokens.css; camada components (o tokens.css declara a ordem).
   Indique e Ganhe = indique.css · Ao vivo = aovivo.css.
   ========================================================================== */
@layer components {

  /* ---------------------------------------------------------------------------
     Entrada (login.html) e convite (/convite/<uid>)
     ------------------------------------------------------------------------ */
  .au-choices{display:flex;flex-direction:column;gap:var(--sp-3)}
  .au-choice{display:flex;flex-direction:column;gap:6px}
  .au-choice .sf-btn{min-height:52px;font-size:var(--fs-lg)}
  .au-choice__note{text-align:center;color:var(--faint);font-size:var(--fs-xs)}
  .au-btn__arrow{transition:transform var(--dur-2) var(--ease)}
  .sf-btn:hover .au-btn__arrow{transform:translateX(3px)}

  .au-trust{
    display:flex;align-items:flex-start;gap:var(--sp-2);
    margin-top:var(--sp-6);padding:var(--sp-3) var(--sp-4);
    border:1px solid var(--border-soft);border-radius:var(--r-md);
    background:var(--primary-a04);color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-snug);
  }
  .au-trust svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px;color:var(--primary-2)}

  .au-alt{margin-top:var(--sp-6);text-align:center}
  .au-alt__btn{
    background:none;border:0;padding:var(--sp-2) var(--sp-3);min-height:44px;
    color:var(--muted);font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:3px;
    text-decoration-color:var(--border-strong);cursor:pointer;
  }
  .au-alt__btn:hover{color:var(--primary-2)}
  .au-legacy{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--border-soft)}
  .au-legacy[hidden]{display:none}

  .au-erro{margin-bottom:var(--sp-5)}
  .au-loading{display:flex;justify-content:center;padding:var(--sp-6) 0}
  /* display de autor vence o [hidden] do navegador: sem isto o spinner nunca some */
  .au-loading[hidden],.au-erro[hidden],.sf-card[hidden]{display:none}
  .au-loading span{
    width:22px;height:22px;border-radius:50%;
    border:2px solid var(--primary-a22);border-top-color:var(--primary-2);
    animation:auSpin .8s linear infinite;
  }
  @keyframes auSpin{to{transform:rotate(360deg)}}

  /* convite */
  .au-invite__who{
    display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
    margin:0 auto var(--sp-5);
  }
  .au-invite__avatar{
    width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary-a32),var(--primary-a10));
    border:1px solid var(--primary-a50);color:var(--ink);font-weight:var(--fw-bold);font-size:var(--fs-md);
    box-shadow:0 0 24px -6px var(--primary-a50);
  }
  .au-invite__from{font-size:var(--fs-sm);color:var(--muted);text-align:left;line-height:1.3}
  .au-invite__from b{display:block;color:var(--ink);font-size:var(--fs-md)}
  .au-points{
    list-style:none;margin:0 0 var(--sp-6);padding:var(--sp-4) var(--sp-5);
    display:grid;gap:var(--sp-3);
    border:1px solid var(--border);border-radius:var(--r-lg);background:var(--fill-solid);
  }
  .au-points li{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-md);color:var(--ink-soft)}
  .au-points svg{width:18px;height:18px;flex:0 0 18px;color:var(--primary-2)}
  .au-risk{margin-top:var(--sp-6);text-align:center;color:var(--faint);font-size:var(--fs-2xs);line-height:var(--lh-snug)}

  /* ---------------------------------------------------------------------------
     Rankings — lista dos rankings ativos + ranking aberto dentro do Clube
     ------------------------------------------------------------------------ */
  .rk-tabs{
    display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;
    margin-bottom:var(--sp-4);padding-bottom:2px;
  }
  .rk-tabs::-webkit-scrollbar{display:none}
  .rk-tab{
    flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    min-height:48px;padding:var(--sp-2) var(--sp-4);
    border:1px solid var(--border);border-radius:var(--r-md);
    background:var(--fill-solid);color:var(--muted);text-align:left;cursor:pointer;
    transition:border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);
  }
  .rk-tab b{color:var(--ink);font-size:var(--fs-md);font-weight:var(--fw-semi)}
  .rk-tab span{font-size:var(--fs-2xs)}
  .rk-tab:hover{border-color:var(--border-strong)}
  .rk-tab[aria-selected="true"]{border-color:var(--primary);background:var(--primary-a10);box-shadow:inset 0 0 0 1px var(--primary-a22)}
  .rk-tab[aria-selected="true"] span{color:var(--primary-2)}

  /* A seção É o placar: ocupa a área de conteúdo inteira, de ponta a ponta
     (cancela o respiro do .sf-main), sem cabeçalho e sem moldura. */
  .rk-full{margin:calc(-1 * var(--shell-pad-y)) calc(-1 * var(--shell-gutter)) calc(-1 * var(--sp-10))}
  .rk-full .rk-tabs{margin:0;padding:var(--sp-4) var(--shell-gutter)}
  .rk-frame{position:relative;overflow:hidden;background:#000;height:calc(100vh - var(--shell-header-h))}
  .rk-frame iframe{display:block;width:100%;height:100%;border:0;background:#000}
  .rk-frame__loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:var(--fs-sm);pointer-events:none}
  @media (max-width:900px){
    /* embaixo sobra só o espaço das abas do celular (o fim do placar não some atrás delas) */
    .rk-full{margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-7))}
    .rk-frame{height:calc(100vh - 60px - var(--shell-tabbar-h))}
  }
  /* placar INTEIRO: o ranking informou a altura dele -> o quadro cresce até ela e
     a página rola uma vez só (a altura vai no próprio iframe, inline). Sem essa
     resposta, fica o modo de cima: altura da tela com rolagem interna. */
  .rk-frame.rk-frame--auto{height:auto}

  /* ---------------------------------------------------------------------------
     Atalhos do Clube no Painel (Ao vivo · Indique e Ganhe · Rankings)
     ------------------------------------------------------------------------ */
  .cl-strip{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
  .cl-tile{
    --card-pad:var(--sp-5);
    display:flex;align-items:center;gap:var(--sp-4);min-height:88px;
  }
  .cl-tile__icon{
    width:46px;height:46px;flex:0 0 46px;border-radius:var(--r-md);display:grid;place-items:center;
    background:var(--primary-a14);color:var(--primary-2);
  }
  .cl-tile__icon svg{width:22px;height:22px}
  .cl-tile__icon--live{background:rgba(232,92,92,.12);color:#ff9b8f}
  .cl-tile__icon--gold{background:rgba(228,178,60,.13);color:var(--warn)}
  .cl-tile__body{flex:1;min-width:0}
  .cl-tile__title{display:flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-bold);font-size:var(--fs-lg)}
  .cl-tile__text{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
  .cl-tile__go{color:var(--faint);transition:transform var(--dur-2) var(--ease),color var(--dur-2) var(--ease-out)}
  .cl-tile:hover .cl-tile__go{transform:translateX(3px);color:var(--primary-2)}
  @media (max-width:560px){
    .cl-strip{gap:var(--sp-3)}
    .cl-tile{--card-pad:var(--sp-4);min-height:72px;gap:var(--sp-3)}
    .cl-tile__icon{width:40px;height:40px;flex-basis:40px}
    .cl-tile__title{font-size:var(--fs-md)}
    .cl-tile__text{font-size:var(--fs-xs)}
  }
  .cl-live{
    display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pill);
    background:rgba(232,92,92,.14);color:#ff9b8f;font-size:var(--fs-3xs);font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;
  }
  .cl-live .sf-dot{width:6px;height:6px;animation:sfPulse 1.6s ease-in-out infinite}

  /* selo no menu (lateral e abas do celular) */
  .sf-navitem__live{
    margin-left:auto;width:8px;height:8px;border-radius:50%;
    background:#ff6b5e;box-shadow:0 0 0 3px rgba(232,92,92,.18),0 0 10px rgba(232,92,92,.7);
    animation:sfPulse 1.6s ease-in-out infinite;
  }
  .sf-navitem__count{
    margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);
    display:inline-grid;place-items:center;
    background:var(--warn);color:#1a1200;font-size:var(--fs-3xs);font-weight:var(--fw-black);
  }
  .sf-tabbar a{position:relative}
  .sf-tabbar__live{
    position:absolute;top:9px;left:calc(50% + 9px);width:7px;height:7px;border-radius:50%;
    background:#ff6b5e;box-shadow:0 0 8px rgba(232,92,92,.8);animation:sfPulse 1.6s ease-in-out infinite;
  }

  @media (prefers-reduced-motion:reduce){
    .sf-navitem__live,.sf-tabbar__live,.cl-live .sf-dot,.au-loading span{animation:none}
    .au-btn__arrow,.cl-tile__go{transition:none}
  }
}