:root {
  color-scheme: light;
  --plano: #f9f9f7;
  --superficie: #fcfcfb;
  --texto: #0b0b0b;
  --texto-2: #52514e;
  --texto-3: #6e6c67;
  --linha: #e1e0d9;
  --trilho: #eeede8;
  --borda: rgba(11, 11, 11, 0.1);
  --destaque: #2a78d6;
  --destaque-suave: rgba(42, 120, 214, 0.1);
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --borda-eixo: #c3c2b7;
  --bom: #0ca30c;
  --atencao: #fab219;
  --critico: #d03b3b;
  --neutro: #898781;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --plano: #0d0d0d;
    --superficie: #1a1a19;
    --texto: #f0efec;
    --texto-2: #c3c2b7;
    --texto-3: #a3a198;
    --linha: #2c2c2a;
    --trilho: #2c2c2a;
    --borda: rgba(255, 255, 255, 0.1);
    --destaque: #6da7ec;
    --destaque-suave: rgba(57, 135, 229, 0.18);
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --borda-eixo: #383835;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
a { color: var(--destaque); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; list-style: none; }

.app { display: flex; align-items: stretch; min-height: 100vh; }
.conteudo { flex: 1; min-width: 0; }

.lateral {
  position: sticky;
  top: 0;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 236px;
  height: 100vh;
  padding: 20px 14px;
  border-right: 1px solid var(--borda);
  background: var(--superficie);
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 18px;
  color: var(--texto);
  font-size: 16px;
  font-weight: 650;
}
.marca:hover { text-decoration: none; }
.marca-simbolo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #2a78d6;
  color: #fff;
  font-weight: 700;
}
.lateral-secao {
  padding: 0 10px 6px;
  color: var(--texto-3);
  font-size: 12px;
  font-weight: 600;
}
.menu-lateral { display: flex; flex-direction: column; gap: 2px; }
.menu-lateral a, .lateral-sair {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
}
.menu-lateral a:hover, .lateral-sair:hover { background: var(--trilho); color: var(--texto); text-decoration: none; }
.menu-lateral a[aria-current="page"] {
  background: var(--destaque-suave);
  color: var(--destaque);
  font-weight: 600;
}
.menu-lateral svg, .lateral-sair svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lateral-sair { margin-top: auto; }

main { max-width: 1320px; padding: 0 32px 40px; }

.topo {
  max-width: 1320px;
  padding: 26px 32px 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.numero-esquerda { font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-apagada td { color: var(--texto-3); }
.periodo { margin-bottom: 10px; }
.faixa-2fa { margin: 0; padding: 10px 32px; border-bottom: 1px solid var(--borda); background: var(--destaque-suave); font-size: 14px; }
.cartao-2fa { max-width: 440px; }
.cartao-2fa section > p { margin-bottom: 10px; }
.qr-2fa { display: block; margin: 8px auto 12px; border-radius: 8px; background: #fff; }
.chave-2fa { font-family: ui-monospace, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; }
.codigos-2fa { display: grid; gap: 6px; margin: 12px 0; padding: 0; list-style: none; font-family: ui-monospace, Consolas, monospace; font-size: 15px; }
.mestre-detalhe { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.coluna-produtos { position: sticky; top: 12px; margin-bottom: 0; }
.coluna-produtos .filtros label { flex: 1 1 130px; }
.lista-produtos { display: grid; gap: 4px; max-height: calc(100vh - 230px); overflow-y: auto; }
.item-produto { display: grid; gap: 2px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--texto); font: inherit; text-align: left; }
.item-produto:hover { background: var(--trilho); }
.item-produto[aria-pressed="true"] { border-color: var(--destaque); background: var(--destaque-suave); }
.item-titulo { font-size: 13px; line-height: 1.3; }
.frase-resumo { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--destaque-suave); font-size: 15px; font-weight: 500; }
.legenda-grafico { margin: 6px 0 4px; font-size: 13px; }
.amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.serie-barra { background: var(--serie-1); }
.serie-destaque { background: var(--serie-2); }
.area-barras svg { display: block; }
.barra { fill: var(--serie-1); }
.barra-destaque { fill: var(--serie-2); }
.grupo-barra:focus-visible { outline: 2px solid var(--destaque); }
.rotulo-margem { fill: var(--texto); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rotulo-negativo { fill: var(--critico); }
.rotulo-sem { fill: var(--texto-3); font-weight: 400; }
.linha-destaque td { background: var(--destaque-suave); }
.selo-texto { justify-content: flex-end; margin-top: 3px; white-space: normal; text-align: right; font-size: 11px; }
.celula-meses { min-width: 92px; max-width: 130px; color: var(--texto-2); font-size: 11px; }
.tabela-precos { min-width: 0; font-size: 12.5px; }
.tabela-precos th, .tabela-precos td { padding: 8px 5px; }
.tabela-precos th { font-size: 11.5px; line-height: 1.25; vertical-align: bottom; }
.tabela-precos .selo-texto { max-width: 86px; margin-left: auto; }
@media (max-width: 980px) {
  .mestre-detalhe { grid-template-columns: minmax(0, 1fr); }
  .coluna-produtos { position: static; }
  .lista-produtos { max-height: 280px; }
}
@media (max-width: 720px) {
  .tabela-precos { min-width: 680px; }
}
.subtitulo { margin-top: 18px; }
.bloco { margin-top: 20px; }
textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto); font: inherit; }
.lista-cartoes { display: grid; gap: 8px; margin-top: 10px; }
.cartao-pacote { display: grid; gap: 3px; width: 100%; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--texto); font: inherit; text-align: left; }
.cartao-pacote:hover { background: var(--trilho); }
.marcador { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; }
.marcador input { width: 20px; height: 20px; min-height: 0; flex: none; }
.grade-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 12px; margin: 8px 0; }
.campo-observacoes { display: grid; gap: 4px; margin-top: 8px; color: var(--texto-2); font-size: 13px; }
.bloco-foto { padding: 12px 0; border-top: 1px solid var(--linha); }
.rotulo-foto { font-weight: 600; margin-bottom: 8px; }
.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.miniatura { display: grid; gap: 4px; width: 104px; }
.miniatura img { width: 104px; height: 104px; border-radius: 8px; object-fit: cover; background: var(--trilho); }
.remover-foto { padding: 4px; border: 0; background: transparent; color: var(--critico); font-size: 12px; }
.acoes-foto { display: flex; gap: 8px; }
.botao-foto { display: inline-flex; flex: 1; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.botao-grande { width: 100%; min-height: 48px; margin-bottom: 12px; }
#conf-situacao { margin-bottom: 12px; }
.topo-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
a.botao-discreto:hover { text-decoration: none; background: var(--trilho); }
.detalhe-pedido { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 32px; }
.rotulo-seguinte { margin-top: 10px; }
.filtros-periodo { align-items: flex-end; }
.filtros-periodo .abas { margin-bottom: 0; }
.indicadores.indicadores-denso { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.indicadores-denso .nivel { margin: 2px 0; }
.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 12px; }
.grafico { margin: 0; min-width: 0; }
.grafico figcaption { margin-bottom: 4px; color: var(--texto-2); font-size: 13px; }
.area-grafico { width: 100%; min-height: 170px; }
.area-grafico svg { display: block; max-width: 100%; }
.grade { stroke: var(--linha); stroke-width: 1; }
.eixo { stroke: var(--borda-eixo); stroke-width: 1; }
.rotulo-eixo { fill: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.linha-serie { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.linha-serie.serie-1 { stroke: var(--serie-1); }
.linha-serie.serie-2 { stroke: var(--serie-2); }
.ponto-serie { stroke: var(--superficie); stroke-width: 2; }
.ponto-serie.serie-1 { fill: var(--serie-1); }
.ponto-serie.serie-2 { fill: var(--serie-2); }
.guia { stroke: var(--texto-3); stroke-width: 1; }
.captura { fill: transparent; cursor: crosshair; }
.detalhes-tabela { margin-top: 10px; }
.acoes-tabela { display: flex; justify-content: flex-end; margin: 8px 0; }
.detalhes-tabela summary { color: var(--texto-2); font-size: 13px; cursor: pointer; }
.cabecalho-tabela { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.celula-classe { min-width: 180px; }
.valor-negativo-texto { color: var(--critico); font-weight: 600; }
.botao-periodo { align-self: flex-end; min-height: 36px; }
.filtros input[type="date"] { width: 160px; }
.abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.aba { padding: 6px 12px; border: 1px solid var(--borda); border-radius: 6px; background: transparent; color: var(--texto-2); }
.aba[aria-pressed="true"] { border-color: var(--destaque); color: var(--texto); font-weight: 600; }
.nota { margin-top: 10px; }
.lista-avisos { margin-top: 8px; padding-left: 18px; list-style: disc; color: var(--texto-2); }
.lista-avisos li { padding: 2px 0; }
.tabela-compacta { min-width: 640px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.marcacao { color: var(--texto-2); font-weight: 600; font-size: 12px; }
.valor-negativo span { color: var(--critico); font-weight: 600; }
.conta { max-width: 560px; margin-left: auto; }
.conta-linha { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.conta-total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--linha); font-weight: 650; }
.texto-suave { color: var(--texto-3); font-size: 12px; }

.aviso {
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--atencao);
  border-radius: 6px;
  background: var(--superficie);
}

.filtros { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.filtros label { display: grid; gap: 4px; color: var(--texto-2); font-size: 12px; }
.filtros label:first-child:has(input[type="search"]) { flex: 1 1 260px; }

input, select {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
}

button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

.botao-primario {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: #2a78d6;
  color: #fff;
  font-weight: 600;
}
.botao-discreto {
  padding: 4px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--texto);
  white-space: nowrap;
}
.botao-ordem {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.indicador, .cartao {
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  padding: 18px;
}
.cartao { margin-bottom: 16px; }
.indicador-rotulo { color: var(--texto-2); font-size: 13px; }
.indicador-valor { font-size: 24px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }

.barra-niveis { display: flex; gap: 2px; height: 14px; margin: 14px 0 12px; }
.segmento { min-width: 4px; flex-basis: 0; }
.segmento:first-child { border-radius: 4px 0 0 4px; }
.segmento:last-child { border-radius: 0 4px 4px 0; }
.segmento:only-child { border-radius: 4px; }

.legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legenda li { display: flex; align-items: center; gap: 6px; }

.selo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.fundo-bom { background: var(--bom); }
.fundo-atencao { background: var(--atencao); }
.selo.fundo-atencao { color: #0b0b0b; }
.fundo-critico { background: var(--critico); }
.fundo-neutro { background: var(--neutro); }

.tabela-rolagem { overflow-x: auto; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--linha);
  text-align: left;
  vertical-align: middle;
}
.numero { text-align: right; font-variant-numeric: tabular-nums; }
td.numero { white-space: nowrap; }

.celula-anuncio { display: flex; align-items: center; gap: 10px; min-width: 320px; }
.celula-anuncio img, .sem-imagem {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--trilho);
}

.celula-score { min-width: 150px; }
td.celula-score { white-space: normal; }
.score { font-size: 16px; }
.medidor {
  height: 6px;
  margin: 3px 0 5px auto;
  max-width: 120px;
  border-radius: 3px;
  background: var(--trilho);
  overflow: hidden;
}
.medidor-valor { height: 100%; border-radius: 3px; }
.nivel { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }

.linha-pendencias td { background: var(--plano); }
.grupo-pendencias + .grupo-pendencias { margin-top: 12px; }
.grupo-pendencias li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
}
.grupo-pendencias a { flex: none; }

.dica {
  position: absolute;
  z-index: 10;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--texto);
  color: var(--superficie);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

.pagina-entrar {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
}
.cartao-entrar {
  width: 100%;
  max-width: 340px;
  padding: 28px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
}
.cartao-entrar h1 { margin-bottom: 18px; font-size: 20px; }
.cartao-entrar label { display: block; margin-bottom: 4px; color: var(--texto-2); font-size: 13px; }
.erro { min-height: 20px; margin: 6px 0; color: var(--critico); font-size: 13px; }

@media (max-width: 860px) {
  .app { display: block; }
  .lateral {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    width: auto;
    height: auto;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--borda);
  }
  .marca { padding: 0; }
  .lateral-secao { display: none; }
  .menu-lateral { flex-direction: row; order: 3; width: 100%; overflow-x: auto; }
  .menu-lateral a { width: auto; }
  .lateral-sair { order: 2; width: auto; margin: 0 0 0 auto; }
  main { padding: 0 16px 32px; }
  .topo { padding: 18px 16px 12px; }
  .indicadores, .indicadores.indicadores-denso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicador { padding: 14px; }
  .indicador-valor { font-size: 20px; }
}