/* ==========================================================================
   Site temporário do revendedor — /r/<slug>/
   Depende dos tokens de styles.css e reaproveita o que já existe:
     · de styles.css — a aba em pílula (.tab) e o foco visível global;
     · de portal.css — a porta de entrada (.portal-gate, .gate-card), os
       indicadores (.kpi-row, .kpi), o painel (.panel, .panel-foot), a tabela
       (.table-wrap, .data-table), as pílulas de situação (.pill), o botão
       pequeno (.btn.small) e o texto só para leitor de tela (.sr-only).
   Aqui fica só o que a página tem de próprio: a barra do topo, a barra de
   visões, o indicador sem fonte e a visão de um produto.
   --------------------------------------------------------------------------
   Autor: Daniel Santos (Grupo Iconne) · Colaboração: Claude (assistente de IA)
   Versão: 0.2.0 · 2026-09-28 · visão geral da revenda e visão por produto
   Histórico: 0.1.0 · 2026-09-27 · grade de cartões (piloto da UP)
   ========================================================================== */

.revenda-app {
  min-height: 100vh;
  background: var(--surface);
}

/* Sem logo de propósito: a página é do revendedor (white-label). O topo diz
   só quem está conectado e oferece a saída. */
.revenda-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.revenda-quem {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.9rem;
}

.revenda-quem strong {
  color: var(--ink);
}

.revenda-main {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(32px, 6vw, 64px) 0 clamp(48px, 8vw, 96px);
}

/* O h1 global tem 15ch de largura máxima, pensado para títulos de vitrine.
   Nome de organização é outra coisa: pode ser longo e não deve quebrar cedo. */
.revenda-org {
  max-width: none;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem);
  line-height: 1.05;
}

/* --------------------------------------------------------------------------
   Barra de visões
   -------------------------------------------------------------------------- */

.revenda-nav {
  margin: clamp(22px, 3vw, 30px) 0 clamp(26px, 3.5vw, 38px);
}

/* Quebra de linha, e não rolagem lateral: com quatro produtos e nomes como
   "Gestão da qualidade", a barra não cabe numa linha de celular, e aba
   escondida fora da tela é aba que ninguém descobre. */
.revenda-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* .tab nasceu para <button>; aqui é <a>, que precisa virar caixa flexível
   para centralizar o texto na altura mínima da pílula. */
.revenda-abas .tab {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  text-align: center;
}

/* A aparência de "aba ativa" sai do aria-current, e não de uma classe à parte:
   o que o leitor de tela anuncia e o que se vê não têm como divergir. Mesmos
   valores de .tab.is-active em styles.css. */
.revenda-abas .tab[aria-current="page"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Visões (geral e de produto)
   -------------------------------------------------------------------------- */

/* O h2 global é de vitrine (até 2.7rem); dentro de uma área de trabalho ele é
   título de seção, no tamanho do .module-head do portal. */
.revenda-visao-titulo {
  max-width: none;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem);
}

/* O título recebe foco pelo script quando a visão troca por um link que some
   (o nome na tabela, o "Voltar"). Contorno só quando o navegador julga o foco
   de teclado — num clique de mouse, um retângulo em volta do título pareceria
   defeito. */
.revenda-visao-titulo:focus:not(:focus-visible) {
  outline: none;
}

.revenda-intro {
  max-width: 62ch;
  margin: 12px 0 0;
  color: var(--ink-500);
}

/* Rótulo de cada fileira de indicadores. Separar "Produtos" de "Operação com
   os seus clientes" deixa visível que a segunda fileira é a que ainda não
   tem fonte — e não um painel quebrado. */
.revenda-rotulo {
  margin: clamp(26px, 3.5vw, 36px) 0 12px;
  color: var(--ink-500);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* A legenda do indicador, aqui, é o MOTIVO de não haver número — informação,
   não enfeite. Em portal.css ela é --ink-300, que no branco fica abaixo do
   contraste mínimo para texto pequeno; nesta página vai para --ink-500. */
.revenda-visao .kpi em {
  color: var(--ink-500);
  line-height: 1.4;
}

/* Sem fonte: o travessão em tom apagado, para não ser lido de relance como
   um valor que existe. */
.kpi.sem-fonte strong {
  color: var(--ink-300);
}

.revenda-painel {
  margin-top: clamp(26px, 3.5vw, 36px);
}

/* O nome do produto é o link para a visão dele. Sublinhado porque, numa
   tabela, texto que leva a outro lugar precisa se anunciar como link — a cor
   sozinha não basta, e o site tira o sublinhado dos links por padrão. */
.revenda-painel .data-table a {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.revenda-painel .data-table a:hover {
  text-decoration-color: currentColor;
}

.revenda-vazio {
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Visão de um produto
   -------------------------------------------------------------------------- */

.revenda-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
  font-size: 0.9rem;
  font-weight: 500;
}

.revenda-voltar:hover {
  color: var(--ink);
}

.revenda-visao-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 14px 0 clamp(22px, 3vw, 30px);
}

/* min(240px, 100%), e não 240px puro: numa tela mais estreita que a coluna
   mínima, o valor fixo estouraria o contêiner e traria de volta a rolagem
   horizontal que o CHANGELOG registra como já corrigida no resto do site. */
.revenda-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}

.revenda-blocos .panel {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
}

/* O gap da grade já separa; as margens de portal.css somariam por cima. */
.revenda-blocos .panel h3,
.revenda-blocos .panel-foot {
  margin: 0;
}

.revenda-bloco-texto {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.93rem;
}

/* Mesmo desenho do número de um .kpi, no tom do indicador sem fonte. */
.revenda-numero {
  margin: 0;
  color: var(--ink-300);
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 600;
  line-height: 1;
}

/* O acesso existe, mas ainda não leva a lugar nenhum. Desabilitado de verdade
   (atributo disabled), não só com cara de desabilitado: sem ele, o botão
   continuaria focável e clicável por teclado. */
.revenda-app .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
  transform: none;
}