/* ==========================================================================
   VITRINE DA PALETA — temporária

   Existe para o cliente ver três cores aplicadas antes de qualquer decisão, e
   nasce para ser apagada: este arquivo, `PaletaProposta.razor`, a linha do
   `App.razor` e o teste de front. Nada além disso a sustenta.

   NÃO altera token nenhum do sistema. Fora da rota `/vitrine/paleta`, o
   sistema fica idêntico ao que era.

   Os três valores do cliente aparecem UMA VEZ CADA, no bloco de tokens abaixo,
   e o arranjo os consome por `var()`. É a regra que `navegacao-e-layout` já
   declara — nenhum componente declara cor literal — e a vitrine seria o pior
   lugar para abri-la: é dela que sai a paleta que talvez vire o sistema todo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OS PAPÉIS

   Os dois arranjos declaram os mesmos papéis. É o que torna a comparação
   honesta: mesma composição, mesmos componentes, só os valores mudam.
   -------------------------------------------------------------------------- */

/* A paleta que o cliente mandou. Três valores, e tudo o mais deriva deles. */
.wms-vitrine--proposta {
  --vitrine-moldura: #031229;        /* azul escuro do fundo */
  --vitrine-pagina: #edeef2;         /* cinza da lua maior   */

  /* Derivados. O branco do cartão não veio do cliente: é o que preserva a
     hierarquia atual — página tingida, superfície de leitura branca. Está
     declarado como pergunta na própria tela. */
  --vitrine-superficie: #ffffff;

  /* Sobre a moldura escura, o rótulo é o cinza claro: 16,1:1. A tinta azul
     ali daria 1,37:1 e seria ilegível — é a única restrição dura desta
     paleta, e a tabela da tela mostra o número. */
  --vitrine-moldura-tinta: #edeef2;
  --vitrine-moldura-tinta-suave: #9fb0c9;
  --vitrine-moldura-ativo: #0e2a4a;
  --vitrine-moldura-borda: #0b2138;

  --vitrine-moldura-topo: #031229;

  --vitrine-texto: #02296c;
  --vitrine-texto-suave: #4a5c86;
  --vitrine-borda: #cfd4e0;
  --vitrine-realce: #dde3f1;
  --vitrine-link: #0b4fa8;
  --vitrine-foco: var(--vitrine-acao-gravar);

  /* Cada ação tem peso diferente, e a cor diz isso antes de a pessoa ler o
     rótulo. Por isso cada botão é ajustável em separado: é onde a paleta mais
     briga consigo mesma. */
  --vitrine-acao-gravar: #02296c;
  --vitrine-acao-gravar-tinta: #ffffff;
  --vitrine-acao-secundaria: #d2dcef;
  --vitrine-acao-secundaria-tinta: #02296c;
  --vitrine-acao-terciaria-tinta: #02296c;
  --vitrine-acao-cancelar: #ffffff;
  --vitrine-acao-cancelar-tinta: #02296c;
  --vitrine-acao-cancelar-borda: #cfd4e0;
  --vitrine-acao-excluir: #b02a2a;
  --vitrine-acao-excluir-tinta: #ffffff;

  /* Desabilitado tem par próprio, e não é o primário com opacidade: opacidade
     mistura com o que estiver atrás, então o mesmo botão fica com contraste
     diferente sobre o cartão e sobre a página — e a conta deixa de ser
     verificável. */
  --vitrine-acao-desabilitada: #e6e8ee;
  --vitrine-acao-desabilitada-tinta: #767d90;

  --vitrine-modal-topo: #02296c;
  --vitrine-modal-topo-tinta: #ffffff;
  --vitrine-modal-fundo: #ffffff;

  /* Os quatro retornos de ação. Não são a paleta da marca: verde, âmbar e
     vermelho já significam algo antes de esta tela existir, e o que está em
     jogo aqui é o tom, não o significado.

     Vêm mais escuros que os do sistema de hoje porque os de hoje reprovam:
     `--cor-sucesso` sobre `--cor-sucesso-fundo` dá 4,43:1 e `--cor-aviso`
     sobre `--cor-aviso-fundo` dá 3,31:1. A coluna "como está hoje" mostra os
     dois lado a lado. */
  --vitrine-aviso-sucesso: #e6f4ec;
  --vitrine-aviso-sucesso-tinta: #187145;
  --vitrine-aviso-atencao: #fdf3e2;
  --vitrine-aviso-atencao-tinta: #8a5a0f;
  --vitrine-aviso-erro: #fbeaea;
  --vitrine-aviso-erro-tinta: #b02a2a;
  --vitrine-aviso-informacao: #dde3f1;
  --vitrine-aviso-informacao-tinta: #02296c;

  --vitrine-fonte: var(--fonte-base);
}

/* A paleta de hoje, nos mesmos papéis — apontando para os tokens do sistema,
   nunca para hex. Se o design system mudar, esta coluna muda junto, que é
   exatamente o que se quer de uma comparação. */
.wms-vitrine--atual {
  --vitrine-moldura: var(--barra-fundo);
  --vitrine-pagina: var(--cor-fundo-pagina);
  --vitrine-superficie: var(--cor-fundo-superficie);
  --vitrine-moldura-tinta: var(--barra-texto);
  --vitrine-moldura-tinta-suave: var(--barra-texto-suave);
  --vitrine-moldura-ativo: var(--barra-ativo-fundo);
  --vitrine-moldura-borda: var(--barra-borda);
  --vitrine-texto: var(--cor-texto);
  --vitrine-texto-suave: var(--cor-texto-secundario);
  --vitrine-borda: var(--cor-borda);
  --vitrine-moldura-topo: var(--barra-fundo);
  --vitrine-realce: var(--cor-primaria-100);
  --vitrine-link: var(--cor-primaria-600);
  --vitrine-foco: var(--foco-cor);

  --vitrine-acao-gravar: var(--cor-primaria-500);
  --vitrine-acao-gravar-tinta: var(--cor-marca-contraste);
  --vitrine-acao-secundaria: var(--cor-primaria-100);
  --vitrine-acao-secundaria-tinta: var(--cor-primaria-800);
  --vitrine-acao-terciaria-tinta: var(--cor-primaria-500);
  --vitrine-acao-cancelar: var(--cor-fundo-superficie);
  --vitrine-acao-cancelar-tinta: var(--cor-primaria-500);
  --vitrine-acao-cancelar-borda: var(--cor-borda);
  --vitrine-acao-excluir: var(--cor-erro);
  --vitrine-acao-excluir-tinta: var(--cor-texto-invertido);
  --vitrine-acao-desabilitada: var(--cor-fundo-sutil);
  --vitrine-acao-desabilitada-tinta: var(--cor-texto-tenue);

  --vitrine-modal-topo: var(--cor-fundo-sutil);
  --vitrine-modal-topo-tinta: var(--cor-texto);
  --vitrine-modal-fundo: var(--cor-fundo-superficie);

  /* Aqui a comparação faz o trabalho mais útil desta tela: aponta para os
     tokens de feedback do sistema **como estão**, inclusive nos dois pares que
     hoje reprovam AA. Substituir por valores corrigidos deixaria a coluna
     bonita e mentirosa. */
  --vitrine-aviso-sucesso: var(--cor-sucesso-fundo);
  --vitrine-aviso-sucesso-tinta: var(--cor-sucesso);
  --vitrine-aviso-atencao: var(--cor-aviso-fundo);
  --vitrine-aviso-atencao-tinta: var(--cor-aviso);
  --vitrine-aviso-erro: var(--cor-erro-fundo);
  --vitrine-aviso-erro-tinta: var(--cor-erro);
  --vitrine-aviso-informacao: var(--cor-info-fundo);
  --vitrine-aviso-informacao-tinta: var(--cor-info);

  --vitrine-fonte: var(--fonte-base);
}

/* --------------------------------------------------------------------------
   A PÁGINA DA VITRINE
   -------------------------------------------------------------------------- */

.wms-vitrine {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

.wms-vitrine__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  border-left: 3px solid var(--cor-aviso);
  border-radius: var(--raio-md);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.wms-vitrine__aviso-icone {
  flex-shrink: 0;
  font-size: var(--fonte-tam-xl);
}

.wms-vitrine__aviso p {
  margin: 0;
}

.wms-vitrine__aviso p + p {
  margin-top: var(--espaco-2);
}

.wms-vitrine__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  min-width: 0;
}

/* `center`, e não `baseline`: o número é um círculo, e alinhar um círculo pela
   linha de base do texto ao lado o deixa pendurado. */
.wms-vitrine__rotulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

.wms-vitrine__rotulo-titulo {
  font-weight: var(--fonte-peso-medio);
}

.wms-vitrine__rotulo-apoio {
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
}

/* --------------------------------------------------------------------------
   O ARRANJO — moldura simulada e conteúdo

   A moldura é simulada aqui dentro porque a casca de verdade vive fora do
   container de qualquer página. Sem isso, a cor escura da paleta não teria
   onde aparecer — e é sobre ela que o cliente tem menos como opinar sem ver.
   -------------------------------------------------------------------------- */

.wms-vitrine__arranjo {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  border: var(--borda-largura) solid var(--vitrine-borda);
  border-radius: var(--raio-lg);
  background: var(--vitrine-pagina);
  box-shadow: var(--sombra-2);
  overflow: hidden;

  /* A fonte vale do arranjo para dentro. Fora dele, a tela do laboratório
     continua na fonte do sistema — senão trocar a fonte trocaria também os
     controles, e a pessoa perderia a referência do que estava mexendo. */
  font-family: var(--vitrine-fonte);
}

/* Nas seções que não são a moldura, a barra não existe — e sem esta linha o
   conteúdo ficaria espremido nos 12rem reservados para ela. */
.wms-vitrine__arranjo--sem-barra {
  grid-template-columns: minmax(0, 1fr);
}

.wms-vitrine__barra {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-3);
  background: var(--vitrine-moldura);
  border-right: var(--borda-largura) solid var(--vitrine-moldura-borda);
  color: var(--vitrine-moldura-tinta);
}

.wms-vitrine__marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding-bottom: var(--espaco-3);
  margin-bottom: var(--espaco-2);
  border-bottom: var(--borda-largura) solid var(--vitrine-moldura-borda);
  font-weight: var(--fonte-peso-medio);
}

/* Rótulo de seção **do menu**, e não da página — daí o prefixo. Chamava-se
   `__secao`, e o nome ficou disputado quando a página passou a ter seções de
   verdade. */
.wms-vitrine__barra-secao {
  padding: var(--espaco-3) var(--espaco-2) var(--espaco-1);
  font-size: var(--fonte-tam-xs);
  text-transform: uppercase;
  letter-spacing: var(--fonte-espaco-rotulo);
  color: var(--vitrine-moldura-tinta-suave);
}

.wms-vitrine__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2);
  border-radius: var(--raio-md);
  font-size: var(--fonte-tam-sm);
  transition: background var(--transicao);
}

.wms-vitrine__item:hover {
  background: var(--vitrine-moldura-borda);
}

.wms-vitrine__item--ativo {
  background: var(--vitrine-moldura-ativo);
  font-weight: var(--fonte-peso-medio);
}

/* Os cartões dividem a largura em vez de se empilharem.
   `auto-fit` com `minmax` mede a **própria grade**, e não a janela: o arranjo
   vive dentro de uma coluna cuja largura depende do editor ao lado, e uma
   media query respondendo à janela erraria justamente nos tamanhos
   intermediários. Onde não couberem dois, volta a ser um — que é o
   comportamento de antes. */
.wms-vitrine__conteudo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--espaco-4);
  padding: var(--espaco-4);
  min-width: 0;
}

.wms-vitrine__cabecalho {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  margin: calc(var(--espaco-4) * -1) calc(var(--espaco-4) * -1) 0;
  background: var(--vitrine-moldura-topo);
  color: var(--vitrine-moldura-tinta);
  box-shadow: var(--sombra-1);
}

.wms-vitrine__cabecalho-titulo {
  font-weight: var(--fonte-peso-medio);
}

.wms-vitrine__cabecalho-pessoa {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: var(--fonte-tam-sm);
  color: var(--vitrine-moldura-tinta-suave);
}

/* --- o cartão de conteúdo ------------------------------------------------- */

.wms-vitrine__cartao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--vitrine-borda);
  border-radius: var(--raio-lg);
  background: var(--vitrine-superficie);
  box-shadow: var(--sombra-1);
  color: var(--vitrine-texto);
}

.wms-vitrine__titulo {
  margin: 0;
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-medio);
  color: var(--vitrine-texto);
}

.wms-vitrine__apoio {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--vitrine-texto-suave);
}

.wms-vitrine__campos {
  display: flex;
  flex-direction: column;
  gap: var(--gap-campo);
}

.wms-vitrine__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.wms-vitrine__campo-rotulo {
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-medio);
  color: var(--vitrine-texto-suave);
}

/* Campo desenhado aqui, e não `RadzenTextBox`: o componente do Radzen lê as
   variáveis do tema global, e dentro da vitrine ele ignoraria os tokens do
   arranjo — as duas colunas sairiam com o mesmo campo, que é justamente o que
   a comparação precisa distinguir. */
.wms-vitrine__entrada {
  min-height: var(--alvo-min);
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--borda-largura) solid var(--vitrine-borda);
  border-radius: var(--raio-md);
  background: var(--vitrine-superficie);
  color: var(--vitrine-texto);
  font: inherit;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.wms-vitrine__entrada:focus,
.wms-vitrine__entrada--focada {
  outline: none;
  border-color: var(--vitrine-foco);
  box-shadow: 0 0 0 3px var(--vitrine-realce);
}

.wms-vitrine__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  align-items: center;
}

.wms-vitrine__botao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: var(--alvo-min);
  padding: 0 var(--espaco-4);
  border: var(--borda-largura) solid transparent;
  border-radius: var(--raio-md);
  font: inherit;
  font-weight: var(--fonte-peso-medio);
  cursor: pointer;
  transition: background var(--transicao), box-shadow var(--transicao),
              transform var(--transicao-media);
}

.wms-vitrine__botao:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--vitrine-realce);
}

.wms-vitrine__botao--gravar {
  background: var(--vitrine-acao-gravar);
  color: var(--vitrine-acao-gravar-tinta);
  box-shadow: var(--sombra-1);
}

.wms-vitrine__botao--gravar:hover {
  box-shadow: var(--sombra-2);
}

/* Ação que não se desfaz. Precisa parecer diferente das outras duas antes de
   alguém ler o rótulo — e é por isso que tem cor própria, e não é o gravar
   pintado de vermelho pela tela. */
.wms-vitrine__botao--excluir {
  background: var(--vitrine-acao-excluir);
  color: var(--vitrine-acao-excluir-tinta);
  box-shadow: var(--sombra-1);
}

.wms-vitrine__botao--excluir:hover {
  box-shadow: var(--sombra-2);
}

/* Retorno de toque: a peça afunda no clique e responde antes do servidor. */
.wms-vitrine__botao:active {
  transform: translateY(1px);
}

.wms-vitrine__botao--cancelar {
  background: var(--vitrine-acao-cancelar);
  border-color: var(--vitrine-acao-cancelar-borda);
  color: var(--vitrine-acao-cancelar-tinta);
}

.wms-vitrine__botao--cancelar:hover {
  background: var(--vitrine-realce);
}

/* Ação de verdade que não é a principal. Tem corpo — imprimir uma etiqueta não
   é o mesmo que desistir —, mas não disputa o olho com o gravar. */
.wms-vitrine__botao--secundario {
  background: var(--vitrine-acao-secundaria);
  color: var(--vitrine-acao-secundaria-tinta);
}

.wms-vitrine__botao--secundario:hover {
  box-shadow: var(--sombra-1);
}

/* Só texto. É o peso mais arriscado da escala: sem fundo nem borda, a cor
   sozinha precisa dizer que aquilo é clicável — e é a primeira coisa que se
   perde quando alguém aproxima o tom do texto comum. */
.wms-vitrine__botao--terciario {
  padding: 0 var(--espaco-3);
  background: transparent;
  color: var(--vitrine-acao-terciaria-tinta);
}

.wms-vitrine__botao--terciario:hover {
  background: var(--vitrine-realce);
}

/* Depois de todas as variantes, de propósito: `:disabled` tem a mesma
   especificidade das classes acima, então quem vence é quem vem por último. */
.wms-vitrine__botao:disabled {
  background: var(--vitrine-acao-desabilitada);
  border-color: transparent;
  color: var(--vitrine-acao-desabilitada-tinta);
  box-shadow: none;
  cursor: not-allowed;
}

.wms-vitrine__botao:disabled:hover {
  box-shadow: none;
}

/* Sem o afundar do clique: a peça respondia ao toque de algo que não vai
   acontecer. */
.wms-vitrine__botao:disabled:active {
  transform: none;
}

/* Enviando não é desabilitado. O botão fica bloqueado para não gravar duas
   vezes, mas mantém a cor da ação: apagá-lo faria a tela parecer travada
   justamente no instante em que está trabalhando. */
.wms-vitrine__botao--enviando:disabled {
  background: var(--vitrine-acao-gravar);
  color: var(--vitrine-acao-gravar-tinta);
  cursor: progress;
}

.wms-vitrine__girador {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wms-vitrine-girar 0.7s linear infinite;
}

@keyframes wms-vitrine-girar {
  to { transform: rotate(360deg); }
}

/* Texto que leva a outro lugar. O sublinhado fica sempre, e não só no ponteiro:
   numa tela cheia de dado, cor sozinha não separa link de texto comum — e para
   quem não distingue as duas cores, não separa nunca. */
.wms-vitrine__link {
  color: var(--vitrine-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* --- a grade -------------------------------------------------------------- */

.wms-vitrine__grade {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fonte-tam-sm);
}

.wms-vitrine__grade th {
  padding: var(--espaco-2) var(--espaco-3);
  text-align: left;
  font-size: var(--fonte-tam-xs);
  text-transform: uppercase;
  letter-spacing: var(--fonte-espaco-rotulo);
  color: var(--vitrine-texto-suave);
  border-bottom: var(--borda-largura) solid var(--vitrine-borda);
}

.wms-vitrine__grade td {
  padding: var(--espaco-2) var(--espaco-3);
  border-bottom: var(--borda-largura) solid var(--vitrine-borda);
  color: var(--vitrine-texto);
}

.wms-vitrine__grade tbody tr {
  transition: background var(--transicao);
}

.wms-vitrine__grade tbody tr:hover {
  background: var(--vitrine-realce);
}

/* A linha selecionada usa a tinta da paleta — é ação e navegação, e é
   justamente aqui que se vê se ela briga com os chips de status ao lado. */
.wms-vitrine__grade tbody tr[aria-selected="true"] {
  background: var(--vitrine-realce);
  box-shadow: inset 3px 0 0 var(--vitrine-acao-gravar);
}

.wms-vitrine__rolagem {
  overflow-x: auto;
}

/* --- estados -------------------------------------------------------------- */

.wms-vitrine__estados {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.wms-vitrine__estado {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3);
  border-radius: var(--raio-md);
  font-size: var(--fonte-tam-sm);
}

.wms-vitrine__estado--carregando {
  background: var(--vitrine-realce);
  color: var(--vitrine-texto);
}

/* Segue os mesmos tokens de erro dos avisos, e não os do sistema.
   Antes ficava fixo nos tokens do sistema, quando erro não era ajustável.
   Agora é — e deixá-lo de fora produziria o pior resultado possível: o cliente
   escolhe um vermelho, um dos dois blocos de erro muda e o outro não, sem nada
   na tela explicando por quê. */
.wms-vitrine__estado--erro {
  background: var(--vitrine-aviso-erro);
  color: var(--vitrine-aviso-erro-tinta);
}

.wms-vitrine__estado--vazio {
  border: var(--borda-largura) dashed var(--vitrine-borda);
  color: var(--vitrine-texto-suave);
}

/* --------------------------------------------------------------------------
   AVISOS — o toast e a mensagem fixa

   **As mesmas quatro cores nos dois.** O que separa um do outro é onde aparece
   e se some sozinho, não o tom: o mesmo acontecimento com dois verdes ensina a
   pessoa que a cor não quer dizer nada.

   O toast aqui fica **parado**. Um toast de verdade sumiria em segundos, e o
   cliente não tem como julgar uma cor que ele precisa perseguir — e no
   laboratório ele cobriria justamente o arranjo que está sendo comparado.
   -------------------------------------------------------------------------- */

.wms-vitrine__avisos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.wms-vitrine__mensagem,
.wms-vitrine__toast {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border-radius: var(--raio-md);
  font-size: var(--fonte-tam-sm);

  /* Sem cor: herda `currentColor`, que é a tinta da severidade. Um valor aqui
     viraria a quinta cópia de cada tom. */
  border-left: 3px solid;
}

/* O que faz um toast parecer toast é a elevação — ele está por cima da tela,
   não dentro dela. */
.wms-vitrine__toast {
  align-items: center;
  border: var(--borda-largura) solid var(--vitrine-borda);
  border-left: 3px solid;
  box-shadow: var(--sombra-3);
}

.wms-vitrine__mensagem--sucesso,
.wms-vitrine__toast--sucesso {
  background: var(--vitrine-aviso-sucesso);
  color: var(--vitrine-aviso-sucesso-tinta);
}

.wms-vitrine__mensagem--atencao,
.wms-vitrine__toast--atencao {
  background: var(--vitrine-aviso-atencao);
  color: var(--vitrine-aviso-atencao-tinta);
}

.wms-vitrine__mensagem--erro,
.wms-vitrine__toast--erro {
  background: var(--vitrine-aviso-erro);
  color: var(--vitrine-aviso-erro-tinta);
}

.wms-vitrine__mensagem--informacao,
.wms-vitrine__toast--informacao {
  background: var(--vitrine-aviso-informacao);
  color: var(--vitrine-aviso-informacao-tinta);
}

.wms-vitrine__aviso-icone-linha {
  flex-shrink: 0;
}

.wms-vitrine__aviso-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
  flex: 1;
}

.wms-vitrine__aviso-titulo {
  font-weight: var(--fonte-peso-medio);
}

.wms-vitrine__aviso-texto {
  margin: 0;
}

/* O fechar herda a tinta da severidade em vez de ter cor própria: um cinza fixo
   ali seria o único elemento do aviso a não responder à escolha do cliente. */
.wms-vitrine__aviso-fechar {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--espaco-1);
  border: 0;
  border-radius: var(--raio-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transicao);
}

.wms-vitrine__aviso-fechar:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   A TABELA DE CONTRASTE
   -------------------------------------------------------------------------- */

.wms-vitrine__amostras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}

.wms-vitrine__amostra {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
}

.wms-vitrine__amostra-cor {
  width: 3rem;
  height: 3rem;
  border-radius: var(--raio-md);
  border: var(--borda-largura) solid var(--cor-borda);
}

/* A amostra lê o token, e não recebe o valor por `style` inline. Sem isto, os três hex viveriam
   também no `.razor` — e "escurece um pouco esse azul" passaria a ser duas edições em vez de uma,
   com a segunda sendo a que alguém esquece. */
.wms-vitrine__amostra-cor--moldura { background: var(--vitrine-moldura); }
.wms-vitrine__amostra-cor--pagina  { background: var(--vitrine-pagina); }
.wms-vitrine__amostra-cor--texto   { background: var(--vitrine-texto); }

.wms-vitrine__amostra-nome {
  display: block;
  font-weight: var(--fonte-peso-medio);
  font-size: var(--fonte-tam-sm);
}

.wms-vitrine__amostra-hex {
  display: block;
  font-family: var(--fonte-mono);
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
}

/* --------------------------------------------------------------------------
   O AVISO DE ILEGIBILIDADE

   Substitui a tabela de contraste, que dizia "3,31:1 — Reprova" no fim da
   página. O número só quem conhece a norma decifra, e ficava longe de onde a
   cor foi escolhida — dava autoridade a uma linha que ninguém sabia ler.

   Aqui é o contrário: a consequência, em palavras, na seção onde a escolha
   acabou de ser feita. É a regra do sistema — o erro aparece no lugar do erro.

   Fica nos tokens de feedback do **sistema**, e não nos da paleta em teste:
   se herdasse os tokens escolhidos, uma escolha ruim o bastante deixaria
   ilegível justamente o aviso que denuncia a escolha ruim.
   -------------------------------------------------------------------------- */

.wms-vitrine__ilegivel {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  border-left: 3px solid var(--cor-erro);
  border-radius: var(--raio-md);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.wms-vitrine__ilegivel-icone {
  flex-shrink: 0;
  font-size: var(--fonte-tam-xl);
}

.wms-vitrine__ilegivel-titulo {
  margin: 0;
  font-weight: var(--fonte-peso-medio);
}

.wms-vitrine__ilegivel-lista {
  margin: var(--espaco-2) 0;
  padding-left: var(--espaco-4);
  font-size: var(--fonte-tam-sm);
}

.wms-vitrine__ilegivel-texto {
  margin: 0;
  font-size: var(--fonte-tam-sm);
}

/* --------------------------------------------------------------------------
   O MODAL SIMULADO

   Não é um diálogo de verdade: precisa ficar sempre à vista para ser julgado.
   Um diálogo real fecharia, e o cabeçalho dele — que é o que o cliente pediu
   para poder ajustar — só apareceria quando alguém lembrasse de abrir.
   -------------------------------------------------------------------------- */

.wms-vitrine__modal {
  border: var(--borda-largura) solid var(--vitrine-borda);
  border-radius: var(--raio-lg);
  background: var(--vitrine-modal-fundo);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}

.wms-vitrine__modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--vitrine-modal-topo);
  color: var(--vitrine-modal-topo-tinta);
  font-weight: var(--fonte-peso-medio);
}

.wms-vitrine__modal-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  color: var(--vitrine-texto);
}

.wms-vitrine__modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--espaco-2);
  padding-top: var(--espaco-2);
  border-top: var(--borda-largura) solid var(--vitrine-borda);
}

/* --------------------------------------------------------------------------
   AS ESCOLHAS GLOBAIS — tema e fonte

   Ficam fora das seções, e antes delas: não pertencem a nenhuma, valem para
   todas, e enfiá-las dentro de uma faria parecer que só aquela responde por
   elas.
   -------------------------------------------------------------------------- */

.wms-vitrine__global {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap-secao);
  align-items: start;
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-superficie);
  box-shadow: var(--sombra-1);
}

.wms-vitrine__global-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-2);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   A SEÇÃO — os ajustes ao lado da peça que eles pintam

   Antes o painel de ajustes ficava sozinho de um lado e a tela inteira do
   outro. Trocar a cor do cabeçalho do modal obrigava a caçar o modal numa
   página simulada de sete cartões — e quem não achasse concluía que a escolha
   não tinha pegado.

   Os ajustes **não** herdam os tokens em teste, e é por isso que vivem fora da
   peça e não dentro dela: se herdassem, escolher um texto ilegível esconderia
   os próprios controles e a pessoa perderia o caminho de volta.
   -------------------------------------------------------------------------- */

.wms-vitrine__secao,
.wms-vitrine__inteira {
  display: grid;
  gap: var(--espaco-4) var(--gap-secao);
  align-items: start;
  padding-top: var(--espaco-5);
  border-top: var(--borda-largura) solid var(--cor-borda);
}

.wms-vitrine__secao {
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
}

.wms-vitrine__inteira {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 68rem) {
  .wms-vitrine__secao {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wms-vitrine__secao-topo {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
}

.wms-vitrine__secao-identidade {
  flex: 1;
  min-width: 0;
}

/* `wrap`, porque a pílula de "alterada" entra aqui depois de a seção nascer:
   sem ele, o nome espremeria em vez de quebrar, e a quebra do nome cresceria o
   cabeçalho — de novo o conteúdo descendo por causa de um marcador. */
.wms-vitrine__secao-nome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin: 0;
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-medio);
}

.wms-vitrine__secao-descricao {
  margin: var(--espaco-1) 0 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

/* O número é a ligação entre os dois lados — o mesmo dígito no cabeçalho dos
   ajustes e no rótulo da peça. É a resposta a "qual estou mudando" para quem
   olha o meio da página sem ter acompanhado a rolagem. */
.wms-vitrine__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria-500);
  color: var(--cor-marca-contraste);
  font-weight: var(--fonte-peso-medio);
  font-variant-numeric: tabular-nums;
}

.wms-vitrine__numero--pequeno {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--fonte-tam-xs);
}

/* A soma não é a sexta seção: é as cinco juntas. Numerá-la faria o número
   deixar de significar "esta peça" e passar a significar "mais uma". */
.wms-vitrine__numero--soma {
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto-secundario);
}

/* Aviso e ajustes num item só da grade. Soltos, o aviso de ilegibilidade
   ocupava uma linha inteira da seção e empurrava as peças para baixo — bastava
   escolher um tom ruim para tudo pular, inclusive o que a pessoa estava
   olhando. Aqui ele cresce dentro desta coluna, e as peças ficam paradas. */
.wms-vitrine__secao-controles {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  min-width: 0;
}

.wms-vitrine__secao-pecas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--espaco-4);
  min-width: 0;
}

.wms-vitrine__inteira .wms-vitrine__secao-pecas {
  grid-column: 1 / -1;
}

.wms-vitrine__ajustes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

/* Três colunas, e a terceira **sempre reservada**.
   Antes eram duas, e o botão de desfazer entrava dentro do rótulo. O rótulo é
   um flex numa coluna `1fr` estreita: com o botão e a pílula lá dentro, um nome
   um pouco mais longo — "Texto secundário da moldura" — deixava de caber, o
   texto quebrava em duas linhas e a linha crescia. Mexer numa cor empurrava
   tudo o que vinha abaixo.

   Reservar a coluna custa uns 44px de largura em toda linha, inclusive nas que
   nunca serão mexidas. É o preço de a página não pular debaixo do ponteiro de
   quem está escolhendo cor — que é a única coisa que se faz aqui. */
.wms-vitrine__ajuste {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) var(--alvo-min);
  gap: var(--espaco-1) var(--espaco-3);
  align-items: center;
}

/* O seletor acompanha rótulo e ajuda; o campo de hex desce para a linha
   inteira. Sem o `span`, o quadrado ficaria centralizado contra três linhas e
   descolaria do rótulo a que pertence. */
.wms-vitrine__ajuste-seletor {
  grid-row: span 2;
}

.wms-vitrine__ajuste-rotulo {
  grid-column: 2;
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-medio);
}

/* A ajuda passa por baixo do botão: ela pode quebrar em quantas linhas quiser
   sem empurrar nada, porque a linha dela não tem mais ninguém. */
.wms-vitrine__ajuste-ajuda {
  grid-column: 2 / -1;
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
}

.wms-vitrine__ajuste-desfazer {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
}

/* Botão próprio, e não `RadzenButton`: o do Radzen traz largura e altura
   mínimas que a coluna reservada teria de adivinhar. Aqui o tamanho é o do
   alvo mínimo do sistema, e a coluna vale exatamente isso. */
.wms-vitrine__desfazer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alvo-min);
  height: var(--alvo-min);
  padding: 0;
  border: 0;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto-tenue);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.wms-vitrine__desfazer:hover {
  background: var(--cor-fundo-sutil);
  color: var(--cor-primaria-500);
}

/* O campo de hex ocupa a linha inteira, abaixo do seletor e do rótulo: é onde
   se cola o código que veio do catálogo da marca, e colar é o caminho que traz
   a cor exata — arrastando ninguém acerta um valor específico. */
.wms-vitrine__ajuste-hex {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.wms-vitrine__ajuste-hex .rz-textbox {
  width: 100%;
  font-family: var(--fonte-mono);
  text-transform: uppercase;
}

.wms-vitrine__recusa {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  font-size: var(--fonte-tam-xs);
  color: var(--cor-erro);
}

/* O ponto que diz "esta você mexeu". Sem ele, ao voltar depois de vinte
   ajustes ninguém sabe o que ainda é de fábrica. */
.wms-vitrine__alterado {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 0 var(--espaco-2);
  border-radius: var(--raio-pilula);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-normal);
  color: var(--cor-info);
  background: var(--cor-info-fundo);
}

/* --------------------------------------------------------------------------
   O BLOCO PARA DEVOLVER
   -------------------------------------------------------------------------- */

.wms-vitrine__saida {
  margin: 0;
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-sutil);
  font-family: var(--fonte-mono);
  font-size: var(--fonte-tam-xs);
  line-height: var(--fonte-altura-padrao);
  overflow-x: auto;
  white-space: pre;
}

/* --------------------------------------------------------------------------
   AVISO DE FONTE NÃO EMPACOTADA
   -------------------------------------------------------------------------- */

.wms-vitrine__fonte-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  margin-top: var(--espaco-2);
  font-size: var(--fonte-tam-xs);
  color: var(--cor-aviso);
}

/* --------------------------------------------------------------------------
   A PROPOSTA NO TEMA ESCURO

   **Derivada, e não dada pelo cliente.** Ele mandou três cores de tema claro.
   Inventar um tema escuro e apresentar como escolha dele seria mentir; deixar
   sem nada tornaria metade do sistema impossível de julgar. O caminho é este:
   um ponto de partida com a origem declarada, ajustável como qualquer outro.

   O que a conta obrigou a mudar, e por quê:

   - **O azul do cliente some como botão.** `#02296c` sobre a página escura dá
     1,37:1 — o botão principal ficaria invisível. Ele clareia para `#5b8fd6`,
     que dá 5,65:1 contra a página.
   - **E aí o rótulo branco reprova.** Branco sobre o azul clareado cai para
     3,31:1. No escuro o rótulo vira escuro: `#031229` sobre `#5b8fd6` dá os
     mesmos 5,65:1. É o padrão que todo tema escuro acaba adotando, e não uma
     invenção desta tela.
   - **O azul escuro troca de papel.** No claro ele é moldura; no escuro é a
     própria página — que é o papel natural dele, e o que o nome "azul escuro
     do fundo" sempre sugeriu.

   O seletor é o mesmo `[data-tema="escuro"]` do design system, aninhado: é o
   que permite a coluna de comparação mostrar o sistema de hoje no tema certo
   sem copiar valor nenhum de lá.
   -------------------------------------------------------------------------- */

.wms-vitrine--proposta[data-tema="escuro"] {
  --vitrine-moldura: #020a16;
  --vitrine-moldura-topo: #020a16;
  --vitrine-moldura-tinta: #edeef2;
  --vitrine-moldura-tinta-suave: #a8b8cf;
  --vitrine-moldura-ativo: #16406b;
  --vitrine-moldura-borda: #1e3a5f;

  --vitrine-pagina: #031229;
  --vitrine-superficie: #0e2440;
  --vitrine-texto: #edeef2;
  --vitrine-texto-suave: #a8b8cf;
  --vitrine-borda: #2c4c78;
  --vitrine-realce: #16406b;
  --vitrine-link: #7fb0f0;

  --vitrine-acao-gravar: #5b8fd6;
  --vitrine-acao-gravar-tinta: #031229;
  --vitrine-acao-secundaria: #1b3a5f;
  --vitrine-acao-secundaria-tinta: #dbe7f7;
  --vitrine-acao-terciaria-tinta: #9dc2f0;
  --vitrine-acao-cancelar: #0e2440;
  --vitrine-acao-cancelar-tinta: #c7d6ea;
  --vitrine-acao-cancelar-borda: #2c4c78;
  --vitrine-acao-excluir: #f08a8a;
  --vitrine-acao-excluir-tinta: #3a1616;
  --vitrine-acao-desabilitada: #132a45;
  --vitrine-acao-desabilitada-tinta: #657f9e;

  --vitrine-modal-topo: #5b8fd6;
  --vitrine-modal-topo-tinta: #031229;
  --vitrine-modal-fundo: #0e2440;

  /* No escuro os quatro se invertem: a cor forte vira o texto e o fundo vira o
     tom escuro dela. O âmbar é o único que não precisou de conta nova — no
     escuro ele já nasce claro sobre fundo escuro, que é a direção em que
     funciona. */
  --vitrine-aviso-sucesso: #0f2e1f;
  --vitrine-aviso-sucesso-tinta: #4ade80;
  --vitrine-aviso-atencao: #33260d;
  --vitrine-aviso-atencao-tinta: #e8b45c;
  --vitrine-aviso-erro: #3a1616;
  --vitrine-aviso-erro-tinta: #f08a8a;
  --vitrine-aviso-informacao: #122b4a;
  --vitrine-aviso-informacao-tinta: #8fb6e8;
}

/* --------------------------------------------------------------------------
   O SELETOR DE TEMA DO LABORATÓRIO
   -------------------------------------------------------------------------- */

.wms-vitrine__tema {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding-bottom: var(--espaco-3);
  border-bottom: var(--borda-largura) solid var(--cor-borda);
}

.wms-vitrine__tema-rotulo {
  font-size: var(--fonte-tam-xs);
  text-transform: uppercase;
  letter-spacing: var(--fonte-espaco-rotulo);
  color: var(--cor-texto-tenue);
}

.wms-vitrine__tema-opcoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-2);
}

/* Dois botões que dizem em qual se está, e não um que alterna: o alternador
   cego não diz nem onde você está nem para onde vai — só que algo muda. Mesma
   razão do seletor de tema do cabeçalho. */
.wms-vitrine__tema-opcao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: var(--alvo-min);
  padding: 0 var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-superficie);
  color: var(--cor-texto-secundario);
  font: inherit;
  font-size: var(--fonte-tam-sm);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao);
}

.wms-vitrine__tema-opcao:hover {
  background: var(--cor-fundo-sutil);
}

.wms-vitrine__tema-opcao--atual {
  border-color: var(--cor-primaria-500);
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-800);
  font-weight: var(--fonte-peso-medio);
}

/* --------------------------------------------------------------------------
   O BLOCO PARA DEVOLVER — fora da tela

   O CSS não é para ler: são setenta linhas de hexadecimal que não dizem nada a
   quem escolhe cor, e ocupavam o fim da página como se dissessem. Fica no
   `pre`, escondido, e sai por um botão.

   **Escondido, e não removido.** `hidden` continua no documento, então a cópia
   por seleção ainda funciona quando o navegador recusa a área de transferência
   — é o caminho de volta quando o botão falha.
   -------------------------------------------------------------------------- */

.wms-vitrine__entrega {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
}

.wms-vitrine__copiado {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  font-size: var(--fonte-tam-sm);
  color: var(--cor-sucesso);
}

/* --------------------------------------------------------------------------
   MOVIMENTO REDUZIDO

   Quem pediu menos movimento no sistema operacional pediu no sistema inteiro,
   e o laboratório não é exceção. O girador para de girar: parado ele continua
   dizendo "estou trabalhando", que é a única coisa que precisava dizer.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wms-vitrine__item,
  .wms-vitrine__botao,
  .wms-vitrine__entrada,
  .wms-vitrine__grade tbody tr,
  .wms-vitrine__tema-opcao,
  .wms-vitrine__aviso-fechar {
    transition: none;
  }

  .wms-vitrine__botao:active {
    transform: none;
  }

  .wms-vitrine__girador {
    animation: none;
  }
}