/* Paleta portada do tema Azul Corporativo do relatorio, em
   Power_BI_Eco_Master_Vendas.Report/StaticResources/RegisteredResources/
   O tema original traz 483 dataColors; so as oito primeiras sao usadas de fato. */
:root {
  --primaria: #0078D4;
  --primaria-clara: #E3EDF7;
  --positiva: #1A7A4A;
  --negativa: #C0392B;
  --fundo: #F0F4F8;
  --superficie: #FFFFFF;
  --texto: #1A2B4A;
  --suave: #64748B;
  --borda: #CBD5E1;
  --grade: #E2E8F0;
  --raio: 10px;
  --sombra: 0 1px 3px rgba(26, 43, 74, .12);
  --sombra-alta: 0 6px 18px rgba(26, 43, 74, .14);
  --transicao: 160ms cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

/* O atributo hidden do HTML e so `display: none` vindo da folha do navegador, e
   qualquer display declarado aqui o vence. O painel do glossario tem display:flex e
   por isso nascia aberto e ignorava o botao de fechar - o JS marcava hidden e o CSS
   desmarcava. Esta regra fecha a porta para o mesmo erro em qualquer elemento. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--texto);
}

/* ---------- login ---------- */
.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login .cartao {
  background: var(--superficie); padding: 32px; border-radius: var(--raio);
  border: 1px solid var(--borda); box-shadow: var(--sombra);
  width: 100%; max-width: 340px; display: grid; gap: 14px;
}
.login h1 { margin: 0 0 6px; font-size: 19px; }
.login label { display: grid; gap: 5px; font-size: 12px; color: var(--suave); }
.login input {
  padding: 9px 11px; border: 1px solid var(--borda); border-radius: 6px;
  font-size: 14px; color: var(--texto); transition: border-color var(--transicao);
}
.login input:focus { outline: none; border-color: var(--primaria); }
.login button {
  margin-top: 6px; padding: 10px; border: 0; border-radius: 6px;
  background: var(--primaria); color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: filter var(--transicao);
}
.login button:hover { filter: brightness(1.08); }
.erro {
  margin: 0; padding: 8px 10px; border-radius: 6px; font-size: 13px;
  background: #FDECEA; color: var(--negativa);
}

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.marca strong { display: block; font-size: 15px; }
.marca span { font-size: 11px; color: var(--suave); }
.topo nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.topo nav a {
  padding: 6px 12px; border-radius: 6px; text-decoration: none;
  color: var(--suave); font-size: 13px; transition: background var(--transicao),
  color var(--transicao);
}
.topo nav a:hover { background: var(--fundo); color: var(--texto); }
.topo nav a.ativo { background: var(--primaria); color: #fff; }
.sair { color: var(--suave); font-size: 12px; text-decoration: none; }
.sair:hover { color: var(--negativa); }
.botao-glossario {
  padding: 5px 11px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--superficie); color: var(--suave); font-size: 12px;
  cursor: pointer; transition: border-color var(--transicao), color var(--transicao),
              background var(--transicao);
}
.botao-glossario:hover {
  border-color: var(--primaria); color: var(--primaria);
  background: var(--primaria-clara);
}

/* ---------- ajuda: verbete do indicador ----------
   Nada aparece ate ser pedido. O rotulo do card ganha um pontilhado discreto; o
   texto so surge no clique, ancorado no proprio rotulo - e onde a duvida nasce. */
.rotulo.tem-ajuda {
  padding: 0; border: 0; background: none; font: inherit; text-align: left;
  color: var(--suave); cursor: help;
  border-bottom: 1px dotted var(--borda);
  transition: color var(--transicao), border-color var(--transicao);
}
.rotulo.tem-ajuda:hover { color: var(--primaria); border-bottom-color: var(--primaria); }

#popover-ajuda {
  position: fixed; z-index: 60; width: min(320px, calc(100vw - 24px));
  padding: 12px 14px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  animation: aparece 140ms ease-out both;
}
#popover-ajuda strong { display: block; font-size: 13px; }
#popover-ajuda em {
  display: block; margin-bottom: 7px; font-style: normal;
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--primaria);
}
#popover-ajuda p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.45; }
#popover-ajuda p:last-child { margin-bottom: 0; }
.como-ler { color: var(--suave); }
.como-ler span {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto); opacity: .55; margin-bottom: 1px;
}

/* ---------- painel do glossario ---------- */
#painel-ajuda {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 55;
  width: min(400px, 92vw); display: flex; flex-direction: column;
  background: var(--superficie); border-left: 1px solid var(--borda);
  box-shadow: -8px 0 28px rgba(26, 43, 74, .16);
  animation: desliza 200ms cubic-bezier(.2, .7, .3, 1) both;
}
#painel-ajuda header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--borda);
}
#fecha-ajuda {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--suave); font-size: 18px; cursor: pointer;
}
#fecha-ajuda:hover { background: var(--fundo); color: var(--negativa); }
/* Com o painel aberto o conteudo recua, em vez de ficar escondido atras dele -
   a coluna da direita da tabela era exatamente o que sumia.
   So a partir de 900px: abaixo disso o recuo comeria a tela inteira (num celular de
   390px sobravam 15px de conteudo), entao la o painel vira sobreposicao. */
@media (min-width: 900px) {
  body.com-painel main,
  body.com-painel .filtros,
  body.com-painel .topo { padding-right: 416px; }
}

.conteudo-ajuda { padding: 4px 16px 20px; overflow-y: auto; }
.conteudo-ajuda h3 {
  position: sticky; top: 0; margin: 14px 0 6px; padding: 6px 0;
  background: var(--superficie); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--primaria);
}
.conteudo-ajuda dl { margin: 0 0 12px; }
.conteudo-ajuda dt { font-size: 13px; font-weight: 600; }
.conteudo-ajuda dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; }
.sem-verbete {
  margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--borda);
  font-size: 11px; color: var(--suave);
}

@keyframes desliza {
  from { transform: translateX(100%); }
  to   { transform: none; }
}

/* ---------- filtros ---------- */
.filtros {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: start;
  padding: 12px 20px; background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.campo { display: grid; gap: 4px; }
.cabeca-campo {
  display: flex; align-items: center; gap: 5px; min-height: 17px;
  font-size: 11px; color: var(--suave);
}
.cabeca-campo em { font-style: normal; color: var(--primaria); font-weight: 600; }
.filtros input, .filtros select {
  padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px;
  font-size: 13px; color: var(--texto); background: var(--superficie);
  min-width: 132px; max-width: 220px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.filtros input:focus, .filtros select:focus {
  outline: none; border-color: var(--primaria);
  box-shadow: 0 0 0 3px rgba(0, 120, 212, .14);
}
.filtros select[multiple] { min-height: 32px; max-height: 96px; }
.par-datas { display: flex; gap: 6px; }
.par-datas input { min-width: 124px; }

/* O x de limpar um filtro so: some quando nao ha o que limpar, para nao virar
   ruido em seis campos vazios. */
.limpa-um {
  width: 15px; height: 15px; padding: 0; line-height: 13px;
  border: 0; border-radius: 50%; background: transparent; color: var(--suave);
  font-size: 15px; cursor: pointer; visibility: hidden; opacity: 0;
  transition: opacity var(--transicao), background var(--transicao),
              color var(--transicao);
}
.campo.tem-selecao .limpa-um { visibility: visible; opacity: .65; }
.campo.tem-selecao .limpa-um:hover {
  opacity: 1; background: var(--negativa); color: #fff;
}
/* O campo com selecao fica marcado, para dar para ver de relance o que esta filtrando */
.campo.tem-selecao > select, .campo.tem-selecao .par-datas input {
  border-color: var(--primaria);
}

.acoes { display: flex; align-items: center; gap: 10px; align-self: end; padding-bottom: 1px; }
.acoes button {
  padding: 7px 14px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--superficie); color: var(--suave); font-size: 13px; cursor: pointer;
  transition: border-color var(--transicao), color var(--transicao),
              background var(--transicao);
}
.acoes button:hover {
  border-color: var(--negativa); color: var(--negativa); background: #FDECEA;
}

#carregando { font-size: 12px; color: var(--primaria); opacity: 0;
              transition: opacity var(--transicao); }
.htmx-request #carregando, #carregando.htmx-request { opacity: 1; }

/* ---------- conteudo ---------- */
main { padding: 16px 20px 32px; transition: opacity var(--transicao); }
/* Durante a busca o conteudo desbota em vez de sumir: o leitor mantem a referencia
   do que estava vendo e percebe que aquilo ainda e o resultado antigo. */
main.htmx-request { opacity: .45; }

.banner { margin: 0 0 14px; font-size: 12px; color: var(--suave); }

.cards {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px;
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.card:hover {
  transform: translateY(-2px); box-shadow: var(--sombra-alta);
  border-color: var(--primaria);
}
.card .valor {
  font-size: 25px; font-weight: 600; color: var(--primaria);
  line-height: 1.2; overflow-wrap: anywhere;
}
.card .valor.negativo { color: var(--negativa); }
.card .rotulo { margin-top: 3px; font-size: 11px; color: var(--suave); }

.grade {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.visual {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px;
  min-width: 0;   /* sem isso o grid nao deixa o filho encolher e a tabela estoura */
  transition: box-shadow var(--transicao);
}
.visual:hover { box-shadow: var(--sombra-alta); }
.visual.largo { grid-column: 1 / -1; }
.visual h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 13px; font-weight: 600;
}
.visual h2 span { flex: 1; min-width: 0; }
.gancho-grafico { height: 260px; }

/* ---------- modo foco ----------
   Um visual por vez ocupando a tela, como o focus mode do Power BI. Resolve tabela
   larga sem encolher fonte nem esconder coluna: o espaco passa a existir. */
.foco-alterna {
  flex: none; width: 24px; height: 24px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--suave);
  font-size: 13px; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity var(--transicao), background var(--transicao),
              color var(--transicao), border-color var(--transicao);
}
.visual:hover .foco-alterna, .foco-alterna:focus-visible { opacity: 1; }
/* Em tela de toque nao existe :hover - o botao de foco ficaria invisivel e o
   recurso, inalcancavel. Justamente onde ele e MAIS util, porque a tela e pequena. */
@media (hover: none) {
  .foco-alterna { opacity: 1; }
  .rotulo.tem-ajuda { color: var(--primaria); }
}
.foco-alterna:hover {
  background: var(--primaria-clara); color: var(--primaria);
  border-color: var(--primaria);
}

body.com-foco { overflow: hidden; }
body.com-foco::after {
  content: ''; position: fixed; inset: 0; z-index: 40;
  background: rgba(26, 43, 74, .45);
  animation: aparece 160ms ease-out both;
}

.visual.foco {
  position: fixed; z-index: 50;
  inset: 3vh 3vw;
  margin: 0; overflow: auto;
  box-shadow: 0 18px 50px rgba(26, 43, 74, .3);
  animation: cresce 200ms cubic-bezier(.2, .7, .3, 1) both;
}
.visual.foco h2 { font-size: 15px; }
.visual.foco .foco-alterna { opacity: 1; }
/* No foco a tabela deixa de rolar horizontalmente: ha largura para todas as colunas */
.visual.foco .rolagem { overflow-x: visible; }
.visual.foco td:first-child { max-width: none; }
.visual.foco .gancho-grafico { height: calc(94vh - 92px); }

@keyframes aparece { from { opacity: 0 } to { opacity: 1 } }
@keyframes cresce {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
.vazio {
  margin: 0; padding: 28px 0; text-align: center; color: var(--suave);
  font-size: 13px;
}

.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--primaria); color: #fff; font-weight: 600; font-size: 11px;
  text-align: left; padding: 7px 9px; position: sticky; top: 0;
}
thead th.num, td.num { text-align: right; }
tbody td { padding: 6px 9px; border-bottom: 1px solid var(--grade); }
tbody tr:nth-child(even) { background: var(--fundo); }
tbody tr {
  transition: background var(--transicao);
  animation: entra 320ms cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: var(--atraso, 0ms);
}
tbody tr:hover { background: var(--primaria-clara); }
td:first-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes entra {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* A troca de conteudo pelo HTMX usa a View Transitions API onde houver suporte;
   onde nao houver, a troca continua funcionando, so que seca. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 640px) {
  .grade { grid-template-columns: 1fr; }
  .filtros input, .filtros select { min-width: 0; width: 100%; }
  .campo { flex: 1 1 140px; }
  .par-datas { flex-wrap: wrap; }
  main { padding: 12px 16px 24px; }
}