/*
 * Layout das telas do SGG (identidade Geoterra aplicada em 2026-10-11).
 * Cor e fonte só por var(--...) de tokens.css (tests/test_identidade_aplicada.py confere).
 * Sem estilo inline e sem recurso de terceiros (CSP: tudo do próprio domínio).
 * Visibilidade de menu é só UX: o backend decide o acesso.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cor-branco);
  color: var(--cor-marinho);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.5;
}

/* Títulos de seção: Montserrat negrito, caixa alta */
h1, h2 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--cor-azul-principal);
}
h1 { font-size: 1.35rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 0.75rem; }

a { color: var(--cor-azul-principal); }

/* Foco visível: 3:1 sobre branco e sobre marinho (variante gráfica). Sobre azul principal, o contorno é branco. */
a:focus-visible { outline: 3px solid var(--cor-grafico-azul-claro); outline-offset: 2px; }
.botao:focus { outline: 3px solid var(--cor-grafico-azul-claro); outline-offset: 2px; }
.formulario input:focus { outline: 3px solid var(--cor-grafico-azul-claro); outline-offset: 2px; }
.formulario select:focus { outline: 3px solid var(--cor-grafico-azul-claro); outline-offset: 2px; }
.cabecalho .botao-cabecalho:focus { outline: 3px solid var(--cor-branco); outline-offset: 2px; }

/* Layout: menu lateral (marinho) + área principal. No celular o menu fica acima do conteúdo. */
.app { display: block; }
.area-principal { min-width: 0; }

/* Painel do menu: cantos grandes e pequena folga da borda da janela (pedido de 2026-10-11). */
.menu-lateral {
  background: var(--cor-marinho);
  color: var(--cor-branco);
  padding: 1rem 0.75rem;
  margin: 0.5rem 0.5rem 0;
  border-radius: var(--raio-grande);
}

/* Logo (docs/marca/Logo.webp, em static/img). O logo tem azul-marinho, então vai num cartão branco
 * sobre o azul-marinho. Sem caixa tracejada: o espaço reservado saiu. */
[hidden] { display: none !important; }

.logo-espaco {
  display: inline-block;
  background: var(--cor-branco);
  border-radius: var(--raio-medio);
  padding: 0.5rem 0.75rem;
  margin: 0 0 1rem;
  line-height: 0;
}
.logo-imagem { display: block; height: 3.25rem; width: auto; max-width: 100%; }

/* Marca do menu (pedido de 2026-10-11): símbolo em cartão branco, ao lado de "SGG" em destaque e do nome do sistema
 * em tamanho menor. Retraído, só o símbolo (regras no desktop, mais abaixo). */
/* Divisor (pedido de 2026-10-11): linha fina azul claro com pouca opacidade, entre a marca e a lista de itens. */
.marca-menu {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cor-azul-claro) 35%, transparent);
}
.marca-menu .logo-espaco { flex: none; margin: 0; padding: 0.3rem; }
.marca-menu .logo-imagem { height: 2.6rem; width: 2.6rem; }
.menu-titulo { margin: 0; min-width: 0; color: var(--cor-branco); line-height: 1.2; }
.menu-sigla {
  display: block;
  color: var(--cor-branco);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.menu-subtitulo {
  display: block;
  color: var(--cor-branco);
  font-family: var(--fonte-corpo);
  font-size: 0.8rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.lista-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* Itens do menu: raio médio e margem lateral. Todos os itens (links, em implementação e Retrair) usam as MESMAS regras
 * de hover, foco e transição abaixo: uma regra só, sem uma por item. */
.item-menu {
  display: block;
  margin: 0 0.25rem;
  padding: 0.4rem 0.6rem;
  color: var(--cor-branco);
  text-decoration: none;
  border-radius: var(--raio-medio);
}
.item-ativo { background: var(--cor-azul-medio); color: var(--cor-branco); font-weight: 700; }
.menu-lateral .item-menu,
.menu-lateral .botao-retrair { transition: background-color 0.15s ease, color 0.15s ease; }
/* Hover e foco de teclado: azul médio com transparência (45%) sobre o marinho, texto branco (AA nos dois temas).
 * O item selecionado (:not(.item-ativo)) não muda. Sem sublinhado. */
.menu-lateral .item-menu:not(.item-ativo):hover,
.menu-lateral .item-menu:not(.item-ativo):focus-visible,
.menu-lateral .botao-retrair:hover,
.menu-lateral .botao-retrair:focus-visible {
  background: color-mix(in srgb, var(--cor-azul-medio) 45%, transparent);
  color: var(--cor-branco);
}
/* Contorno de foco de teclado: o mesmo para todos os itens (azul claro sobre marinho, 7,27:1). */
.menu-lateral .item-menu:focus-visible,
.menu-lateral .botao-retrair:focus-visible { outline: 3px solid var(--cor-azul-claro); outline-offset: -3px; }
.item-desabilitado { color: var(--cor-azul-claro); cursor: default; }
.item-desabilitado small { display: block; font-size: 0.75rem; }

/* Ícone de cada item do menu (pedido de 2026-10-11): SVG inline com fill="currentColor", na cor do texto do item.
 * Aparece nos dois estados; retraído, é o único conteúdo visível (regras no desktop, mais abaixo). */
.icone-menu {
  display: inline-block;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.5rem;
  vertical-align: -0.2rem;
}

/* Botão Retrair (pedido de 2026-10-11): só o ícone (chevron), no canto superior direito do painel. Oculto por padrão
 * (sem JavaScript e no celular). No desktop, menu.js tira o hidden e a regra do desktop (mais abaixo) posiciona o botão.
 * Branco sobre marinho, com contorno azul claro. Hover e foco: as regras compartilhadas com os itens do menu (acima). */
.botao-retrair {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--cor-branco);
  border: 1px solid var(--cor-azul-claro);
  border-radius: var(--raio-medio);
  cursor: pointer;
}
.icone-retrair { display: block; width: 1rem; height: 1rem; transition: transform 0.15s ease; }

/* Controle segmentado (pedido de 2026-10-11): filtro com links em pílula, sem JavaScript. O atual tem aria-current e
 * destaque azul médio com texto branco (AA). Os demais são marinho sobre branco. Tema escuro: tema-escuro.css. */
.segmentado {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1rem;
  padding: 0.25rem;
  list-style: none;
  background: var(--cor-branco);
  border: 1px solid var(--cor-grafico-cinza);
  border-radius: var(--raio-pilula);
}
.segmentado a {
  display: inline-block;
  padding: 0.35rem 1rem;
  border-radius: var(--raio-pilula);
  color: var(--cor-marinho);
  font-weight: 700;
  text-decoration: none;
}
.segmentado a:hover { text-decoration: underline; }
.segmentado a[aria-current="page"] { background: var(--cor-azul-medio); color: var(--cor-branco); }
.segmentado a:focus-visible { outline: 3px solid var(--cor-grafico-azul-claro); outline-offset: 2px; }

/* Cabeçalho (ajuste de 2026-10-12): a faixa .cabecalho-fixo fica colada no topo da área de conteúdo, com o fundo
 * da página (opaco). Dentro dela, a barra tem todos os cantos arredondados, como o restante do app. O conteúdo rola
 * por baixo da faixa e some na borda da barra: nada aparece acima, nos cantos nem através dela.
 * Quebra linha quando falta espaço: o botão Sair fica sempre dentro da tela. */
.cabecalho-fixo {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.75rem 0.5rem 0;
  background: var(--cor-branco);
}
.cabecalho {
  /* Relative: a faixa diagonal (::after) fica presa à barra e é cortada pelos cantos arredondados. */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0;
  border-radius: var(--raio-grande);
  background: var(--cor-azul-principal);
  color: var(--cor-branco);
  padding: 0.75rem 1.25rem 1rem;
}

/* Faixa inclinada discreta na base do cabeçalho: decorativa, fora do texto. Mais fina e suave, com as pontas redondas. */
.cabecalho::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 0.2rem;
  background: var(--cor-azul-claro);
  opacity: 0.8;
  border-radius: var(--raio-pilula);
  transform: skewY(-2deg);
  transform-origin: left bottom;
}

/* Conteúdo do cabeçalho fica acima da faixa, para a faixa nunca cobrir texto ou botão */
.cabecalho > * { position: relative; z-index: 1; }
.cabecalho-texto { margin: 0; min-width: 0; color: var(--cor-branco); font-weight: 700; overflow-wrap: anywhere; }
.cabecalho-sair { margin: 0; }

.area-dados {
  background: var(--cor-branco);
  color: var(--cor-marinho);
  padding: 1rem;
  min-width: 0;
  /* Ao trocar a tela sem recarregar (menu.js), a área para abaixo do cabeçalho fixo, e não embaixo dele. */
  scroll-margin-top: 6rem;
}
.larga { max-width: 64rem; }

/* Botões. Primário: azul principal com texto branco. */
.botao {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: var(--raio-medio);
  padding: 0.5rem 1.1rem;
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.botao-primario { background: var(--cor-azul-principal); color: var(--cor-branco); }
.botao-secundario { background: var(--cor-branco); color: var(--cor-azul-principal); border-color: var(--cor-azul-principal); }
.botao-cabecalho { background: transparent; color: var(--cor-branco); border-color: var(--cor-branco); border-radius: var(--raio-pilula); }

/* Botão de tema: só ícone, em círculo (pedido de 2026-10-11). No cabeçalho, contorno branco como o Sair; na tela de
 * entrar (barra-tema), cartão branco com ícone marinho. O ícone usa currentColor (sem cor fixa). */
.botao-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 0;
  background: var(--cor-branco);
  color: var(--cor-marinho);
  border: 2px solid var(--cor-grafico-cinza);
  border-radius: var(--raio-pilula);
  cursor: pointer;
}
.icone-tema { display: block; width: 1.25rem; height: 1.25rem; }
.botao-tema:focus-visible { outline: 3px solid var(--cor-grafico-azul-claro); outline-offset: 2px; }
.cabecalho .botao-tema { background: transparent; color: var(--cor-branco); border-color: var(--cor-branco); }
.cabecalho .botao-tema:focus-visible { outline: 3px solid var(--cor-branco); outline-offset: 2px; }
.barra-tema { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; }
.barra-tema .botao-tema { background: var(--cor-branco); color: var(--cor-marinho); border-color: var(--cor-grafico-cinza); }

/* Formulários */
.formulario { display: grid; gap: 0.75rem; max-width: 30rem; }
.formulario p { margin: 0 0 0.75rem; }
.formulario label { display: block; font-weight: 700; }
.formulario input, .formulario select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem;
  font: inherit;
  color: var(--cor-marinho);
  background: var(--cor-branco);
  border: 1px solid var(--cor-grafico-cinza);
  border-radius: var(--raio-medio);
}
.errorlist { color: var(--cor-marinho); font-weight: 700; list-style: none; margin: 0.25rem 0 0; padding: 0; }

/* Lista de seleção (pedido de 2026-10-11): aparência do app em vez da caixa do sistema. A seta é arquivo estático
 * (chevron.svg; no tema escuro, chevron-claro.svg), porque um SVG usado como imagem de fundo não lê variável CSS.
 * Mesma altura e foco dos campos de texto (regra de foco acima). A lista aberta continua desenhada pelo sistema. */
.formulario select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 2.625rem;
  padding-right: 2.25rem;
  background-image: url("../img/icones/chevron.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.85rem 0.85rem;
}

/* Seletor do app (pedido de 2026-10-11): substitui a lista nativa do navegador, que o sistema desenha e não aceita
 * arredondamento. static/js/seletor.js põe, em cada select, um botão (.seletor-botao) e uma lista (.seletor-lista).
 * O select nativo fica escondido no mesmo lugar (formulário e validação seguem com ele). Só cor e raio por var(--...). */
.seletor { position: relative; margin-top: 0.25rem; min-width: 0; }
.seletor select.seletor-nativo {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
/* Botão: mesma altura, borda, raio e foco dos campos de texto (regra de foco de .formulario input). */
.seletor-botao {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.625rem;
  margin: 0;
  padding: 0.5rem 2.25rem 0.5rem 0.5rem;
  font: inherit;
  color: var(--cor-marinho);
  background: var(--cor-branco);
  border: 1px solid var(--cor-grafico-cinza);
  border-radius: var(--raio-medio);
  text-align: left;
  cursor: pointer;
}
.seletor-botao:focus { outline: 3px solid var(--cor-grafico-azul-claro); outline-offset: 2px; }
.seletor-botao:disabled { cursor: default; }
.seletor-botao[aria-invalid="true"] { border-color: var(--cor-marinho); box-shadow: inset 0 0 0 1px var(--cor-marinho); }
.seletor-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Seta própria, desenhada com bordas (sem imagem): gira quando a lista está aberta. */
.seletor-seta {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--cor-marinho);
  border-bottom: 2px solid var(--cor-marinho);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.seletor-botao[aria-expanded="true"] .seletor-seta { transform: translateY(-30%) rotate(225deg); }
/* Lista: fundo branco (tema claro; o escuro usa o vidro, em tema-escuro.css), raio médio, altura máxima com rolagem. */
.seletor-lista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  color: var(--cor-marinho);
  background: var(--cor-branco);
  border: 1px solid var(--cor-grafico-cinza);
  border-radius: var(--raio-medio);
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--cor-marinho) 45%, transparent);
}
.seletor-lista[hidden] { display: none; }
.seletor-acima .seletor-lista { top: auto; bottom: 100%; margin: 0 0 0.25rem; }
.seletor-opcao {
  padding: 0.5rem 0.6rem;
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.seletor-opcao[aria-disabled="true"] { color: var(--cor-grafico-cinza); cursor: default; }
/* Selecionada: azul médio com texto branco (AA). Destaque de teclado ou ponteiro: azul claro com texto marinho,
 * como o hover do menu. A regra do destaque vem depois e tem a mesma força, então ganha da selecionada. */
.seletor-opcao[aria-selected="true"] { background: var(--cor-azul-medio); color: var(--cor-branco); font-weight: 700; }
.seletor-opcao.seletor-opcao-ativa { background: var(--cor-azul-claro); color: var(--cor-marinho); }

/* Mensagem de erro: sem vermelho (a paleta aprovada não tem vermelho); marcada por borda e negrito. */
.erro {
  color: var(--cor-marinho);
  background: var(--cor-branco);
  border-left: 4px solid var(--cor-azul-principal);
  border-radius: var(--raio-medio);
  font-weight: 700;
  padding: 0.5rem 0.75rem;
}

/* Login (repaginado em 2026-10-11): marca à esquerda (degradê marinho para azul principal, grade técnica e curvas
 * de nível), formulário à direita sobre fundo claro. No celular (375 px) vira uma coluna compacta: logo e título.
 * Só cor por var(--...). Ícones: arquivos SVG estáticos em static/img/icones, aplicados como máscara (CSP img-src 'self'). */
.pagina-entrar { background: var(--cor-branco); color: var(--cor-marinho); }

.entrar-pagina { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }

.entrar-marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem 2.25rem;
  background: linear-gradient(160deg, var(--cor-marinho) 0%, var(--cor-azul-principal) 100%);
  color: var(--cor-branco);
}

/* Fundo decorativo (aria-hidden): grade fina de planta técnica e curvas de nível. As duas camadas são maiores
 * que o painel, para o parallax (login.js grava --px e --py) nunca mostrar a borda. */
.entrar-fundo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.camada-grade, .camada-curvas {
  position: absolute;
  top: -40px;
  right: -40px;
  bottom: -40px;
  left: -40px;
  transition: transform 0.4s ease-out;
}
.camada-grade {
  background-image: url("../img/grade-tecnica.svg");
  background-size: 240px 240px;
  background-repeat: repeat;
  transform: translate3d(calc(var(--px, 0) * -0.35px), calc(var(--py, 0) * -0.35px), 0);
}
.camada-curvas {
  background-image: url("../img/marca-login.svg");
  background-size: 1200px 1200px;
  background-repeat: repeat;
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
  animation: deslizar-faixas 90s linear infinite;
}

/* Faixa inclinada na base, igual à do cabeçalho do painel. */
.entrar-marca::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 0.3rem;
  background: var(--cor-azul-claro);
  transform: skewY(-2deg);
  transform-origin: left bottom;
}

.entrar-conteudo {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
/* O cartão do logo tem o tamanho do logo, alinhado à esquerda (não estica pela coluna). */
.entrar-conteudo .logo-espaco { align-self: flex-start; margin: 0 0 1.25rem; }

.entrar-marca-titulo {
  margin: 0 0 0.5rem;
  color: var(--cor-branco);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.entrar-marca-apoio { display: none; margin: 0; color: var(--cor-branco); font-size: 1rem; }

/* Lista de funções: no celular fica escondida (marca compacta). Cada item entra em sequência (só CSS). */
.capacidades { display: none; list-style: none; margin: 2rem 0 0; padding: 0; color: var(--cor-branco); }
.capacidades li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 0.9rem;
  color: var(--cor-branco);
  font-weight: 700;
  animation: entrada-item 0.6s ease-out both;
}
.capacidades li:nth-child(1) { animation-delay: 0.15s; }
.capacidades li:nth-child(2) { animation-delay: 0.3s; }
.capacidades li:nth-child(3) { animation-delay: 0.45s; }

.capacidade-marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--raio-pequeno);
  background: var(--cor-marinho);
  color: var(--cor-azul-claro);
}
.capacidade-marca .icone { width: 1.4rem; height: 1.4rem; }

.entrar-marca-rodape {
  position: relative;
  z-index: 1;
  margin: 1.25rem 0 0;
  color: var(--cor-branco);
  font-size: 0.85rem;
}

/* Painel do formulário */
.entrar-formulario {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1.75rem 1rem 1.5rem;
  background: var(--cor-branco);
  color: var(--cor-marinho);
}
.cartao { width: 100%; max-width: 24rem; background: var(--cor-branco); color: var(--cor-marinho); border-radius: var(--raio-medio); }
.cartao h2 { margin: 0 0 0.25rem; }
.cartao-subtitulo { margin: 0 0 1.25rem; color: var(--cor-marinho); }
.cartao .erro { margin: 0 0 1rem; }

/* Ícones: SVG estático como máscara, na cor do texto (currentColor). Decorativos (aria-hidden no HTML). */
.icone, .formulario .campo::before {
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.icone { display: inline-block; flex: none; width: 1.1em; height: 1.1em; background-color: currentColor; }
.icone-horas { mask-image: url("../img/icones/horas.svg"); -webkit-mask-image: url("../img/icones/horas.svg"); }
.icone-estrutura { mask-image: url("../img/icones/estrutura.svg"); -webkit-mask-image: url("../img/icones/estrutura.svg"); }
.icone-auditoria { mask-image: url("../img/icones/auditoria.svg"); -webkit-mask-image: url("../img/icones/auditoria.svg"); }
.icone-olho { mask-image: url("../img/icones/olho.svg"); -webkit-mask-image: url("../img/icones/olho.svg"); }
.botao-senha.ativo .icone-olho { mask-image: url("../img/icones/olho-fechado.svg"); -webkit-mask-image: url("../img/icones/olho-fechado.svg"); }
.icone-seta { mask-image: url("../img/icones/seta.svg"); -webkit-mask-image: url("../img/icones/seta.svg"); }
.icone-cadeado { mask-image: url("../img/icones/cadeado.svg"); -webkit-mask-image: url("../img/icones/cadeado.svg"); }

/* Campo com rótulo flutuante (CSS; login.js marca .com-valor) e ícone à esquerda. Sem JS, o :placeholder-shown já cobre. */
.formulario .campo { position: relative; background: var(--cor-branco); }
.formulario .campo::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0.85rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -0.6rem;
  background-color: var(--cor-grafico-cinza);
  pointer-events: none;
}
.formulario .campo:focus-within::before { background-color: var(--cor-azul-principal); }
.formulario .campo-usuario::before { mask-image: url("../img/icones/usuario.svg"); -webkit-mask-image: url("../img/icones/usuario.svg"); }
.formulario .campo-senha::before { mask-image: url("../img/icones/cadeado.svg"); -webkit-mask-image: url("../img/icones/cadeado.svg"); }

.formulario .campo input {
  margin-top: 0;
  height: 3.1rem;
  padding: 1.15rem 0.75rem 0.4rem 2.75rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Brilho de foco: contorno azul claro (3,71:1 sobre branco) e halo suave. O contorno é o que vale para o contraste. */
.formulario .campo input:focus {
  outline: 2px solid var(--cor-grafico-azul-claro);
  outline-offset: 0;
  border-color: var(--cor-grafico-azul-claro);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-grafico-azul-claro) 28%, transparent);
}
/* Campo vazio no envio (login.js): borda marinho mais grossa. Sem mensagem; só o foco e o estado. */
.formulario .campo input[aria-invalid="true"] {
  border-color: var(--cor-marinho);
  box-shadow: inset 0 0 0 1px var(--cor-marinho);
}

.formulario .campo .rotulo-campo {
  position: absolute;
  top: 50%;
  left: 2.75rem;
  transform: translateY(-50%);
  margin: 0;
  font-weight: 400;
  color: var(--cor-marinho);
  pointer-events: none;
  transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease;
}
.formulario .campo input:focus + .rotulo-campo,
.formulario .campo input:not(:placeholder-shown) + .rotulo-campo,
.formulario .campo.com-valor .rotulo-campo {
  top: 0.3rem;
  transform: none;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Linha da senha: aviso de Caps Lock à esquerda, botão Mostrar senha (ícone e texto) à direita. */
.linha-senha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; }
.formulario .aviso-caps {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.35rem 0.6rem;
  background: var(--cor-branco);
  color: var(--cor-marinho);
  border-left: 4px solid var(--cor-azul-principal);
  font-size: 0.9rem;
  font-weight: 700;
}
.formulario .aviso-caps:empty { display: none; }
.botao-senha {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0.5rem 0.25rem;
  background: transparent;
  border: 0;
  border-radius: var(--raio-pequeno);
  color: var(--cor-azul-principal);
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.botao-senha:focus-visible { outline: 3px solid var(--cor-grafico-azul-claro); outline-offset: 2px; }

.botao-entrar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.7rem 1rem;
  font-size: 1rem;
}
.botao-entrar:hover:not(:disabled) { background: var(--cor-azul-medio); }
.botao-entrar:disabled { cursor: progress; }
.botao-entrar .icone-seta { transition: transform 0.15s ease; }
.botao-entrar:hover:not(:disabled) .icone-seta { transform: translateX(3px); }
.botao-entrar.carregando .icone-seta { display: none; }
.botao-entrar.carregando::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

/* Abaixo do formulário: ajuda de acesso, selo (só com HTTPS, decidido no servidor) e rodapé. */
.ajuda-acesso {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-cinza);
  color: var(--cor-marinho);
  font-size: 0.9rem;
}
.selo-seguro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  color: var(--cor-marinho);
  font-size: 0.85rem;
  font-weight: 700;
}
.selo-seguro .icone { color: var(--cor-azul-principal); }
.rodape-entrar { margin-top: 2rem; color: var(--cor-marinho); font-size: 0.85rem; }

/* "Produzido por" (só no login): discreto, abaixo do cartão. Sublinha com mouse ou foco de teclado. */
.produzido-por { margin: 0.75rem 0 0; color: var(--cor-marinho); font-size: 0.75rem; text-align: center; }
.produzido-por a { color: var(--cor-marinho); font-weight: 700; text-decoration: none; }
.produzido-por a:hover,
.produzido-por a:focus-visible { text-decoration: underline; }

/* Erro de login: tremor curto (uma vez, ao aparecer). A mensagem é a mesma para todos os motivos. */
.erro { animation: tremor 0.45s ease-in-out; }

@keyframes tremor {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes deslizar-faixas {
  from { background-position: 0 0; }
  to { background-position: 1200px 0; }
}
@keyframes entrada-item {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes girar {
  to { transform: rotate(360deg); }
}

/* Movimento só para quem aceita. Sem animação, a tela continua completa. */
@media (prefers-reduced-motion: reduce) {
  .erro, .camada-curvas, .capacidades li, .botao-entrar.carregando::after { animation: none; }
  .camada-curvas, .camada-grade { transform: none; transition: none; }
  .formulario .campo input, .formulario .campo .rotulo-campo, .botao-entrar .icone-seta { transition: none; }
}

@media (min-width: 48rem) {
  .entrar-pagina { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .entrar-marca { min-height: 100vh; padding: 3rem 3rem 3.5rem; }
  .entrar-marca-titulo { font-size: 2rem; }
  .entrar-marca-apoio { display: block; max-width: 26rem; font-size: 1.15rem; }
  .capacidades { display: flex; flex-direction: column; }
  .entrar-marca-rodape { margin-top: 2rem; }
  .entrar-formulario { min-height: 100vh; justify-content: center; padding: 3rem; }
}

/* Tabelas: no celular cada linha vira um bloco, com o rótulo da coluna (data-rotulo). */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: var(--cor-branco);
  color: var(--cor-marinho);
}
th, td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--cor-cinza);
  vertical-align: top;
}
tr.inativo td { font-style: italic; }
td.nivel-1 { padding-left: 1.75rem; }
td.nivel-2 { padding-left: 3.25rem; }
td.nivel-3 { padding-left: 4.75rem; }
td.nivel-4 { padding-left: 6.25rem; }
td.nivel-5 { padding-left: 7.75rem; }
table a { margin-right: 0.75rem; }
form.em-linha { display: inline; }
form.em-linha .botao { margin-left: 0.25rem; padding: 0.2rem 0.6rem; }

/* Contêiner das tabelas: borda cinza com cantos médios. Ajuste de 2026-10-12: quando a tabela é mais larga que o
 * bloco, a rolagem horizontal acontece dentro do próprio bloco, nunca na página. */
.tabela-conteiner {
  margin-top: 1rem;
  border: 1px solid var(--cor-grafico-cinza);
  border-radius: var(--raio-medio);
  overflow-x: auto;
}
.tabela-conteiner table { margin-top: 0; }

/* Tabela de usuários (pedido de 2026-10-11): 100% da área, fonte 0,9 rem, padding 0,35 rem. Nome e E-mail quebram
 * linha; Login, Papel, Situação e Senha não quebram no meio da palavra. Cabe em 1165 px sem rolagem da página. */
.tabela-compacta { font-size: 0.9rem; }
.tabela-compacta th,
.tabela-compacta td { padding: 0.35rem; }
.tabela-compacta td.pode-quebrar { overflow-wrap: anywhere; }

/* Desktop (768 px ou mais): o menu fica fixo na altura da janela (sticky) e só a área de conteúdo rola.
 * Grade de duas colunas: menu com largura fixa, conteúdo elástico (minmax(0, 1fr)). Se o menu for maior
 * que a janela, rola por dentro. No celular o menu continua em cima do conteúdo, sem fixação. */
@media (min-width: 48rem) {
  .app { display: flex; align-items: stretch; }
  /* A grade só vale com menu (classe com-menu, dada pelo base.html no mesmo if do menu). Sem menu, o login e os convites ficam como antes. */
  /* Ajuste de 2026-10-12: a coluna do conteúdo ocupa a altura inteira da janela (qualquer tamanho), e o rodapé fica
   * sempre no fim dela. O menu continua fixo (sticky) dentro da própria coluna. */
  .app.com-menu { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: stretch; min-height: 100vh; }
  .app.com-menu > .menu-lateral { align-self: start; }
  /* Menu com folga da janela (0,75 rem em cima, embaixo e à esquerda) e cantos grandes: fixo, a altura da janela menos a folga. */
  .app.com-menu > .menu-lateral {
    position: sticky;
    top: 0.75rem;
    height: calc(100vh - 1.5rem);
    margin: 0.75rem 0 0.75rem 0.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .lista-menu { flex-direction: column; flex-wrap: nowrap; }
  .area-principal { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 100%; }
  .area-principal main { flex: 1 1 auto; }
  .area-dados { padding: 1.5rem; }
  /* Tabela com colunas largas: não espreme o texto (ex.: o nome de usuário quebrando no meio). Se o bloco for
   * mais estreito, rola dentro dele (regra .tabela-conteiner), e a página não rola. */
  .tabela-conteiner table { min-width: 40rem; }

  /* Botão Retrair: no desktop, com JavaScript, no canto superior direito do painel. No celular fica oculto (regra base).
   * O espaço à direita do nome da marca evita que o botão cubra o texto (menu expandido). */
  .app.com-menu .botao-retrair { display: flex; position: absolute; top: 0.6rem; right: 0.6rem; }
  .app.com-menu .marca-menu { padding-right: 2.25rem; }

  /* Menu retraído (classe menu-retraido, dada por menu.js): faixa estreita com só o ícone de cada item. O texto do item
   * some com font-size 0 (continua no nome acessível). A coluna do menu encolhe e a área de conteúdo ocupa o resto.
   * Só no desktop: no celular a classe não tem efeito. */
  .app.com-menu.menu-retraido { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .app.com-menu.menu-retraido > .menu-lateral { padding: 1rem 0.4rem; }
  /* Retraído: só o símbolo da marca (cartão e logo menores, para caber na faixa); o texto SGG e o nome somem. */
  .app.com-menu.menu-retraido .marca-menu { justify-content: center; margin: 0 0 1rem; padding-right: 0; }
  .app.com-menu.menu-retraido .marca-menu .logo-espaco { padding: 0.2rem; }
  .app.com-menu.menu-retraido .marca-menu .logo-imagem { height: 2rem; width: 2rem; }
  .app.com-menu.menu-retraido .menu-titulo { display: none; }
  /* O botão sai do canto e fica centrado acima da marca, com o chevron virado para a direita (expandir). */
  .app.com-menu.menu-retraido .botao-retrair { position: static; margin: 0 auto 0.75rem; }
  .app.com-menu.menu-retraido .icone-retrair { transform: rotate(180deg); }
  .app.com-menu.menu-retraido .item-menu { font-size: 0; padding: 0.5rem 0.2rem; text-align: center; }
  .app.com-menu.menu-retraido .icone-menu { display: block; width: 1.35rem; height: 1.35rem; margin: 0 auto; }
  .app.com-menu.menu-retraido .item-desabilitado small { display: none; }

  /* Painel ao passar o mouse (ou focar) um item com o menu retraído (pedido de 2026-10-12): mostra o nome do item e,
   * se houver, os submenus abaixo, para escolher. O menu deixa de cortar o que sai dele (overflow visible); o painel
   * fica sobre a área de conteúdo. */
  .app.com-menu.menu-retraido > .menu-lateral { overflow: visible; }
  .app.com-menu.menu-retraido .lista-menu > li { position: relative; }
  .app.com-menu.menu-retraido .lista-menu > li:hover > .menu-flutuante,
  .app.com-menu.menu-retraido .lista-menu > li:focus-within > .menu-flutuante { display: block; }
}

/* Painel flutuante: oculto por padrão (menu expandido e celular). Cores só por token; o escuro está em tema-escuro.css. */
.menu-flutuante {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(100% + 0.5rem);
  transform: translateY(-50%);
  z-index: 30;
  min-width: 11rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--raio-medio);
  border: 1px solid var(--cor-grafico-cinza);
  background: var(--cor-branco);
  color: var(--cor-marinho);
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--cor-marinho) 45%, transparent);
  font-size: 1rem;
  font-style: normal;
  white-space: nowrap;
}
.menu-flutuante-titulo { margin: 0; font-weight: 700; }
.menu-flutuante ul { list-style: none; margin: 0.4rem 0 0; padding: 0; border-top: 1px solid var(--cor-grafico-cinza); }
.menu-flutuante li a { display: block; padding: 0.35rem 0; color: inherit; }
.menu-flutuante li a:hover { text-decoration: underline; }
.menu-flutuante small { display: block; font-weight: 400; }

@media (max-width: 47.99rem) {
  .item-menu { padding: 0.4rem 0.5rem; }
  .area-dados { padding: 1rem; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { position: absolute; left: -9999px; }
  tr { border-bottom: 2px solid var(--cor-cinza); padding: 0.5rem 0; }
  td { border: 0; padding: 0.2rem 0.25rem; }
  td[class^="nivel-"] { padding-left: 0.25rem; }
  td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* ------------------------------------------------------------- dashboard do admin (passo 4, RN-49) */
/* Cor e fonte só por var(--...). Contraste AA e 3:1 conferidos em tests/test_identidade_aplicada.py. */

/* Primeira coluna de tabela é cabeçalho de linha (th scope="row"): mesmo texto marinho sobre branco. */
th[scope="row"] {
  color: var(--cor-marinho);
  background-color: var(--cor-branco);
  font-weight: 700;
}

.texto-apoio { color: var(--cor-marinho); margin: 0 0 0.5rem; }

/* Indicadores: cartões de borda cinza escura sobre branco. Valor em Roboto, rótulo em Montserrat caixa alta. */
.indicadores { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 0.5rem 0 0; }
.indicador {
  background: var(--cor-branco);
  color: var(--cor-marinho);
  border: 1px solid var(--cor-grafico-cinza);
  border-radius: var(--raio-medio);
  padding: 0.75rem 1rem;
  margin: 0;
}
.indicador-rotulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-azul-principal);
}
.indicador-valor {
  margin: 0.25rem 0 0;
  font-family: var(--fonte-corpo);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cor-marinho);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.indicador-nota { margin: 0; font-size: 0.85rem; color: var(--cor-marinho); }

/* Gráfico SVG: a cor vem de classe (fill e stroke em CSS, nunca inline). Largura pelo bloco, altura pela proporção. */
.grafico-bloco { margin: 0.5rem 0 1rem; }
.grafico { display: block; width: 100%; max-width: 40rem; height: auto; }
/* Área, linha e pontos (2026-10-11: o gráfico deixou as barras). Área em degradê azul principal que some para baixo. */
.grafico-area { fill: url(#grafico-degrade); }
.grafico-degrade-topo { stop-color: var(--cor-azul-principal); stop-opacity: 0.35; }
.grafico-degrade-base { stop-color: var(--cor-azul-principal); stop-opacity: 0; }
.grafico-linha { fill: none; stroke: var(--cor-azul-principal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.grafico-ponto { fill: var(--cor-branco); stroke: var(--cor-azul-principal); stroke-width: 2.5; }
.grafico-ponto-atual { fill: var(--cor-azul-principal); stroke: var(--cor-branco); }
.grafico-base { stroke: var(--cor-marinho); stroke-width: 2; }
.grafico-valor {
  fill: var(--cor-marinho);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}
.grafico-mes {
  fill: var(--cor-marinho);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  text-anchor: middle;
}

/* Legenda com texto (nenhum dado só por cor). A amostra é decorativa (aria-hidden). */
.legenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  color: var(--cor-marinho);
}
.legenda-amostra {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.4rem;
  border: 1px solid var(--cor-marinho);
  vertical-align: -0.1rem;
}
.legenda-amostra-linha { height: 0.3rem; border: 0; background: var(--cor-azul-principal); vertical-align: 0.3rem; }
.legenda-amostra-atual { border-radius: 50%; background: var(--cor-azul-principal); }

/* Cartão de seção do painel (tabela ou gráfico). Claro: branco com contorno cinza. O tema escuro está em tema-escuro.css. */
.cartao-painel {
  min-width: 0;
  margin: 1.5rem 0 0;
  padding: 1rem;
  background: var(--cor-branco);
  color: var(--cor-marinho);
  border: 1px solid var(--cor-grafico-cinza);
  border-radius: var(--raio-medio);
}
.cartao-painel h2 { margin: 0 0 0.5rem; }
.cartao-painel table { margin-top: 0.5rem; }

/* Cabeçalho: nome, botão de tema e Sair lado a lado (quebram no celular). */
.cabecalho-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cabecalho-tema { margin: 0; }

/* Marca textual de lançamento inativo (nº 53): texto em negrito sobre cinza, além do itálico da linha. */
.marca-inativo {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: var(--raio-pilula);
  background: var(--cor-cinza);
  color: var(--cor-marinho);
  font-weight: 700;
  font-size: 0.85rem;
}

@media (min-width: 48rem) {
  .indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Celular (375 px): sem rolagem horizontal. Células quebram palavra longa; cabeçalho de linha vira bloco. */
@media (max-width: 47.99rem) {
  table td, table th { overflow-wrap: anywhere; }
  th[scope="row"] { display: block; width: 100%; border: 0; padding: 0.2rem 0.25rem; }
}

/* Página do convite de senha (e-mail, etapa 1): centrada, sem menu. Só layout; as cores vêm do cartão. */
.pagina-convite { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem 1rem; }
.convite-cartao { max-width: 28rem; }
.pagina-convite .rodape-entrar { margin-top: 1.5rem; }

/* Auditoria (menu Auditoria, 2026-10-11): filtros em linha (usa o estilo de .formulario, sem a largura de 30 rem) e
 * paginação. Só layout; cor e fonte vêm de .formulario e dos tokens. */
.filtros-auditoria { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; max-width: none; margin: 0 0 1rem; }
.filtros-auditoria .campo-filtro { display: grid; min-width: 11rem; flex: 1 1 11rem; }
.filtros-auditoria .campo-filtro label { margin: 0; }
.filtros-auditoria .acoes-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding-bottom: 0.25rem; }
.paginacao { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* Rodapé com a versão do sistema (pedido de 2026-10-12): discreto, no fim da área de conteúdo, com cor de texto por token. */
.rodape-versao { padding: 0.5rem 1.5rem 1rem; font-size: 0.8rem; color: var(--cor-marinho); text-align: right; }