/* ============================================================================
   Cantoário WMS — Casca da aplicação

   Barra lateral, cabeçalho e área de conteúdo. Nenhum valor literal: cor,
   espaço, tamanho, raio e camada saem de design-system.css.

   O recolhimento é uma classe no elemento raiz, não uma troca de componente:
   remontar a árvore a cada recolhimento perderia a expansão e piscaria.
   ============================================================================ */

.wms-casca {
  display: grid;
  grid-template-columns: var(--barra-largura) 1fr;
  grid-template-rows: var(--topo-altura) 1fr;
  grid-template-areas:
    "barra topo"
    "barra conteudo";
  min-height: 100vh;
  background: var(--cor-fundo-pagina);
  transition: grid-template-columns var(--transicao);
}

.wms-casca--recolhida {
  grid-template-columns: var(--barra-largura-recolhida) 1fr;
}

/* --------------------------------------------------------------------------
   BARRA LATERAL
   -------------------------------------------------------------------------- */

.wms-barra {
  grid-area: barra;
  position: sticky;
  top: 0;
  align-self: start;
  z-index: var(--camada-barra);
  display: flex;
  flex-direction: column;
  width: var(--barra-largura);
  height: 100vh;
  background: var(--barra-fundo);
  color: var(--barra-texto);
  border-right: var(--borda-largura) solid var(--barra-borda);
  overflow: hidden;
  transition: width var(--transicao);
}

.wms-casca--recolhida .wms-barra {
  width: var(--barra-largura-recolhida);
}

/* Reabre SOBRE o conteúdo, sem deslocá-lo: empurrar faria a página inteira
   reposicionar toda vez que o ponteiro atravessasse a barra a caminho de
   outra coisa — que é o trajeto normal do mouse. */
.wms-casca--recolhida .wms-barra:hover,
.wms-casca--recolhida .wms-barra:focus-within {
  width: var(--barra-largura);
  box-shadow: var(--sombra-3);
}

/* --------------------------------------------------------------------------
   MARCA
   -------------------------------------------------------------------------- */

/* Sem traço embaixo: a barra inteira já está num tom próprio, e mais uma régua
   só acrescentaria ruído no alto da coluna. */
.wms-marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  min-height: calc(var(--topo-altura) + var(--espaco-3));
  padding: var(--espaco-4);
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}

.wms-marca:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: calc(var(--foco-largura) * -1);
  box-shadow: none;
}

/* Sobre fundo claro o símbolo aparece na cor da marca, sem filtro: o logo é
   monocromático e foi desenhado para branco. */
.wms-marca__simbolo {
  width: var(--marca-simbolo);
  height: var(--marca-simbolo);
  flex-shrink: 0;
  transition: transform var(--transicao-media);
}

/* O símbolo do tema em vigor. O outro sai do fluxo em vez de ficar invisível:
   `display: none` também o tira da leitura de tela e da largura da linha. */
.wms-marca__simbolo--escuro,
[data-tema="escuro"] .wms-marca__simbolo--claro {
  display: none;
}

[data-tema="escuro"] .wms-marca__simbolo--escuro {
  display: block;
}

.wms-marca:hover .wms-marca__simbolo {
  transform: scale(1.06);
}

.wms-marca__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--fonte-altura-compacta);
}

.wms-marca__nome {
  font-size: var(--fonte-tam-xl);
  font-weight: var(--fonte-peso-forte);
  color: var(--barra-marca-nome);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O ramo é subtítulo: menor e mais fraco, para o nome continuar sendo o que se lê
   primeiro. */
.wms-marca__ramo {
  font-size: var(--fonte-tam-xs);
  color: var(--barra-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   BUSCA
   -------------------------------------------------------------------------- */

.wms-barra__busca {
  padding: var(--espaco-2) var(--espaco-3) var(--espaco-3);
  flex-shrink: 0;
}

/* Campo preenchido e sem contorno, no mesmo formato de pílula dos itens: a busca
   pertence à coluna, e não é mais um formulário empilhado no alto dela. */
.wms-barra__busca .rz-textbox {
  /* Explícito, embora o Radzen já declare o mesmo: a altura e o padding daqui só
     fecham em `border-box`, e depender do reset de terceiro deixa a conta quebrar
     silenciosamente numa atualização da biblioteca. */
  box-sizing: border-box;
  width: 100%;
  height: var(--barra-item-altura);
  padding: 0 var(--espaco-4);
  border: none;
  border-radius: var(--barra-item-raio);
  background: var(--barra-busca-fundo);
  color: var(--barra-texto);
  font-size: var(--fonte-tam-md);
}

.wms-barra__busca .rz-textbox:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: calc(var(--foco-largura) * -1);
  box-shadow: none;
}

/* Régua entre os grupos de primeiro nível. Recuada dos dois lados, para separar
   sem virar mais um traço forte competindo com a pílula do item aberto.
   A folga vertical é curta de propósito: o item já traz a própria folga interna,
   e somar as duas abria um vão que lia como seção vazia entre os grupos. */
.wms-barra__separador {
  height: 0;
  margin: var(--espaco-1) var(--espaco-5);
  border: none;
  border-top: var(--borda-largura) solid var(--barra-borda);
}

/* Bloco de um assunto: a legenda e os itens que ela rotula. O primeiro não recebe
   traço — ele não separa nada, e o respiro do topo já vem da árvore. */
.wms-barra__bloco + .wms-barra__bloco {
  margin-top: var(--espaco-2);
  padding-top: var(--espaco-2);
  border-top: var(--borda-largura) solid var(--barra-borda);
}

/* Legenda do bloco. Caixa alta e corpo pequeno no azul da navegação: ela precisa
   ser lida como rótulo, e não disputar atenção com o item — quem procura uma tela
   lê os itens, e usa a legenda só para saber onde parar de procurar. O que a
   destaca é a cor e o espaçamento entre letras, não o tamanho. */
.wms-barra__legenda {
  margin: 0 0 var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-5);
  /* Trunca como o nome da marca e o título do item, e pelo mesmo motivo: o título
     da seção é cadastrado por tela e aceita 80 caracteres, então sem isto um
     rótulo longo quebra em três linhas e o cabeçalho do bloco perde o ritmo de
     uma linha que o resto da barra mantém. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* A mesma Open Sans do resto da interface, escrita e não herdada: a legenda já
     chegou a sair dela para a genérica do aparelho, e explicitar aqui evita que a
     ideia volte por engano. A fonte é empacotada em wwwroot/fonts justamente para
     desenhar igual na estação e no coletor. */
  font-family: var(--fonte-base);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--barra-legenda-peso);
  line-height: var(--fonte-altura-compacta);
  letter-spacing: var(--fonte-espaco-rotulo);
  text-transform: uppercase;
  color: var(--barra-legenda-texto);
}

/* O respiro do topo é o mesmo que a régua abre entre as seções: sem ele, o
   primeiro grupo encosta na busca e nasce com um ritmo diferente do resto. */
.wms-barra__arvore {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--espaco-2) 0 var(--espaco-5);
}

.wms-barra__aviso {
  padding: var(--espaco-4);
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--barra-texto-suave);
}

.wms-barra__aviso-acao {
  margin-top: var(--espaco-3);
}

/* Visibilidade do estado recolhido resolvida em CSS, não em C#: assim recolher
   não remonta componente nenhum, e a barra não pisca. */
.wms-casca--recolhida .wms-barra:not(:hover):not(:focus-within) .wms-oculta-recolhida {
  display: none;
}

.wms-so-recolhida {
  display: none;
}

.wms-casca--recolhida .wms-barra:not(:hover):not(:focus-within) .wms-so-recolhida {
  display: block;
}

/* --------------------------------------------------------------------------
   ITEM DE NAVEGAÇÃO
   -------------------------------------------------------------------------- */

/* box-sizing explícito: o navegador entrega `border-box` no <button> do grupo e
   `content-box` no <a> da folha. Sem esta linha a mesma altura mínima produz
   duas alturas, e "Início" cresce 16px a mais que "Acesso" logo abaixo. */
.wms-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  min-height: var(--barra-item-altura);
  margin: 0 var(--barra-item-recuo);
  padding: var(--espaco-2) var(--espaco-4);
  width: auto;
  border: none;
  border-radius: var(--barra-item-raio);
  background: transparent;
  color: var(--barra-texto);
  font-family: inherit;
  font-size: var(--fonte-tam-md);
  font-weight: var(--fonte-peso-forte);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--transicao),
    color var(--transicao),
    box-shadow var(--transicao-media),
    transform var(--transicao-media);
}

.wms-item:hover {
  background: var(--barra-item-hover);
  color: var(--cor-texto);
}

/* Afunda no clique. É o retorno tátil que diz que o toque pegou — no galpão, de
   luva, é comum a pessoa não ter certeza e clicar duas vezes. */
.wms-item:active {
  transform: scale(0.98);
}

.wms-item:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: calc(var(--foco-largura) * -1);
  box-shadow: none;
}

/* A pílula inteira é a marca do item aberto — sem traço na lateral, que num
   contorno arredondado sobra para fora e suja a curva. A elevação separa a
   pílula da superfície e faz "onde estou" ser lido antes do texto. */
/* Sem peso próprio: agora todo item já é forte, e repetir aqui não distinguiria
   nada — quem marca o ativo é a pílula, a cor e a elevação. */
.wms-item--ativo {
  background: var(--barra-ativo-fundo);
  color: var(--barra-ativo-texto);
  box-shadow: var(--sombra-marca-1);
}

.wms-item--ativo:hover {
  background: var(--barra-ativo-fundo);
  color: var(--barra-ativo-texto);
  box-shadow: var(--sombra-marca-2);
}

.wms-item--ativo .wms-item__icone {
  color: var(--barra-ativo-marca);
}

.wms-item__icone {
  flex-shrink: 0;
  font-size: var(--fonte-tam-xl);
  line-height: 1;
  color: var(--barra-icone);
  transition: color var(--transicao), transform var(--transicao-media);
}

.wms-item:hover .wms-item__icone {
  color: var(--barra-ativo-marca);
  transform: scale(1.1);
}

.wms-item__titulo {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wms-item__seta {
  flex-shrink: 0;
  font-size: var(--fonte-tam-xl);
  color: var(--barra-secao-texto);
  transition: transform var(--transicao-media), color var(--transicao);
}

.wms-item:hover .wms-item__seta {
  color: var(--barra-texto);
}

.wms-item__seta--aberta {
  transform: rotate(180deg);
}

/* Recuo por classe, e não por estilo em linha: markup não decide valor visual. */
.wms-item--nivel-2 { padding-left: calc(var(--espaco-4) + var(--barra-recuo-nivel)); }
.wms-item--nivel-3 { padding-left: calc(var(--espaco-4) + var(--barra-recuo-nivel) * 2); }
.wms-item--nivel-4 { padding-left: calc(var(--espaco-4) + var(--barra-recuo-nivel) * 3); }

/* Filho entra deslizando de cima, de onde o grupo abriu. O movimento diz de onde
   a lista saiu — sem ele, três níveis aparecem de uma vez e a pessoa perde o pai
   que acabou de tocar. Só nos níveis internos: a raiz já está na tela. */
.wms-item--nivel-2,
.wms-item--nivel-3,
.wms-item--nivel-4 {
  animation: wms-item-entra var(--transicao-media);
}

@keyframes wms-item-entra {
  from {
    opacity: 0;
    transform: translateY(calc(var(--espaco-2) * -1));
  }
}

/* Recolhida, o recuo por nível não faz sentido: só a raiz aparece como ícone, e
   a pílula vira o círculo em volta dele. */
.wms-casca--recolhida .wms-barra:not(:hover):not(:focus-within) .wms-item,
.wms-casca--recolhida .wms-barra:not(:hover):not(:focus-within) .wms-marca {
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   CONTADOR

   Cor de aviso, não de status de mercadoria: o azul da marca é de navegação e
   os tokens de status são reservados a lote e saldo.
   -------------------------------------------------------------------------- */

.wms-contador {
  flex-shrink: 0;
  min-width: var(--espaco-5);
  padding: 0 var(--espaco-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-info);
  color: var(--cor-texto-invertido);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-forte);
  font-variant-numeric: tabular-nums;
  line-height: var(--espaco-5);
  text-align: center;
}

/* Sinal de pendência abaixo: um ponto, porque o ancestral não soma os filhos. */
.wms-contador--abaixo {
  min-width: var(--espaco-2);
  width: var(--espaco-2);
  height: var(--espaco-2);
  padding: 0;
  line-height: 0;
}

/* Recolhida, o contador vira marca no canto superior direito do ícone. Ancorada
   no envelope, e não em distância fixa da borda: o item recolhido é centralizado,
   e coordenada fixa descolaria da marca assim que a largura mudasse. */
.wms-item__marca-recolhida {
  position: absolute;
  top: calc(var(--espaco-1) * -1);
  left: calc(100% - var(--espaco-2));
  min-width: var(--espaco-4);
  height: var(--espaco-4);
  padding: 0 var(--espaco-1);
  border-radius: var(--raio-pilula);
  background: var(--cor-info);
  color: var(--cor-texto-invertido);
  font-size: var(--fonte-tam-xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--espaco-4);
  text-align: center;
}

.wms-item__envelope {
  position: relative;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   CABEÇALHO
   -------------------------------------------------------------------------- */

.wms-topo {
  grid-area: topo;
  position: sticky;
  top: 0;
  z-index: var(--camada-topo);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  height: var(--topo-altura);
  padding: 0 var(--espaco-5);
  background: var(--cor-fundo-superficie);
  border-bottom: var(--borda-largura) solid var(--cor-borda);
  box-shadow: var(--sombra-1);
}

.wms-topo__espaco {
  flex: 1;
}

.wms-topo__botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alvo-min);
  min-height: var(--alvo-min);
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto-secundario);
  cursor: pointer;
  transition:
    background var(--transicao),
    color var(--transicao),
    transform var(--transicao-media);
}

.wms-topo__botao:hover {
  background: var(--cor-fundo-sutil);
  color: var(--cor-texto);
}

.wms-topo__botao:active {
  transform: scale(0.92);
}

.wms-topo__botao:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  box-shadow: var(--foco-anel);
}

.wms-topo__selo {
  position: absolute;
  top: var(--espaco-1);
  right: var(--espaco-1);
  min-width: var(--espaco-4);
  height: var(--espaco-4);
  padding: 0 var(--espaco-1);
  border-radius: var(--raio-pilula);
  background: var(--cor-info);
  color: var(--cor-texto-invertido);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-forte);
  font-variant-numeric: tabular-nums;
  line-height: var(--espaco-4);
  text-align: center;
}

.wms-topo__conta {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: 0 var(--espaco-3);
}

.wms-topo__conta-nome {
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
  line-height: var(--fonte-altura-compacta);
}

.wms-topo__conta-setor {
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
  line-height: var(--fonte-altura-compacta);
}

.wms-topo__conta-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   PAINEL SOBREPOSTO — notificações e conta
   -------------------------------------------------------------------------- */

.wms-painel {
  width: var(--painel-largura);
  max-width: 100vw;
  max-height: 70vh;
  overflow-y: auto;
}

.wms-painel__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  border-bottom: var(--borda-largura) solid var(--cor-borda);
}

.wms-painel__titulo {
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-forte);
}

/* Nome de pessoa e "departamento · cargo" não têm tamanho previsível. Sem corte,
   um nome comprido estica o cabeçalho além da largura do painel — e como o painel
   rola no vertical, o excesso vira barra de rolagem horizontal no rodapé.
   O `min-width: 0` é o que permite o corte: em contexto flex o item se recusa a
   encolher abaixo do próprio conteúdo, e a reticência nunca chega a aparecer. */
.wms-painel__cabecalho > div {
  min-width: 0;
}

.wms-painel__cabecalho .wms-painel__titulo,
.wms-painel__cabecalho .wms-topo__conta-setor {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wms-painel__dia {
  padding: var(--espaco-3) var(--espaco-4) var(--espaco-2);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-forte);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-tenue);
}

/* Cada item é um <button>: abrir a notificação é ação, e precisa responder ao
   teclado como qualquer outra. Os ajustes abaixo desfazem a aparência nativa —
   `box-sizing` explícito porque largura total com padding lateral transborda em
   elemento content-box, e o excesso vira rolagem horizontal no painel. */
.wms-notificacao {
  box-sizing: border-box;
  display: flex;
  gap: var(--espaco-3);
  width: 100%;
  padding: var(--espaco-3) var(--espaco-4);
  border: none;
  border-bottom: var(--borda-largura) solid var(--cor-borda);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--fonte-tam-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--transicao);
}

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

.wms-notificacao:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: calc(var(--foco-largura) * -1);
}

.wms-notificacao--nao-lida,
.wms-notificacao--nao-lida:hover {
  background: var(--cor-primaria-050);
}

/* Peso, não só cor: quem não distingue as duas precisa da mesma resposta. */
.wms-notificacao--nao-lida .wms-notificacao__titulo {
  font-weight: var(--fonte-peso-forte);
}

.wms-notificacao__icone {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--espaco-6);
  height: var(--espaco-6);
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-600);
}

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

.wms-notificacao__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-3);
  font-size: var(--fonte-tam-md);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-notificacao__momento {
  flex-shrink: 0;
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-normal);
  color: var(--cor-texto-tenue);
}

.wms-notificacao__texto {
  margin-top: var(--espaco-1);
  font-size: var(--fonte-tam-sm);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto-secundario);
}

.wms-painel__vazio {
  padding: var(--espaco-6) var(--espaco-4);
  text-align: center;
  color: var(--cor-texto-tenue);
  font-size: var(--fonte-tam-sm);
}

/* box-sizing explícito, como no item da barra lateral e pelo mesmo motivo: o painel
   mistura <button> e <a>, e o navegador entrega `border-box` no primeiro e
   `content-box` no segundo. Sem esta linha o <a> soma os 16px de padding de cada
   lado à largura de 100% e transborda 32px — que aparecem como barra de rolagem
   horizontal no rodapé do painel. */
.wms-painel__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: 100%;
  min-height: var(--alvo-min);
  padding: var(--espaco-2) var(--espaco-4);
  border: none;
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: var(--fonte-tam-md);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), padding-left var(--transicao-media);
}

/* Desloca ao passar o ponteiro: o item responde antes do clique, e a lista deixa
   de parecer um bloco de texto. */
.wms-painel__item:hover {
  background: var(--cor-fundo-sutil);
  padding-left: var(--espaco-5);
}

.wms-painel__item:focus-visible {
  outline: var(--foco-anel);
  outline-offset: calc(var(--foco-largura) * -1);
}

.wms-painel__separador {
  height: var(--borda-largura);
  margin: var(--espaco-2) 0;
  background: var(--cor-borda);
}

/* --------------------------------------------------------------------------
   CONTEÚDO
   -------------------------------------------------------------------------- */

.wms-conteudo {
  grid-area: conteudo;
  z-index: var(--camada-conteudo);
  padding: var(--gap-pagina);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   SOBREPOSIÇÃO — painéis do cabeçalho

   Fecha ao clicar fora. A camada invisível cobre a tela inteira e fica abaixo
   do painel, para o clique de fora chegar nela antes de chegar no conteúdo.
   -------------------------------------------------------------------------- */

.wms-ancora {
  position: relative;
  display: inline-flex;
}

.wms-cortina {
  position: fixed;
  inset: 0;
  z-index: var(--camada-painel);
  border: none;
  padding: 0;
  background: transparent;
  cursor: default;
}

/* Entra descendo do botão que o abriu. A origem no alto à direita faz o painel
   crescer de onde a pessoa clicou, e não brotar solto no meio da tela. */
.wms-painel--flutuante {
  position: absolute;
  top: calc(100% + var(--espaco-2));
  right: 0;
  z-index: calc(var(--camada-painel) + 1);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  box-shadow: var(--sombra-3);
  transform-origin: top right;
  animation: wms-painel-entra var(--transicao-longa);
}

@keyframes wms-painel-entra {
  from {
    opacity: 0;
    transform: translateY(calc(var(--espaco-2) * -1)) scale(0.96);
  }
}

/* --------------------------------------------------------------------------
   ESCOLHA DE TEMA
   -------------------------------------------------------------------------- */

/* Duas opções curtas não precisam da largura de um painel de notificação. */
.wms-painel--estreito {
  min-width: 12rem;
  padding: var(--espaco-1) 0;
}

/* Empurra a marca de selecionado para a outra ponta: o rótulo continua alinhado
   com o de cima, e o que está em vigor se lê de relance na coluna da direita. */
.wms-tema__rotulo {
  flex: 1;
}

.wms-tema__marca {
  color: var(--cor-primaria-600);
}


/* Em tela estreita o cabeçalho perde o texto da conta e mantém o ícone. A casca
   não é desenhada para celular — o campo é do coletor —, mas também não quebra. */
@media (max-width: 60rem) {
  .wms-oculta-estreito {
    display: none;
  }
}