/* --------------------------------------------------------------------------
   PORTAL — casca dividida das telas anteriores à sessão
   -------------------------------------------------------------------------- */

.wms-portal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--cor-fundo-superficie);
}

/* Coluna da marca. O azul chapado da marca, sem gradiente decorativo: contraste
   previsível é o que faz o logo e o texto lerem em monitor descalibrado. */
.wms-portal__marca {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-7);
  background: var(--cor-primaria-700);
  color: var(--cor-texto-invertido);
  overflow: hidden;
}

/* Marca-d'água do símbolo. Decorativa, e por isso muito discreta: se competir
   com o texto, atrapalha em vez de identificar.
   É elemento, e não `background`, porque o caminho do logotipo vem de parâmetro
   de sistema — no CSS ele ficava preso ao arquivo de reserva. */
.wms-portal__agua {
  position: absolute;
  right: calc(var(--espaco-7) * -1);
  bottom: calc(var(--espaco-7) * -1);
  width: var(--marca-agua);
  height: var(--marca-agua);
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.06;
  pointer-events: none;
}

.wms-portal__marca-conteudo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  max-width: 26rem;
}

/* A marca aqui é o mesmo bloco da barra de navegação — símbolo à esquerda, nome e
   ramo empilhados à direita. O que muda é a escala e a cor, porque o fundo é o azul
   da marca: o logotipo é monocromático e desenhado para branco, e o texto precisa
   inverter junto. */
.wms-marca--portal {
  padding: 0;
  min-height: 0;
  gap: var(--espaco-4);
}

.wms-marca--portal .wms-marca__simbolo {
  width: var(--marca-simbolo-portal);
  height: var(--marca-simbolo-portal);
}

/* O painel da marca é azul nos dois temas, então ali o símbolo claro precisa
   embranquecer. O escuro não: ele já vem branco, e inverter de novo achataria o
   azul do arco interno. */
.wms-marca--portal .wms-marca__simbolo--claro {
  filter: brightness(0) invert(1);
}

.wms-marca--portal .wms-marca__nome {
  font-size: var(--fonte-tam-2xl);
  color: var(--cor-texto-invertido);
}

/* Maior que na barra de navegação, porque aqui é a única coisa abaixo do nome.
   Saíram deste espaço, a pedido em 02/09/2026, o separador e as duas frases que
   o ocupavam — a declaração sobre o que o sistema é e a nota sobre o acesso ser
   nominal. Sobrou a marca, e o subtítulo dela carrega sozinho o peso que a
   declaração tinha. */
.wms-marca--portal .wms-marca__ramo {
  font-size: var(--fonte-tam-lg);
  color: var(--cor-texto-invertido);
  opacity: 0.9;
}

/* Ambiente e versão. Discretos de propósito — servem ao suporte e a quem precisa
   saber onde está, não a quem vai entrar. */
.wms-portal__rodape {
  position: absolute;
  left: var(--espaco-7);
  right: var(--espaco-7);
  bottom: var(--espaco-5);
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  color: var(--cor-texto-invertido);
  font-size: var(--fonte-tam-xs);
  opacity: 0.65;
}

.wms-portal__ambiente {
  padding: var(--espaco-1) var(--espaco-2);
  border: var(--borda-largura) solid currentColor;
  border-radius: var(--raio-pilula);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Encostada na outra ponta do rodapé: em produção ela fica sozinha na linha, e
   centralizada pareceria assinatura em vez de dado de suporte. */
.wms-portal__versao {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.wms-portal__painel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-pagina);
}

/* Entra subindo, uma vez. É a primeira tela do sistema: o cartão chegar ao lugar
   em vez de já estar lá é o que diz que a página terminou de carregar. */
.wms-portal__cartao {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
  width: 100%;
  max-width: 23rem;
  animation: wms-portal-entra var(--transicao-longa);
}

@keyframes wms-portal-entra {
  from {
    opacity: 0;
    transform: translateY(var(--espaco-3));
  }
}

.wms-portal__simbolo-compacto {
  display: none;
  width: var(--espaco-7);
  height: var(--espaco-7);
}

/* Em tela estreita a coluna da marca sai e o símbolo reaparece sobre o formulário:
   a casca não é desenhada para celular — o campo é do coletor —, mas não quebra. */
@media (max-width: 60rem) {
  .wms-portal {
    grid-template-columns: 1fr;
  }

  .wms-portal__marca {
    display: none;
  }

  .wms-portal__simbolo-compacto.wms-marca__simbolo--claro {
    display: block;
  }

  [data-tema="escuro"] .wms-portal__simbolo-compacto.wms-marca__simbolo--claro {
    display: none;
  }

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

/* --------------------------------------------------------------------------
   FORMULÁRIOS DE ACESSO
   -------------------------------------------------------------------------- */

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

.wms-acesso__titulo {
    margin: 0;
    font-size: var(--fonte-tam-2xl);
    font-weight: var(--fonte-peso-forte);
    line-height: var(--fonte-altura-compacta);
    letter-spacing: -0.01em;
    color: var(--cor-texto);
}

.wms-acesso__apoio,
.wms-acesso__texto {
    margin: 0;
    font-size: var(--fonte-tam-sm);
    line-height: var(--fonte-altura-padrao);
    color: var(--cor-texto-secundario);
}

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

.wms-acesso__rotulo {
    font-size: var(--fonte-tam-sm);
    font-weight: var(--fonte-peso-medio);
    color: var(--cor-texto);
}

/* Campo cru. Só sobrou onde a crítica precisa correr a cada tecla — nos demais o
   campo é RadzenFormField, que se veste sozinho. */
.wms-acesso__campo {
    min-height: var(--alvo-min);
    padding: var(--espaco-2) var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda-forte);
    border-radius: var(--raio-md);
    font-family: var(--fonte-base);
    font-size: var(--fonte-tam-md);
    color: var(--cor-texto);
    background-color: var(--cor-fundo-elevado);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.wms-acesso__campo:hover {
    border-color: var(--cor-primaria-300);
}

/* O anel de foco nunca é removido: no galpão navega-se muito mais por teclado que por mouse. */
.wms-acesso__campo:focus-visible,
.wms-acesso__setor:focus-within {
    outline: var(--foco-largura) solid var(--foco-cor);
    outline-offset: var(--foco-largura);
    border-color: var(--foco-cor);
}

/* Só o afastamento da ação principal do último campo. A aparência do botão é do
   Radzen, e repetir cor aqui só criaria dois lugares para trocar a marca. */
.wms-acesso__botao {
    margin-top: var(--espaco-2);
}

.wms-acesso__link {
    align-self: flex-start;
    font-size: var(--fonte-tam-sm);
    color: var(--cor-primaria-600);
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transicao), color var(--transicao);
}

.wms-acesso__link:hover {
    color: var(--cor-primaria-700);
    text-decoration-color: currentColor;
}

/* Confirmação de envio. Continua `div` com `role="status"`, e não RadzenAlert: o
   alerta da biblioteca é assertivo, e interromper a leitura para dizer "pode ser
   que tenhamos enviado" é mais atrapalho que aviso. */
.wms-acesso__aviso {
    display: flex;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
    font-size: var(--fonte-tam-sm);
    line-height: var(--fonte-altura-padrao);
    color: var(--cor-info);
    background-color: var(--cor-info-fundo);
    animation: wms-acesso-entra var(--transicao-longa);
}

/* --- Escolha de setor ------------------------------------------------------------------- */

.wms-acesso__setores {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    margin: 0;
    padding: 0;
    border: none;
}

/* Rádio, símbolo, texto e selo, nesta ordem. Cartão inteiro clicável: o alvo é a
   linha toda, e não a bolinha de 16px. */
.wms-acesso__setor {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    min-height: var(--alvo-min);
    padding: var(--espaco-3);
    border: var(--borda-largura) solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background-color: var(--cor-fundo-superficie);
    cursor: pointer;
    transition:
        border-color var(--transicao),
        background-color var(--transicao),
        box-shadow var(--transicao-media),
        transform var(--transicao-media);
}

.wms-acesso__setor:hover {
    border-color: var(--cor-primaria-300);
    box-shadow: var(--sombra-marca-1);
}

.wms-acesso__setor:active {
    transform: scale(0.99);
}

.wms-acesso__setor:has(input:checked) {
    border-color: var(--cor-primaria-600);
    background-color: var(--cor-primaria-050);
    box-shadow: var(--sombra-marca-2);
}

/* Símbolo do setor. Vira azul quando escolhido: o cartão inteiro muda de estado,
   e a cor sozinha na borda é fraca demais para quem lê de longe. */
.wms-acesso__setor-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--espaco-6);
    height: var(--espaco-6);
    border-radius: var(--raio-pilula);
    background-color: var(--cor-fundo-sutil);
    color: var(--cor-texto-tenue);
    transition: background-color var(--transicao), color var(--transicao);
}

.wms-acesso__setor:has(input:checked) .wms-acesso__setor-marca {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-600);
}

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

.wms-acesso__setor-nome {
    font-size: var(--fonte-tam-md);
    font-weight: var(--fonte-peso-medio);
    color: var(--cor-texto);
}

.wms-acesso__setor-detalhe {
    font-size: var(--fonte-tam-sm);
    color: var(--cor-texto-secundario);
}

.wms-acesso__selo {
    flex-shrink: 0;
}

.wms-acesso__criterios,
.wms-acesso__criticas {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    margin: 0;
    padding-left: var(--espaco-5);
    font-size: var(--fonte-tam-sm);
    line-height: var(--fonte-altura-padrao);
}

.wms-acesso__criterios {
    color: var(--cor-texto-secundario);
}

/* Quando a lista confere o que está sendo digitado, o marcador da lista sai: quem indica o estado
   é o ícone, e dois símbolos por linha competem pela mesma leitura. */
.wms-acesso__criterios--conferidos {
    padding-left: 0;
    list-style: none;
}

.wms-acesso__criterios--conferidos li {
    display: flex;
    gap: var(--espaco-2);
    align-items: center;
    transition: color var(--transicao);
}

.wms-acesso__criterios--conferidos .rz-icon {
    font-size: var(--fonte-tam-lg);
    transition: color var(--transicao);
}

.wms-acesso__criterio--atendido {
    color: var(--cor-sucesso);
}

/* Exigência que a tela não tem como responder fica visivelmente fora da conferência — nem cobrada,
   nem dada como cumprida. */
.wms-acesso__criterio--indefinido {
    color: var(--cor-texto-tenue);
}

@media (prefers-reduced-motion: reduce) {
    .wms-acesso__criterios--conferidos li,
    .wms-acesso__criterios--conferidos .rz-icon {
        transition: none;
    }
}

/* Crítica é resultado de ação do usuário, não estado de mercadoria — por isso a paleta de
   feedback, e nunca a de status. Entra deslizando: aparece enquanto se digita, e uma lista que
   surge de um quadro para o outro embaixo do campo passa por erro de desenho. */
.wms-acesso__criticas {
    padding: var(--espaco-3) var(--espaco-3) var(--espaco-3) var(--espaco-6);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
    color: var(--cor-erro);
    background-color: var(--cor-erro-fundo);
    animation: wms-acesso-entra var(--transicao-media);
}

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

/* --- Estados vazios de tela cheia ---------------------------------------------------------- */

.wms-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-3);
    max-width: 32rem;
    margin: 0 auto;
    padding: var(--espaco-7) var(--gap-pagina);
    text-align: center;
}

/* Ícone dentro de um disco, e não solto sobre o branco: sem a superfície embaixo
   ele lê como sobra de layout, e esta é a única imagem que a tela tem. */
.wms-vazio__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--espaco-7);
    height: var(--espaco-7);
    border-radius: var(--raio-pilula);
    background-color: var(--cor-fundo-sutil);
    box-shadow: var(--sombra-1);
    font-size: var(--fonte-tam-2xl);
    color: var(--cor-texto-tenue);
}

.wms-vazio__titulo {
    margin: 0;
    font-size: var(--fonte-tam-xl);
    font-weight: var(--fonte-peso-forte);
    color: var(--cor-texto);
}

.wms-vazio__texto {
    margin: 0;
    font-size: var(--fonte-tam-md);
    line-height: var(--fonte-altura-padrao);
    color: var(--cor-texto-secundario);
}