/* Design System · Gestão E-commerce
 *
 * Único stylesheet do sistema. Tokens e documentação em docs/design-system.md.
 * Não declare cor, fonte ou espaçamento fora daqui.
 *
 * Derivado do Modernist e do protótipo Gestao Ecommerce.dc.html. Ferramenta
 * densa: tabela antes de card, número em mono, zero raio, réguas fortes.
 */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=Source+Serif+4:wght@600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --fs: "Source Serif 4", Georgia, serif;
  --fn: "Archivo", system-ui, sans-serif;
  --fm: "JetBrains Mono", ui-monospace, monospace;

  --bg: #ffffff;
  --sf: #f3f2f2;
  --sf2: #eae7e7;
  --b: #d7d3d3;
  --b2: #201e1d66;
  --tx: #201e1d;
  --t2: #7d7979;

  --ac: #ec3013;
  --ac-600: #dd2b0f;
  --ac-700: #ae1800;
  --tint: #fff2ef;
  --hl: #ffe0d9;

  --al: #ae1800;
  --pos: #1b4b8f;

  --st-prejuizo: #ae1800;
  --st-baixa: #ec3013;
  --st-ok: #d7d3d3;
  --st-ideal: #1b4b8f;

  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e6: 24px;
  --e8: 32px;

  --r: 0px;
  --lateral: 208px; /* largura da barra de navegação */

  /* Movimento. Curto de propósito: 120ms é o limiar em que a transição deixa
     de ser percebida como espera e passa a ser percebida como resposta. Só se
     aplica a mudança de estado que a pessoa provocou — hover, foco, pressão,
     carregamento. Nada anima ao entrar na tela; ver `decisoes/0017`. */
  --dur: 120ms;
  --curva: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ── base ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--fn);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--fs);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--e2);
}
h1 {
  font-size: 28px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 16px;
}

/* Rótulo de seção: pequeno, caixa alta, discreto. O dado é que é o conteúdo. */
.rotulo {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t2);
}

a {
  color: var(--tx);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--curva);
}
a:hover {
  color: var(--ac);
}

:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}
::selection {
  background: var(--hl);
}

/* Todo número em mono, tabular, alinhado à direita em tabela. */
.num {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
}
td.num,
th.num {
  text-align: right;
}

.hr {
  height: 2px;
  border: 0;
  margin: var(--e4) 0;
  background: var(--b2);
}
.muted {
  color: var(--t2);
}

/* ── assinatura visual: faixa lateral de 4px ──────────────────────────── */

.faixa {
  border-left: 4px solid var(--ac);
  padding-left: var(--e3);
}

/* ── layout ───────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--lateral) 1fr;
  min-height: 100vh;
}

.lateral {
  background: var(--sf);
  border-right: 2px solid var(--b2);
  padding: var(--e4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.lateral-marca {
  font-family: var(--fs);
  font-weight: 700;
  font-size: 17px;
  padding: 0 var(--e4);
}

.lateral nav {
  display: flex;
  flex-direction: column;
}
.lateral nav a {
  padding: 6px var(--e4);
  text-decoration: none;
  color: var(--tx);
  border-left: 4px solid transparent;
  transition:
    background-color var(--dur) var(--curva),
    border-left-color var(--dur) var(--curva);
}
.lateral nav a:hover {
  background: var(--sf2);
}
.lateral nav a[aria-current="page"] {
  border-left-color: var(--ac);
  background: var(--bg);
  font-weight: 600;
}
/* Contagem de pendências na navegação — número, em mono, à direita. */
.lateral nav a .badge {
  float: right;
  font-family: var(--fm);
  font-size: 11px;
  color: var(--al);
}
/* Tela que ainda não existe: mesma linha do menu, apagada e sem cursor de link.
   Aparece no menu porque o menu é o mapa do sistema; não é link porque menu que
   leva a 404 ensina a não confiar no menu. */
.lateral nav .por-vir {
  padding: 6px var(--e4);
  border-left: 4px solid transparent;
  color: var(--t2);
  opacity: 0.6;
}

/* Rodapé da barra: quem está logado e a saída. Colado embaixo. */
.lateral-rodape {
  margin-top: auto;
  padding: 0 var(--e4);
  border-top: 1px solid var(--b);
  padding-top: var(--e3);
}

.conteudo {
  padding: var(--e6) var(--e8);
  max-width: 1400px;
}

/* ── seletor de loja ──────────────────────────────────────────────────── */

.lojas {
  display: flex;
  flex-direction: column;
  padding: 0 var(--e4);
  gap: 2px;
}
.lojas button {
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 3px var(--e2);
  border: 0;
  background: transparent;
  color: var(--t2);
}
.lojas button[aria-pressed="true"] {
  background: var(--tx);
  color: var(--bg);
}

/* ── frescor do dado ──────────────────────────────────────────────────── */

.frescor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  font-size: 12px;
  color: var(--t2);
  margin-bottom: var(--e4);
}
/* Solto, e não `.frescor .vencido`: a tela Financeiro já usava a classe fora da
   faixa de frescor desde a 2.6, sem efeito nenhum — o número que devia gritar
   saía cinza. A faixa de ADS usa a mesma marca no atraso do degrau. */
.vencido {
  color: var(--al);
  font-weight: 600;
}

/* Faixa de dado vencido — o estado mais importante do sistema. */
.aviso-vencido {
  border: 1px solid var(--al);
  border-left: 4px solid var(--al);
  background: var(--tint);
  padding: var(--e3);
  margin-bottom: var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e3);
}

/* ── tabela ───────────────────────────────────────────────────────────── */

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tabela th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t2);
  font-weight: 600;
  padding: var(--e2);
  background: var(--sf);
  border-bottom: 2px solid var(--b2);
  white-space: nowrap;
}
.tabela td {
  padding: 6px var(--e2);
  border-bottom: 1px solid var(--b);
}
.tabela tbody tr {
  /* Sem `background-color` declarado aqui de propósito: a linha zebrada e a
     linha marcada continuam mandando na cor. A transição só suaviza a troca. */
  transition: background-color var(--dur) var(--curva);
}
.tabela tbody tr:hover {
  background: var(--sf);
}
/* Divergência de preço acima do limite configurado. Célula, não linha. */
.tabela td.divergente {
  background: var(--hl);
}
/* ROAS alvo abaixo do equilíbrio: o erro mais caro, precisa saltar aos olhos. */
.tabela tr.critico td {
  box-shadow: inset 4px 0 0 var(--al);
}
.tabela tr.critico td:first-child {
  font-weight: 600;
}

/* ── status de margem ─────────────────────────────────────────────────── */

.status {
  display: inline-block;
  border-left: 4px solid var(--st-ok);
  padding-left: var(--e2);
  white-space: nowrap;
}
.status-prejuizo {
  border-left-color: var(--st-prejuizo);
  color: var(--al);
  font-weight: 600;
}
.status-baixa {
  border-left-color: var(--st-baixa);
}
.status-ok {
  border-left-color: var(--st-ok);
  color: var(--t2);
}
.status-ideal {
  border-left-color: var(--st-ideal);
}

/* ── botões ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px var(--e3);
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--tx);
  transition:
    background-color var(--dur) var(--curva),
    border-color var(--dur) var(--curva),
    color var(--dur) var(--curva),
    opacity var(--dur) var(--curva);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-primario {
  background: var(--ac);
  color: #fff;
}
.btn-primario:hover {
  background: var(--ac-600);
}
.btn-primario:active {
  background: var(--ac-700);
}
.btn-secundario {
  border-color: var(--b);
  background: var(--bg);
}
.btn-secundario:hover {
  background: var(--sf);
}
.btn-secundario:active {
  background: var(--sf2);
}
.btn-texto {
  color: var(--ac-700);
  padding-inline: var(--e1);
}
.btn-texto:hover {
  background: var(--tint);
}
/* Botão largo alinha o rótulo à esquerda — herdado do Modernist. */
.btn-bloco {
  width: 100%;
  justify-content: flex-start;
}

/* ── formulário ───────────────────────────────────────────────────────── */

.campo {
  margin-bottom: var(--e3);
}
.campo > label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: var(--e1);
}
.input {
  width: 100%;
  min-height: 34px;
  padding: 5px var(--e2);
  font: inherit;
  font-size: 14px;
  color: var(--tx);
  caret-color: var(--ac);
  background: var(--bg);
  border: 1px solid var(--b);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--curva);
}
/* Campo de valor é campo de número: mono, à direita. */
.input.num {
  text-align: right;
}
.input:hover {
  border-color: var(--t2);
}
.input:focus-visible {
  border-color: var(--ac);
  outline-offset: 0;
}
select.input {
  min-height: 34px;
}

/* Segmentado — abas da calculadora, visões do comparativo. */
.seg {
  display: inline-flex;
  border: 1px solid var(--b);
}
.seg button {
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 5px var(--e3);
  border: 0;
  background: var(--bg);
  color: var(--tx);
  transition:
    background-color var(--dur) var(--curva),
    color var(--dur) var(--curva);
}
.seg button + button {
  border-left: 1px solid var(--b);
}
.seg button[aria-pressed="true"] {
  background: var(--ac);
  color: #fff;
  font-weight: 600;
}
.seg button:not([aria-pressed="true"]):hover {
  background: var(--sf);
}

/* ── painéis e blocos ─────────────────────────────────────────────────── */

.bloco {
  margin-bottom: var(--e6);
}
.bloco > h2 {
  border-left: 4px solid var(--ac);
  padding-left: var(--e3);
}

.painel {
  background: var(--sf);
  border: 1px solid var(--b);
  padding: var(--e4);
}

/* Número grande — resultado da calculadora, resumo do financeiro. */
.destaque {
  font-family: var(--fm);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
}

/* Painel lateral de detalhe. Nunca modal para isso. */
.gaveta {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  background: var(--bg);
  border-left: 2px solid var(--b2);
  box-shadow: -12px 0 32px #2d2b2b22;
  overflow-y: auto;
  padding: var(--e6);
}

/* Zona morta e outros alertas de cálculo. */
.alerta {
  border: 1px solid var(--al);
  border-left: 4px solid var(--al);
  background: var(--tint);
  padding: var(--e3);
  margin: var(--e3) 0;
}
.alerta strong {
  display: block;
  color: var(--al);
}

/* Barra de progresso de plano de ação. Sem gradiente. */
.progresso {
  height: 8px;
  background: var(--sf2);
  border: 1px solid var(--b);
}
.progresso > span {
  display: block;
  height: 100%;
  background: var(--ac);
}

/* Escada de ROAS — degraus horizontais, o atual preenchido no acento (§4.6). */
.escada {
  display: flex;
  gap: var(--e1);
  margin-bottom: var(--e3);
}
.escada .degrau {
  flex: 1;
  border: 1px solid var(--b);
  padding: var(--e2);
  background: var(--bg);
}
.escada .degrau[data-atual="true"] {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac);
}
/* O `.rotulo` do degrau atual herdaria o cinza da regra global e sumiria contra
   o vermelho. `currentColor` mantém a hierarquia (rótulo discreto, número forte)
   sem fixar uma segunda cor. */
.escada .degrau[data-atual="true"] .rotulo {
  color: currentColor;
  opacity: 0.75;
}

/* ── calculadora ──────────────────────────────────────────────────────── */
/* Duas colunas: entrada à esquerda, resultado à direita (telas-design.md §4.4).
   A entrada é estreita e fixa — são cinco campos curtos —, e o resultado fica
   com o resto, porque é ele que tem tabela. */

.calculadora {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--e6);
  align-items: start;
}

/* O preço sugerido: número grande, mono, com a faixa vermelha lateral. */
.resultado .destaque {
  margin: var(--e1) 0;
}

/* Até 3 colunas de entrada, lado a lado, no modo Comparação. */
.comparacao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e4);
}
.comparacao .coluna {
  border-left: 1px solid var(--b);
  padding-left: var(--e3);
}
.comparacao .coluna:first-child {
  border-left: 0;
  padding-left: 0;
}

/* Botão que só existe para quem não tem script: com HTMX o cálculo já acontece
   a cada tecla, e um botão que não faz nada é pior que botão nenhum. A classe
   `htmx-ativo` entra no <html> pelo próprio htmx.js quando ele carrega. */
.htmx-ativo .sem-htmx {
  display: none;
}

@media (max-width: 860px) {
  .calculadora {
    grid-template-columns: 1fr;
  }
}

/* ── importação ───────────────────────────────────────────────────────── */

/* Área de soltar arquivo. Grande porque é a ação principal da tela, e sem
   ilustração porque o desenho não usa nenhuma. */
.solta {
  border: 1px dashed var(--b);
  background: var(--bg);
}
.solta .input[type="file"] {
  padding: var(--e4);
  cursor: pointer;
}
.solta p {
  margin: var(--e3) 0;
  color: var(--t2);
}

/* Avisos da prévia. Grave é o que impede gravar — em --al e negrito, como todo
   estado que exige ação. */
.avisos {
  margin: 0;
  padding-left: var(--e4);
}
.avisos li {
  margin-bottom: var(--e1);
}
.avisos li.grave {
  color: var(--al);
  font-weight: 600;
}

.linha-de-acao {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e3);
}

.aviso-da-linha {
  font-size: 12px;
  border-bottom: 1px solid var(--b);
}

/* Upload na própria linha da tela Hoje. Campo estreito: a linha é densa e o
   nome do arquivo não é o conteúdo. */
.arquivo-na-linha {
  width: auto;
  max-width: 220px;
  font-size: 12px;
}

/* A prévia aberta embaixo da linha da fonte. Tintada para separar do resto da
   tabela sem virar cor de fundo cheia em linha (design-system.md › Proibido). */
.linha-de-previa > td {
  background: var(--tint);
}
.previa-na-linha {
  border-left: 4px solid var(--ac);
  padding: var(--e3);
}
.previa-na-linha .tabela {
  background: var(--bg);
  margin: var(--e2) 0;
}

/* ── tarefas ──────────────────────────────────────────────────────────── */

.cabecalho-de-tela {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
}

/* "Fecha sozinha quando a planilha de ADS da Stella for importada". Texto
   pequeno sob o título — é o que faz a lista ser confiável sem ninguém marcar. */
.condicao {
  font-size: 12px;
  max-width: 60ch;
}

/* Origem da tarefa: sistema, agente, manual. Letra curta, sem pílula. */
abbr[title] {
  text-decoration: none;
  border-bottom: 1px dotted var(--b);
  cursor: help;
}

/* ── estados ──────────────────────────────────────────────────────────── */

.vazio {
  padding: var(--e6);
  color: var(--t2);
  border: 1px dashed var(--b);
  display: flex;
  align-items: center;
  gap: var(--e4);
}

/* Esqueleto de carregamento. Sem spinner central. */
.esqueleto td > span {
  display: block;
  height: 12px;
  background: var(--sf2);
}

.erro {
  border-left: 4px solid var(--al);
  background: var(--tint);
  color: var(--al);
  padding: var(--e3);
  margin-bottom: var(--e4);
}

/* ── login ────────────────────────────────────────────────────────────── */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.login form {
  width: 320px;
  border-left: 4px solid var(--ac);
  padding-left: var(--e6);
}

/* ── responsivo ───────────────────────────────────────────────────────── */
/* Desktop é o alvo. No celular só Hoje, Tarefas e Calculadora simples
   precisam funcionar bem — as demais rolam horizontalmente. */

@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
  }
  .lateral {
    border-right: 0;
    border-bottom: 2px solid var(--b2);
  }
  .lateral nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .conteudo {
    padding: var(--e4);
    overflow-x: auto;
  }
}

/* ── carregando ───────────────────────────────────────────────────────── */
/* O estado que `design-system.md` lista como obrigatório e que até aqui era
   CSS sem ninguém do outro lado: `.htmx-indicator` existia e nenhum template
   pedia por ele.
 *
 * Quem pede é o `hx-indicator` no <body> do esqueleto — atributo do HTMX que
 * os filhos herdam —, então toda requisição do sistema acende a mesma barra,
 * inclusive as que forem escritas depois. Um `hx-indicator` por elemento seria
 * a mesma coisa repetida sete vezes e esquecida na oitava. */

.htmx-indicator {
  opacity: 0;
  transition: opacity var(--dur) var(--curva);
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Barra de 2px no topo, acento, largura indeterminada: o servidor não informa
   progresso, e barra que finge saber a porcentagem mente. Fica acima de tudo e
   não bloqueia clique — a tela continua utilizável enquanto o bloco carrega. */
.progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 100;
  pointer-events: none;
  background: var(--tint);
  overflow: hidden;
}
.progresso::after {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  background: var(--ac);
  animation: progresso-desliza 1s var(--curva) infinite;
}
@keyframes progresso-desliza {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(350%);
  }
}

/* O que a pessoa clicou fica visivelmente ocupado: sem isto o segundo clique
   dispara a segunda requisição, e em `POST /hoje/confirmar` isso é uma
   importação gravada duas vezes. O índice único parcial barra de fato, mas o
   recado que chega à tela vira erro de banco em vez de "já foi".
 *
 * `[disabled]` e não `.htmx-request`: com `hx-indicator` apontando para a
 * barra, o HTMX põe a classe `htmx-request` **só** no indicador — quem marca o
 * elemento que disparou é `hx-disabled-elt`, e o que ele faz é `setAttribute`.
 * Em <button> o atributo já desabilita sozinho; em <form> não existe efeito
 * nativo, e é daí que vem a regra abaixo. */
form[disabled] {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* ── filtros de tabela ────────────────────────────────────────────────── */
/* Links, não formulário: cada filtro é uma URL, e o botão voltar funciona. */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin-bottom: var(--e4);
}
.filtros .btn {
  border: 1px solid var(--b);
  text-decoration: none;
  font-weight: 400;
}
.filtros .btn[aria-pressed="true"] {
  background: var(--tx);
  color: var(--bg);
  border-color: var(--tx);
  font-weight: 600;
}

/* ── variação contra o período anterior ───────────────────────────────── */
/* Pequena, em mono, com sinal (telas-design.md §4.8). Ao lado do número, nunca
   no lugar dele: o valor é o dado, a variação é o contexto. */

.variacao {
  font-size: 11px;
  margin-left: var(--e1);
}
.variacao.sobe {
  color: var(--pos);
}
.variacao.desce {
  color: var(--al);
}

/* ── resumo em números grandes ────────────────────────────────────────── */
/* O topo da tela Financeiro (telas-design.md §4.7): quatro painéis lado a lado,
   número grande em mono. Sem gráfico — o número é o conteúdo. */

.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}

/* ── movimento reduzido ───────────────────────────────────────────────── */
/* Quem pediu ao sistema operacional para reduzir movimento perde a animação e
   mantém a informação: a barra de carregamento continua visível, parada. É a
   contrapartida de ter movimento no sistema — sem esta regra, "micro-interação"
   vira barreira para quem tem enxaqueca vestibular. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .progresso::after {
    width: 100%;
    animation: none;
  }
}