/* ---------- cores: tema claro (padrão) */
:root {
  color-scheme: light;
  --azul: #006C81;
  --azul-escuro: #00525f;
  --azul-claro: #e6f2f4;
  --rosa: #9C3464;
  --fundo: #f4f6f7;
  --cartao: #ffffff;
  --campo: #ffffff;
  --texto: #1d2a2e;
  --suave: #5f6f74;
  --linha: #dfe5e7;
  --faixa: #006C81;
  --faixa-texto: #ffffff;
  --destaque: #006C81;
  --sobe: #1b7f4c;
  --sobe-fundo: #e5f4ec;
  --desce: #b3261e;
  --desce-fundo: #fbe9e7;
  --barra: #006C81;
  --barra-hover: #9C3464;
  --grade: #eef1f2;
  --loja1: #006C81;
  --loja2: #9C3464;
  --loja3: #4fa8b8;
  --loja5: #c48a12;
  --loja6: #6a4fb3;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(16, 40, 46, .06), 0 2px 8px rgba(16, 40, 46, .04);
}

/* ---------- cores: tema escuro */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --azul: #2aa3ba;
  --azul-escuro: #8fd6e3;
  --azul-claro: #163a42;
  --rosa: #d2689a;
  --fundo: #0e1416;
  --cartao: #172125;
  --campo: #1f2c30;
  --texto: #e3ecee;
  --suave: #93a7ac;
  --linha: #263539;
  --faixa: #0b3640;
  --faixa-texto: #e3ecee;
  --destaque: #006C81;
  --sobe: #63d39c;
  --sobe-fundo: #12352a;
  --desce: #ff8f86;
  --desce-fundo: #3d1c1a;
  --barra: #2aa3ba;
  --barra-hover: #d2689a;
  --grade: #223034;
  --loja1: #2aa3ba;
  --loja2: #e07aa9;
  --loja3: #9ad8e3;
  --loja5: #e3b341;
  --loja6: #a78bfa;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 14px;
}

/* ---------- topo */
.topo {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px; background: var(--cartao);
  border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.marca strong { display: block; font-size: 15px; }
.marca small { color: var(--suave); font-size: 12px; }
.logo { width: 36px; height: 36px; border-radius: 9px; display: block; }
.abas { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.abas a, .abas span {
  padding: 7px 10px; border-radius: 8px; white-space: nowrap; text-decoration: none;
  color: var(--suave); font-weight: 500; font-size: 13.5px;
}
.abas a.ativa { background: var(--azul-claro); color: var(--azul-escuro); }
.abas .em-breve { opacity: .45; cursor: default; }
.lado { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.atualizado {
  font-size: 12px; color: var(--suave);
  padding: 6px 10px; border: 1px solid var(--linha); border-radius: 999px;
}
.atualizado.velho { color: var(--desce); border-color: var(--desce); background: var(--desce-fundo); }
.tema {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--linha);
  background: var(--cartao); color: var(--texto); cursor: pointer; display: grid; place-items: center;
}
.tema:hover { background: var(--azul-claro); }
.tema svg { width: 18px; height: 18px; }
.tema .lua { display: block; }
.tema .sol { display: none; }
[data-tema="escuro"] .tema .lua { display: none; }
[data-tema="escuro"] .tema .sol { display: block; }

/* ---------- login */
.login {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: var(--fundo);
}
.login-caixa {
  width: 100%; max-width: 340px; background: var(--cartao); border: 1px solid var(--linha);
  border-radius: 16px; box-shadow: var(--sombra); padding: 28px 24px; display: flex; flex-direction: column; gap: 6px;
}
.logo-login { width: 48px; height: 48px; border-radius: 12px; align-self: center; }
.login-caixa h1 { margin: 8px 0 0; font-size: 20px; text-align: center; }
.login-sub { margin: 0 0 12px; text-align: center; color: var(--suave); font-size: 13px; }
.login-caixa label { font-size: 12px; font-weight: 600; color: var(--suave); margin-top: 6px; }
.login-caixa input {
  height: 40px; border: 1px solid var(--linha); border-radius: 8px; padding: 0 12px;
  background: var(--campo); color: var(--texto); font: inherit; font-size: 15px;
}
.login-caixa input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.login-caixa button {
  margin-top: 14px; height: 42px; border: 0; border-radius: 8px; background: var(--destaque); color: #fff;
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.login-caixa button:disabled { opacity: .6; cursor: wait; }
.login-erro { background: var(--desce-fundo); color: var(--desce); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 8px; }
.sair {
  height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--linha);
  background: var(--cartao); color: var(--suave); font: inherit; font-size: 12px; cursor: pointer;
}
.sair:hover { color: var(--texto); }

/* ---------- filtros */
.filtros {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  padding: 12px 24px; background: var(--faixa); color: var(--faixa-texto);
}
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.campo label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .85; font-weight: 600; }
.periodo { display: flex; align-items: center; gap: 6px; }
.ate { font-size: 12px; opacity: .85; }
select, input[type=date], .multi > button {
  height: 34px; border: 1px solid transparent; border-radius: 8px; padding: 0 10px;
  background: var(--campo); color: var(--texto); font: inherit; font-size: 13px;
}
[data-tema="escuro"] select, [data-tema="escuro"] input[type=date], [data-tema="escuro"] .multi > button { border-color: var(--linha); }
.limpar {
  height: 34px; padding: 0 14px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px;
  background: transparent; color: var(--faixa-texto); border: 1px solid rgba(255, 255, 255, .55);
}
.limpar:hover { background: rgba(255, 255, 255, .12); }

/* multi-seleção */
.multi { position: relative; }
.multi > button {
  width: 100%; min-width: 150px; max-width: 240px; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.multi > button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi > button::after { content: "▾"; color: var(--suave); }
.multi.ativo > button { box-shadow: inset 0 0 0 2px var(--rosa); }
.pop {
  position: absolute; top: 38px; left: 0; z-index: 30; width: 300px; max-width: 86vw;
  background: var(--cartao); color: var(--texto); border-radius: 10px; border: 1px solid var(--linha);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25); padding: 8px;
}
.pop input[type=search] {
  width: 100%; height: 32px; border: 1px solid var(--linha); border-radius: 6px; padding: 0 8px; font: inherit;
  background: var(--campo); color: var(--texto);
}
.pop .acoes { display: flex; justify-content: space-between; padding: 6px 2px; font-size: 12px; }
.pop .acoes button { background: none; border: 0; color: var(--azul); cursor: pointer; padding: 2px; font: inherit; }
.pop ul { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.pop li label {
  display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-radius: 6px; cursor: pointer;
  font-size: 13px; text-transform: none; letter-spacing: 0; opacity: 1; font-weight: 400;
}
.pop li label:hover { background: var(--fundo); }

/* ---------- conteúdo */
main { padding: 16px 24px 32px; max-width: 1440px; margin: 0 auto; }
.contexto { margin: 0 0 14px; color: var(--suave); font-size: 13px; }
.contexto b { color: var(--texto); font-weight: 600; }
.erro { background: var(--desce-fundo); color: var(--desce); padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpi {
  background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px 18px; border: 1px solid var(--linha);
}
.kpi .rotulo { font-size: 13px; color: var(--suave); font-weight: 600; }
.kpi .valor { font-size: 30px; font-weight: 700; margin: 4px 0 12px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.kpi.destaque { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.kpi.destaque .rotulo, .kpi.destaque .comp .nome, .kpi.destaque .comp .base { color: rgba(255, 255, 255, .8); }
.comp {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--linha); font-size: 13px;
}
.kpi.destaque .comp { border-color: rgba(255, 255, 255, .2); }
.comp .nome { color: var(--suave); }
.comp .base { color: var(--suave); font-variant-numeric: tabular-nums; }
.delta {
  font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; min-width: 70px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.delta.sobe { color: var(--sobe); background: var(--sobe-fundo); }
.delta.desce { color: var(--desce); background: var(--desce-fundo); }
.delta.igual { color: var(--suave); background: var(--fundo); }
/* no card azul em destaque, os selos usam fundo branco para ler bem nos dois temas */
.kpi.destaque .delta.sobe, .cartao6.destaque .delta.sobe { color: #1b7f4c; background: #e5f4ec; }
.kpi.destaque .delta.desce, .cartao6.destaque .delta.desce { color: #b3261e; background: #fbe9e7; }
.kpi.destaque .delta.igual, .cartao6.destaque .delta.igual { color: #5f6f74; background: #f4f6f7; }
.cartao6 .comp { grid-template-columns: 1fr auto; gap: 8px; font-size: 12px; padding: 6px 0 0; margin-top: 6px; }
.cartao6 .comp .base { display: block; font-size: 12px; }
.cartao6 .comp .delta { min-width: 64px; font-size: 11px; }
.cartao6.destaque .comp { border-color: rgba(255, 255, 255, .2); }
.cartao6.destaque .comp .nome, .cartao6.destaque .comp .base { color: rgba(255, 255, 255, .85); }

.graficos { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; margin-top: 14px; }
.painel {
  background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra);
  border: 1px solid var(--linha); padding: 14px 16px;
}
.painel header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.painel h2 { margin: 0; font-size: 15px; }
.area-grafico { position: relative; height: 280px; }
.seg { display: inline-flex; background: var(--fundo); border-radius: 8px; padding: 3px; }
.seg button {
  border: 0; background: none; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--suave);
}
.seg button.on { background: var(--cartao); color: var(--azul-escuro); font-weight: 600; box-shadow: var(--sombra); }

.carregando .kpi .valor, .carregando canvas, .carregando .cartao6 .valor, .carregando .tabela { opacity: .35; transition: opacity .2s; }
.abas a:hover { color: var(--texto); }

/* ---------- Perfil de Vendas */
.cards6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cartao6 {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 14px 16px;
}
.cartao6.destaque { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.cartao6 .rotulo { font-size: 13px; color: var(--suave); font-weight: 600; }
.cartao6.destaque .rotulo, .cartao6.destaque .mini span { color: rgba(255, 255, 255, .8); }
.cartao6 .valor { font-size: 24px; font-weight: 700; margin: 4px 0 10px; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.cartao6 .mini { display: flex; justify-content: space-between; font-size: 12px; padding-top: 6px; border-top: 1px solid var(--linha); }
.cartao6.destaque .mini { border-color: rgba(255, 255, 255, .2); }
.cartao6 .mini span { color: var(--suave); }
.cartao6 .mini b { font-variant-numeric: tabular-nums; }
.barra-part { height: 4px; background: var(--fundo); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.barra-part i { display: block; height: 100%; background: var(--rosa); border-radius: 4px; }
.cartao6.destaque .barra-part { display: none; }

.tabelas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tabelas > .painel, .graficos > .painel { min-width: 0; }
.dica { color: var(--suave); font-size: 12px; }
.tabela { max-height: 380px; overflow: auto; border-radius: 8px; }
.tabela table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 7px 6px; text-align: right; white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { text-align: left; white-space: normal; min-width: 130px; }
.tabela thead th {
  position: sticky; top: 0; z-index: 1; background: var(--cartao); color: var(--suave);
  font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--linha); cursor: pointer; user-select: none;
}
.tabela thead th:hover { color: var(--texto); }
.tabela thead th.ord::after { content: " ▼"; font-size: 9px; }
.tabela thead th.ord.asc::after { content: " ▲"; }
.tabela tbody tr { cursor: pointer; border-bottom: 1px solid var(--linha); }
.tabela tbody tr:hover { background: var(--azul-claro); }
.tabela tbody tr.sel { background: var(--azul-claro); box-shadow: inset 3px 0 0 var(--rosa); }
.tabela tfoot td {
  position: sticky; bottom: 0; background: var(--cartao); font-weight: 700; border-top: 2px solid var(--linha);
}
.tabela .part { display: inline-flex; align-items: center; gap: 6px; }
.tabela .part i { display: inline-block; height: 6px; border-radius: 3px; background: var(--barra); opacity: .55; }
.tabela .neg { color: var(--desce); }
.tabela td.txt, .tabela th.txt { text-align: left; white-space: normal; }

.mensal { margin-top: 14px; }
.graficos.iguais { grid-template-columns: 1fr 1fr; }
.tabela td.giro-rot { font-weight: 600; }

/* ---------- Análise de Vendas */
.tabelas.largas { grid-template-columns: 1fr 1.45fr; }
.tabela.grande { max-height: 560px; margin-top: 6px; }
.tabela .mais td { text-align: center; color: var(--suave); cursor: default; font-size: 12px; }
.busca {
  height: 30px; width: 200px; max-width: 50%; border: 1px solid var(--linha); border-radius: 8px; padding: 0 10px;
  background: var(--campo); color: var(--texto); font: inherit; font-size: 13px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px;
  background: var(--campo); color: var(--texto); font-size: 12px; box-shadow: inset 0 0 0 2px var(--rosa);
}
.chip button { border: 0; background: none; color: var(--suave); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px; }
.cards6.segunda { margin-top: 12px; }
.secao { margin: 18px 0 10px; font-size: 13px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .5px; }
.secao:first-of-type { margin-top: 0; }
.selo { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 6px; }
.selo.otimo { color: #1b7f4c; background: #e5f4ec; }
.selo.bom { color: #8a6100; background: #fff3d6; }
.selo.ruim { color: #b3261e; background: #fbe9e7; }
.cartao6 .valor.alerta { color: var(--desce); }
.aviso { background: var(--azul-claro); color: var(--azul-escuro); padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; }
.area-grafico.alto { height: 340px; }

.abrir-filtros {
  display: none; width: 100%; height: 38px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px;
  background: transparent; color: var(--faixa-texto); font: inherit; font-weight: 600; text-align: left; padding: 0 12px; cursor: pointer;
}
.abrir-filtros::after { content: " ▾"; }
.filtros.aberto .abrir-filtros::after { content: " ▴"; }
.abrir-filtros span { font-weight: 400; opacity: .85; }

/* ---------- celular / telas menores */
@media (max-width: 1150px) {
  .topo { flex-wrap: wrap; row-gap: 6px; }
  .abas { order: 3; flex-basis: 100%; }
  .lado { margin-left: auto; }
}
/* ---------- modo compacto: notebooks e telas até ~1500px (ex.: 1366x768) */
@media (max-width: 1500px), (max-height: 820px) {
  body { font-size: 13px; }
  .topo { padding: 6px 16px; gap: 12px; }
  .logo { width: 30px; height: 30px; border-radius: 8px; }
  .marca strong { font-size: 14px; }
  .marca small { display: none; }
  .abas a, .abas span { padding: 6px 8px; font-size: 13px; }
  .atualizado { padding: 4px 8px; font-size: 11.5px; }
  .tema { width: 30px; height: 30px; }

  .filtros { padding: 8px 16px; gap: 6px 8px; }
  .campo { min-width: 0; gap: 2px; }
  .campo label { font-size: 10px; letter-spacing: .4px; }
  select, input[type=date], .multi > button, .limpar { height: 30px; font-size: 12.5px; padding: 0 8px; }
  #atalho { width: 128px; }
  input[type=date] { width: 118px; }
  .periodo { gap: 4px; }
  .multi > button { min-width: 112px; max-width: 160px; }
  .limpar { padding: 0 10px; }

  main { padding: 10px 16px 24px; }
  .contexto { margin-bottom: 10px; font-size: 12.5px; }
  .kpis, .cards6 { gap: 10px; }
  .kpi, .cartao6 { padding: 10px 12px; }
  .kpi .valor { font-size: 24px; margin: 2px 0 8px; }
  .cartao6 .valor { font-size: 20px; margin: 2px 0 8px; }
  .cartao6 .rotulo, .kpi .rotulo { font-size: 12px; }
  .graficos, .tabelas { gap: 10px; margin-top: 10px; }
  .mensal { margin-top: 10px; }
  .painel { padding: 10px 12px; }
  .painel h2 { font-size: 14px; }
  .area-grafico { height: 240px; }
  .area-grafico.alto { height: 290px; }
  .tabela table { font-size: 12px; }
  .tabela th, .tabela td { padding: 6px 5px; }
  .tabela th:first-child, .tabela td:first-child { min-width: 110px; }
  .secao { margin: 12px 0 8px; font-size: 12px; }
}
@media (max-width: 1280px) {
  .cards6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .graficos, .graficos.iguais, .tabelas, .tabelas.largas { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .topo { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .abas { order: 3; flex-basis: 100%; }
  .filtros { padding: 12px 16px; position: static; }
  .abrir-filtros { display: block; }
  .filtros:not(.aberto) .campo, .filtros:not(.aberto) .limpar { display: none; }
  .campo { min-width: 0; flex: 1 1 45%; }
  .multi > button { max-width: none; }
  main { padding: 14px 16px 28px; }
  .kpis, .cards6 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cartao6 .valor { font-size: 20px; }
  .area-grafico.alto { height: 300px; }
  .kpi { padding: 12px; }
  .kpi .valor { font-size: 22px; }
  .comp { grid-template-columns: 1fr auto; font-size: 12px; }
  .comp .base { display: none; }
}
@media (max-width: 480px) {
  .campo { flex-basis: 100%; }
  .periodo { flex-wrap: wrap; }
  .periodo select { flex-basis: 100%; }
  .periodo input { flex: 1; }
}