/* Os portais acessados por uma linha da matriz de Canais de Venda (mudança
   portais-como-indicador-da-vendedora, 15/10/2026). Repete as medidas do modal
   de e-mails (emails-da-vendedora-vendas.css), por decisão do proposal ("igual
   o e-mail"): cabeçalho em caixa-alta de 8,5px, linha de 10,5px. Arquivo CSS
   comum, não `.razor.css` (regra fixa de 25/07/2026): todo seletor é prefixado
   por `.portais-vendedora`. */

.portais-vendedora {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.portais-vendedora__esqueleto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.portais-vendedora__esqueleto-linha {
  height: 26px;
  border-radius: 6px;
  background: var(--color-border-soft);
}

.portais-vendedora__erro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--danger-text);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  padding: 10px 12px;
}

.portais-vendedora__vazio {
  padding: 24px;
  text-align: center;
  font-size: 11px;
  color: var(--color-subtle);
}

.portais-vendedora__rolagem {
  overflow: auto;
  max-height: calc(100vh - 300px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.portais-vendedora__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.portais-vendedora__tabela th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-table-head-bg);
  color: var(--color-table-head-ink);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  padding: 7px 8px 6px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.portais-vendedora__tabela td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.portais-vendedora__tabela .portais-vendedora__direita {
  text-align: right;
}

/* A Observação das cotações na janela (portais-primeiro-dia-e-carga,
   20/10/2026) é uma frase: quebra em duas linhas em vez de cortar. */
.portais-vendedora__tabela td.portais-vendedora__observacao {
  white-space: normal;
  min-width: 200px;
  max-width: 300px;
}

.portais-vendedora__usina {
  font-weight: 700;
  color: var(--color-ink-forte);
}

.portais-vendedora__portal a {
  color: var(--info-text);
  text-decoration: underline;
}

.portais-vendedora__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.portais-vendedora__contagem {
  font-size: 10.5px;
  color: var(--color-subtle);
}

.portais-vendedora__paginas {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.portais-vendedora__botao {
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.portais-vendedora__botao:disabled {
  color: var(--color-disabled);
  cursor: not-allowed;
}

.portais-vendedora__pagina-rotulo {
  font-size: 10px;
  color: var(--color-ink-soft);
}

/* A segunda tabela do modal, "Cotações na janela dos acessos" (mudança
   portais-pelo-codigo-do-cliente, 20/10/2026). Segue o desenho da primeira:
   reusa a tabela, o esqueleto, a falha, o vazio e o rodapé acima; aqui só o
   título e a linha de apoio da seção, separada da tabela de portais por um fio. */

.portais-vendedora__secao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-soft);
}

.portais-vendedora__secao-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.portais-vendedora__secao-titulo {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--color-ink-forte);
}

.portais-vendedora__secao-apoio {
  margin-top: 2px;
  font-size: 10px;
  color: var(--color-subtle);
}