/* Site da equipe BRV360 Licenças: CSS próprio, sem framework.
   O visual é o mesmo do painel da brv360-cloud (src/Brv360.Api/wwwroot/painel.css), por
   pedido do Rodrigo (17/10/2026): tema escuro, menu lateral com ícones, logo e vermelho
   da BRV360, fonte IBM Plex. Divergência com o painel: o fundo é azul-marinho, e não
   cinza, por pedido do Rodrigo (18/10/2026). Os neutros (fundo, papel, trilho, linhas,
   tinta) e os fundos tingidos foram puxados para o azul; o vermelho, o âmbar, o verde e
   o azul de foco continuam os de lá, valor por valor. */

/* =============================================================================
   AS CORES MORAM AQUI, E SÓ AQUI.

   Nenhuma regra abaixo escreve cor literal, e a TemaDoSiteTests reprova quem escrever.
   Contraste é requisito: todo par de texto passa de 7:1 (WCAG AAA) e os elementos não
   textuais passam de 3:1, com teste que calcula as razões.

   O vermelho puro da logo (--acento) só aparece em INDICADOR: a barra do item atual, o
   sublinhado do link, a borda do botão principal. Nunca como cor de texto, porque sobre
   o azul-marinho ele fica perto de 4:1. Texto que precisa do acento usa --acento-texto, e o botão
   principal usa --acento-forte com texto branco.
   ============================================================================= */
:root {
  color-scheme: dark;              /* campos, barras de rolagem e autofill do navegador */

  --fundo: #152242;                /* a página: azul-marinho, não preto */
  --papel: #1D2D52;                /* cartões, tabelas, formulários */
  --trilho: #0E1833;               /* menu: um degrau abaixo da página, para emoldurar */
  --trilho-2: #1A2949;             /* item do menu sob o ponteiro; bloco do nome */
  --placa: #F3F4F6;                /* sob a logo do cliente, como na placa dos óculos */
  --linha: #7C8DB5;                /* borda estrutural: campo, cartão */
  --linha-fraca: #34466E;          /* separador entre linhas de tabela; decorativo */
  --tinta: #EEF2F8;                /* texto */
  --tinta-fraca: #CFD7E6;          /* texto secundário */

  --acento: #EE3739;               /* vermelho da logo: só indicador, nunca texto */
  --acento-forte: #A82326;         /* fundo do botão principal */
  --acento-tinta: #FFFFFF;         /* texto sobre --acento-forte */
  --acento-texto: #FFB8BA;         /* o acento quando precisa ser lido */
  --acento-suave: #45243C;         /* fundo do item atual do menu */
  --foco: #7DB2FF;                 /* contorno de foco: azul, para não se confundir com o acento */

  --alerta: #FFB8BA;               /* destrutivo e erro */
  --alerta-fundo: #4F2238;
  --aviso: #F9C98A;                /* atenção: precisa de olho, não é erro */
  --aviso-fundo: #45361F;
  --ok: #9EE3B0;                   /* deu certo: borda da caixa de sucesso */

  --menu: 15rem;                   /* menu lateral, de 1200px para cima */
  --trilho-estreito: 5.5rem;       /* trilho de ícones, de 720px a 1199px */
  --abas: 4.25rem;                 /* barra de abas, abaixo de 720px */
  --faixa: 2.75rem;                /* altura da faixa do servidor de teste */
  --toque: 2.75rem;                /* alvo de toque mínimo: 44px */
  --raio: 8px;
}

/* A fonte é servida pelo próprio site, e não por um CDN: a tela de login não avisa
   ninguém de fora de que alguém a abriu. IBM Plex, licença OFL (fontes/OFL.txt). Só o
   subconjunto latino, que cobre o português inteiro. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("/fontes/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url("/fontes/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
}

/* Foco visível: no escuro o contorno padrão do navegador some. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* =============================================================================
   O ESQUELETO: lateral (logo, menu, sair) + conteúdo.

   Três formas, só com @media, como no painel da brv360-cloud:
   - 1200px ou mais: menu lateral com ícone e rótulo;
   - 720px a 1199px: trilho de ícones com o rótulo embaixo (tablet);
   - abaixo de 720px: barra no topo com a logo e Sair, e o menu vira a barra de
     abas presa ao pé da tela (celular).
   O markup é um só para as três.
   ============================================================================= */
.quadro { display: flex; align-items: flex-start; min-height: 100vh; }

#lateral {
  position: sticky;
  top: 0;
  flex: none;
  width: var(--menu);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.25rem 0.875rem;
  background: var(--trilho);
  overflow-y: auto;
}

#topo { display: flex; flex-direction: column; gap: 1.1rem; }

/* A logo vai direto sobre o menu escuro, sem placa: o PNG da BRV360 é transparente e
   foi desenhado para fundo escuro. */
.logo img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
#topo .logo { display: block; height: 2.75rem; padding: 0.125rem 0.25rem; }

#topo .marca {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--trilho-2);
}

#topo .marca strong { font-size: 0.9rem; font-weight: 600; }
#topo .marca span { font-size: 0.78rem; color: var(--tinta-fraca); }

#menu { display: flex; flex-direction: column; gap: 2px; }

#menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--toque);
  padding: 0 0.75rem;
  border-radius: var(--raio);
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
}

#menu svg { flex: none; width: 1.25rem; height: 1.25rem; }
#menu a:hover { background: var(--trilho-2); }

/* Item atual: fundo do acento suave e a barra vermelha da logo à esquerda. A barra é o
   sinal que não depende de cor, e o `aria-current` diz o mesmo a quem não vê a tela. */
#menu a.atual { background: var(--acento-suave); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }

#conta { margin: auto 0 0; padding-top: 0.875rem; border-top: 1px solid var(--linha-fraca); }
#conta .quem { display: block; margin: 0 0 0.6rem; padding: 0 0.25rem; font-size: 0.78rem; color: var(--tinta-fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#conta .botao { width: 100%; }

main { flex: 1 1 auto; min-width: 0; padding: 1.75rem 2.5rem 4rem; }
main h1 { margin: 0 0 1rem; font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
main h2 { margin: 2rem 0 0.75rem; font-size: 1.1rem; font-weight: 600; }
main h3 { margin: 1.5rem 0 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-fraca); }

/* Tablet: trilho de ícones. O bloco do nome sai do trilho, porque não cabe. */
@media (max-width: 1199.98px) {
  #lateral { width: var(--trilho-estreito); padding: 1rem 0.5rem; align-items: center; }
  #topo .logo { height: 1.75rem; padding: 0; }
  #topo .marca { display: none; }
  #menu { width: 100%; }
  #menu a {
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-height: 3.75rem;
    padding: 0.375rem 0.25rem;
    font-size: 0.72rem;
    line-height: 1.2;
    text-align: center;
  }
  #conta { width: 100%; }
  #conta .quem { display: none; }
  #conta .botao { padding-inline: 0.25rem; font-size: 0.8rem; }
  main { padding: 1.5rem 1.75rem 4rem; }
}

/* Celular: barra no topo e abas no pé. O `display: contents` desmonta a lateral e deixa
   os três pedaços dela irem cada um para o seu lugar. */
@media (max-width: 719.98px) {
  .quadro { display: block; position: relative; }
  #lateral { display: contents; }

  #topo {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.5rem 7rem 0.5rem 1rem;   /* a direita fica para o Sair */
    background: var(--trilho);
  }
  #topo .logo { height: 2rem; flex: 0 1 auto; min-width: 0; max-width: 9rem; }
  #topo .marca { display: flex; min-width: 0; padding: 0; background: none; }
  #topo .marca strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #topo .marca span { display: none; }

  #conta { position: absolute; top: 0.5rem; right: 1rem; width: auto; margin: 0; padding: 0; border: 0; }
  #conta .botao { padding-inline: 1rem; font-size: 0.9rem; }

  #menu {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    min-height: var(--abas);
    padding: 0.375rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom));
    background: var(--trilho);
    border-top: 1px solid var(--linha-fraca);
  }
  #menu a { min-height: 3.25rem; font-size: 0.7rem; }
  #menu a.atual { box-shadow: inset 0 3px 0 var(--acento); }

  main { padding: 1.25rem 1rem calc(var(--abas) + 2rem); }
  main h1 { font-size: 1.5rem; }

  /* Tabela larga rola dentro dela mesma, e não a página inteira de lado. */
  table { display: block; overflow-x: auto; }
  th, td { white-space: nowrap; }
}

/* A faixa do servidor de teste: âmbar de atenção, de ponta a ponta, presa ao topo em
   toda largura. Quem está aqui não está mexendo em cliente de verdade, e precisa saber. */
.faixa-de-teste {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: var(--faixa);
  display: flex;
  align-items: center;
  padding: 0.35rem 1.25rem;
  background: var(--aviso);
  color: var(--fundo);
  font-weight: 600;
}

/* Com a faixa, a lateral começa abaixo dela. */
.faixa-de-teste ~ .quadro { min-height: calc(100vh - var(--faixa)); }
.faixa-de-teste ~ .quadro #lateral { top: var(--faixa); height: calc(100vh - var(--faixa)); }

@media (max-width: 719.98px) {
  .faixa-de-teste { padding-inline: 1rem; font-size: 0.85rem; line-height: 1.3; }
}

/* Telas sem menu: entrar, esqueci a senha, redefinir e a troca obrigatória de senha. */
main.avulsa { max-width: 34rem; margin-inline: auto; padding: 3rem 1rem 4rem; }
main.avulsa .logo { display: inline-block; height: 3rem; max-width: 100%; margin: 0 0 2rem; }
main.avulsa form.sair { margin-top: 2rem; }

/* =============================================================================
   CONTEÚDO
   ============================================================================= */

/* Link: texto na cor do texto, com o sublinhado vermelho da logo. O sublinhado é o que
   diz "isto é link", por posição, não só por cor. */
a { color: var(--tinta); text-decoration-color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-texto); }

.discreto { color: var(--tinta-fraca); font-size: 0.9rem; }
code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em; font-weight: 600;
  padding: 0.1rem 0.35rem; border-radius: 4px; background: var(--trilho-2);
}
main h1 code { font-size: 0.6em; vertical-align: middle; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; background: var(--papel); border: 1px solid var(--linha-fraca); border-radius: var(--raio); font-size: 0.94rem; }
th, td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--linha-fraca); vertical-align: top; }
th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-fraca); }
tr:last-child td { border-bottom: 0; }
td form { margin: 0; }
td :is(button, .botao) { min-height: 2.25rem; padding: 0 0.8rem; font-size: 0.88rem; }

/* Linha revogada: recuo de cor, e só. A coluna Situação continua dizendo "Revogado". */
tr.apagado td { color: var(--tinta-fraca); }

/* Botão principal: fundo vermelho escuro da marca com texto branco, e a borda no
   vermelho puro da logo. O vermelho puro como fundo deixaria o texto branco em 3,9:1. */
button, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--toque); padding: 0 1.1rem; border: 1px solid var(--acento); border-radius: var(--raio);
  background: var(--acento-forte); color: var(--acento-tinta); text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 600; white-space: nowrap;
}
.botao.secundario { background: var(--papel); color: var(--tinta); border-color: var(--linha); }
button.perigo { background: var(--papel); color: var(--alerta); border-color: var(--alerta); }
button.link {
  min-height: 0; padding: 0; border: 0; background: none; color: var(--tinta); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px;
}
p > .botao + .botao { margin-left: 0.4rem; }
p > .botao { margin-block: 0.2rem; }

/* Formulário: um cartão, um campo embaixo do outro. */
form.formulario {
  display: flex; flex-direction: column; gap: 1rem; max-width: 36rem;
  background: var(--papel); border: 1px solid var(--linha-fraca); border-radius: 12px; padding: 1.25rem 1.375rem;
}
form.formulario.estreito { max-width: 26rem; }
form.formulario > button { align-self: flex-start; }
.formulario label { display: block; font-weight: 600; font-size: 0.94rem; }
.formulario small, fieldset small { display: block; margin-top: 0.3rem; color: var(--tinta-fraca); font-weight: 400; font-size: 0.85rem; }
fieldset { margin: 0; padding: 0.75rem 1rem 0.9rem; border: 1px solid var(--linha-fraca); border-radius: var(--raio); display: flex; flex-direction: column; gap: 0.5rem; }
legend { padding: 0 0.25rem; font-weight: 600; font-size: 0.94rem; }

input, select, textarea {
  display: block; width: 100%; min-height: 3rem; margin-top: 0.375rem; padding: 0 0.875rem;
  font: 400 1rem/1.4 "IBM Plex Sans", system-ui, sans-serif;
  background: var(--fundo); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio);
}
textarea { padding: 0.75rem 0.875rem; }
input::placeholder { color: var(--tinta-fraca); }
input[type="file"] { padding: 0.55rem 0.875rem; }
input[type="file"]::file-selector-button {
  margin-right: 0.75rem; padding: 0.3rem 0.8rem; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); border-radius: 6px;
}

/* Rádio e caixa de marcar ficam na linha do texto. A regra de `input` acima é de campo
   de texto, e sem esta exceção ela empurra a bolinha para uma linha própria. */
label.caixa { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 400; }
input[type="checkbox"], input[type="radio"] {
  display: inline-block; width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; padding: 0; flex: none;
  accent-color: var(--acento-forte);
}

/* Campo do código: grande, monoespaçado. */
input.codigo {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600;
  font-size: 1.4rem; letter-spacing: 0.2em; text-transform: uppercase;
}

/* Busca: o campo e os botões numa linha só no largo. */
form.busca { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; }
form.busca input { flex: 1 1 16rem; width: auto; margin: 0; min-height: var(--toque); }
@media (max-width: 719.98px) {
  form.busca input { flex-basis: 100%; }
  form.busca :is(button, .botao) { flex: 1 1 auto; }
}

/* Caixas de aviso. A borda esquerda é o que as distingue de longe: cor e posição, não
   só cor. */
.aviso, .sucesso, .erros {
  max-width: 44rem; margin: 0 0 1rem; padding: 0.85rem 1.15rem;
  background: var(--papel); border: 1px solid var(--linha-fraca); border-left: 3px solid var(--tinta-fraca);
  border-radius: var(--raio);
}
.aviso { border-left-color: var(--aviso); background: var(--aviso-fundo); }
.sucesso { border-left-color: var(--ok); }
.erros { border-left-color: var(--alerta); background: var(--alerta-fundo); }
.erros ul { margin: 0; padding-left: 1.1rem; }

/* Ficha: rótulo e valor lado a lado. */
.ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1.25rem; margin: 0 0 1rem; max-width: 44rem; }
.ficha dt { color: var(--tinta-fraca); font-size: 0.9rem; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }

/* Código de pareamento: grande de propósito, porque alguém o lê em voz alta ou o digita
   no teclado do óculos. */
.codigo-grande {
  font-size: 2.6rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.15em;
  margin: 1.5rem 0 0.5rem;
  overflow-wrap: anywhere;
}
textarea.mensagem { max-width: 44rem; }

/* Logo do cliente sobre a placa clara, como fica nos óculos. */
.logo-do-cliente img {
  display: block; max-width: 256px; height: auto; padding: 0.75rem;
  background: var(--placa); border: 1px solid var(--linha); border-radius: var(--raio);
}

/* Histórico da licença: uma linha por mudança, como uma linha do tempo. A lista vem da
   mais antiga para a mais recente, e o ponto cheio marca a mais recente. */
ul.historico { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--linha-fraca); max-width: 44rem; }
ul.historico > li { position: relative; padding: 0 0 0.9rem 0.25rem; }
ul.historico > li:last-child { padding-bottom: 0; }
ul.historico > li::before {
  content: ""; position: absolute; left: -1.4rem; top: 0.45rem; width: 0.6rem; height: 0.6rem;
  border-radius: 50%; background: var(--fundo); border: 2px solid var(--linha);
}
ul.historico > li:last-child::before { background: var(--acento); border-color: var(--acento); }