/* AQBR_DashOnLine — paleta herdada das medidas HTML do Power BI Gerencial,
   para o site parecer continuacao do relatorio e nao coisa nova. */
:root {
  --azul-escuro: #1a365d;
  --azul:        #2b6cb0;
  --azul-medio:  #2c5282;
  --azul-claro:  #4299e1;
  --fundo:       #f5f7fa;
  --borda:       #e2e8f0;
  --texto:       #2d3748;
  --suave:       #718096;
  --verde:       #2f855a;
  --vermelho:    #cb2431;
  --ambar:       #d69e2e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font: 15px/1.55 "Segoe UI", system-ui, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
}

/* ---------------------------------------------------------------- login */
.centro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.cartao {
  width: 100%;
  max-width: 25rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.cartao > header {
  background: linear-gradient(135deg, var(--azul-escuro), var(--azul));
  color: #fff;
  padding: 1.6rem 1.75rem;
}

.cartao > header h1 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: .01em; }
.cartao > header p  { margin: .3rem 0 0; font-size: .85rem; opacity: .85; }

.corpo { padding: 1.75rem; }

label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--suave);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .35rem;
}

input {
  width: 100%;
  padding: .65rem .75rem;
  font: inherit;
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 4px;
  margin-bottom: 1.1rem;
}

input:focus {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(66, 153, 225, .15);
}

/* Campo do codigo de 6 digitos: monoespacado e espacado, para conferir
   digito a digito sem esforco. */
.codigo {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 1.5rem;
  letter-spacing: .5rem;
  text-align: center;
  padding: .7rem;
}

button {
  width: 100%;
  padding: .7rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--azul);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

button:hover:not(:disabled) { background: var(--azul-medio); }
button:disabled { opacity: .55; cursor: default; }

.secundario {
  background: none;
  color: var(--suave);
  font-weight: 400;
  font-size: .85rem;
  margin-top: .75rem;
  padding: .4rem;
}
.secundario:hover:not(:disabled) { background: none; color: var(--azul); text-decoration: underline; }

.aviso {
  padding: .7rem .85rem;
  border-radius: 4px;
  font-size: .875rem;
  margin-bottom: 1.1rem;
  border-left: 3px solid;
}
.aviso.erro  { background: #fff5f5; border-color: var(--vermelho); color: #9b2c2c; }
.aviso.info  { background: #ebf8ff; border-color: var(--azul-claro); color: var(--azul-medio); }

.oculto { display: none; }

/* ------------------------------------------------------------- QR code */
.qr {
  display: block;
  width: 12.5rem;
  height: 12.5rem;
  margin: 0 auto 1rem;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 4px;
}

.segredo {
  font-family: "Consolas", monospace;
  font-size: .8rem;
  text-align: center;
  color: var(--suave);
  word-break: break-all;
  background: var(--fundo);
  padding: .5rem;
  border-radius: 4px;
  margin-bottom: 1.1rem;
}

.passos {
  font-size: .85rem;
  color: var(--suave);
  padding-left: 1.1rem;
  margin: 0 0 1.1rem;
}
.passos li { margin-bottom: .3rem; }

/* --------------------------------------------------------------- menu */
.topo {
  background: linear-gradient(135deg, var(--azul-escuro), var(--azul));
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.topo h1 { margin: 0; font-size: 1rem; font-weight: 600; }
.topo .quem { font-size: .82rem; opacity: .85; }
.topo button { width: auto; padding: .4rem .9rem; font-size: .82rem; background: rgba(255,255,255,.15); }
.topo button:hover:not(:disabled) { background: rgba(255,255,255,.25); }
/* O botao de voltar anda junto do titulo, do lado esquerdo. Sem este agrupador
   o `space-between` do .topo espalharia tres filhos e o "Vendas" ficaria
   centralizado, longe do botao a que pertence. */
.topo .titulo { display: flex; align-items: center; gap: .7rem; }
.topo .btn-voltar { padding: .35rem .75rem; }

main { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }

/* Os blocos do menu. ⚠️ `.grupo` so e usada em desenharMenu() — conferido por
   grep antes de mexer aqui, porque classe compartilhada e acoplamento calado e
   ja derrubou telas que nao tinham nada com o assunto. */
.grupo { margin-bottom: 1.75rem; }
.grupo h2 {
  /* ⚠️ `--texto`, e NAO `--suave`. Esta regra existia desde o comeco do projeto
     e nunca tinha sido renderizada; ao estrear nos dois blocos do menu, em
     03/09/2026, a medicao no Chrome reprovou o tema CLARO: #718096 sobre
     #f5f7fa da 3,78:1, abaixo dos 4,5:1 que 12,5px em negrito exigem. O escuro
     passava a 8,32:1 e sozinho teria aprovado a regra inteira.
     `--suave` e tinta de LEGENDA, e aqui o texto e o nome da EMPRESA sobre um
     grupo de cartoes — precedente exato do nome do vendedor a 2,9:1, que herdou
     tinta de legenda e ficou semanas assim. Com `--texto`: 11,28:1 no claro e
     15,49:1 no escuro. Medido por admin/testar_menu_layout.mjs.
     ⚠️ NAO mexer no token `--suave` para resolver isto: ele veste as legendas
     dos TRES dashboards. */
  font-size: .78rem; font-weight: 700; color: var(--texto);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 .7rem; padding-bottom: .4rem; border-bottom: 1px solid var(--borda);
}

.paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }

.pagina {
  display: block;
  background: #fff;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul-claro);
  border-radius: 6px;
  padding: .9rem 1rem;
  text-decoration: none;
  color: var(--texto);
  font-weight: 600;
  font-size: .92rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.pagina:hover { border-left-color: var(--azul-escuro); box-shadow: 0 2px 5px rgba(0,0,0,.1); }
.pagina small { display: block; font-weight: 400; color: var(--suave); font-size: .78rem; margin-top: .2rem; }

.rodape {
  font-size: .8rem; color: var(--suave); text-align: center;
  padding: 1rem 1.5rem 2rem; border-top: 1px solid var(--borda); margin-top: 1rem;
}
.rodape .frio { color: var(--ambar); font-weight: 600; }