/* portal.css — o pouco de CSS que é só do portal, escrito à mão.
 *
 * O /site.css é GERADO a partir do site (npm run portal) e só contém as
 * classes que o site usa. Classe nova do Tailwind inventada numa página do
 * portal simplesmente não existe lá, e o estilo sai em branco sem erro
 * nenhum — já aconteceu mais de uma vez. O que for só do portal mora aqui.
 *
 * Carregar SEMPRE depois do /site.css: é de lá que vêm as variáveis de cor.
 */

/* ===== O VOLTAR DO TOPO =====
 *
 * Toda tela do portal precisa de um caminho de saída visível. A /gestao não
 * tinha nenhum: o logo não era link e o topo não tinha menu — quem entrava
 * ficava preso, com o único link da página sendo o rodapé em letra de 11px.
 *
 * Pílula com borda, e não texto cinza solto: texto solto não parece
 * clicável, e no celular não existe hover para revelar que é. A seta é
 * desenho (SVG), não o caractere "←" digitado — esse fica fora da linha de
 * base da letra e muda de forma conforme a fonte instalada.
 *
 * 40px de altura: o mínimo confortável para o dedo.
 */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: 0 .95rem 0 .8rem;
  border: 1px solid var(--color-borda);
  border-radius: 999px;
  background: rgba(233, 238, 244, .03);
  color: var(--color-tinta);
  font-size: .875rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .3s, background-color .3s, color .3s;
}

.voltar svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform .3s;
}

.voltar:hover {
  border-color: rgba(79, 140, 255, .55);
  background: rgba(79, 140, 255, .10);
  color: #fff;
}

.voltar:hover svg { transform: translateX(-2px); }

.voltar:focus-visible {
  outline: 2px solid var(--color-azul);
  outline-offset: 2px;
}

/* Variante miúda, para topo que já está cheio (a gestão tem conta e sair). */
.voltar--miudo {
  min-height: 2.25rem;
  padding: 0 .9rem 0 .75rem;
  font-size: .82rem;
}
.voltar--miudo svg { width: .95rem; height: .95rem; }

/* Tela estreita: a logo ao lado já diz "Solution". */
@media (max-width: 399px) {
  .voltar__marca { display: none; }
}

/* ===== BOTÕES PREMIUM DO TOPO E DA PRIMEIRA DOBRA =====
 *
 * Os mesmos acabamentos do site (ui.jsx: BOTAO_VERDE, BOTAO_BRANCO,
 * BOTAO_VIDRO), escritos aqui porque o /site.css é gerado e não tem as
 * classes de degradê e sombra. Todos com a MESMA altura, para o grupo do
 * topo ficar alinhado.
 */
.botao-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.6rem;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .3s, box-shadow .3s, background-color .3s, border-color .3s;
}
.botao-premium svg { width: 1rem; height: 1rem; flex: none; transition: transform .3s; }
.botao-premium:hover { transform: translateY(-2px); }
.botao-premium:hover .botao-premium__seta { transform: translateX(3px); }
.botao-premium:focus-visible { outline: 2px solid var(--color-verde); outline-offset: 2px; }

.botao-premium--verde {
  border-color: rgba(255, 255, 255, .15);
  background: linear-gradient(90deg, #0a9467, #05684a);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 30px -8px rgba(16, 185, 129, .6);
}
.botao-premium--verde:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 36px -8px rgba(16, 185, 129, .75); }
.botao-premium--branco {
  border-color: #fff;
  background: #fff;
  color: #0f172a;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .08), 0 10px 30px -10px rgba(0, 0, 0, .35);
}
.botao-premium--vidro {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.botao-premium--vidro:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }

/* A primeira dobra usa a versão grande. */
.botao-premium--grande { height: 3.1rem; padding: 0 1.5rem; font-size: .9rem; }

/* Rótulo longo e curto: no celular o topo fica com "Entrar" e "Assinar". */
.botao-premium__curto { display: none; }
@media (max-width: 639px) {
  .botao-premium__longo { display: none; }
  .botao-premium__curto { display: inline; }
  .botao-premium { height: 2.4rem; padding: 0 .85rem; font-size: .8rem; }
  .botao-premium--so-icone { width: 2.4rem; padding: 0; }
  .botao-premium--grande { height: 3rem; padding: 0 1.3rem; font-size: .9rem; }
}