:root {
  --fundo: #f7f4f6;
  --superficie: #ffffff;
  --superficie-2: #f6eff3;
  --texto: #4a4a4a;
  --texto-forte: #3a3537;
  --suave: #7a7076;
  --linha: #ece3e8;
  --rosa: #f064a5;
  --rosa-texto: #c2407c;
  --rosa-suave: #fdebf3;
  --verde: #2f7d52;
  --verde-suave: #e8f5ed;
  --vermelho: #c0392b;
  --vermelho-suave: #fdecea;
  --amarelo: #9a6512;
  --amarelo-suave: #fdf3e1;
  --azul: #3d6fb6;
  --sombra: 0 1px 2px rgba(58, 30, 45, .06), 0 4px 14px rgba(58, 30, 45, .05);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 15px/1.55 "Nunito Sans", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: "Nunito", "Nunito Sans", sans-serif; color: var(--texto-forte); line-height: 1.25; margin: 0; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }
b, strong { font-weight: 600; color: var(--texto-forte); }
a { color: var(--rosa-texto); }
code { font: 600 .9em ui-monospace, Consolas, monospace; background: var(--superficie-2); padding: 1px 6px; border-radius: 5px; color: var(--texto-forte); }

.topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.topo__marca { display: flex; align-items: baseline; gap: 8px; }
.topo__logo { font-family: "Nunito", sans-serif; font-size: 20px; font-weight: 700; color: var(--rosa); }
.topo__produto { color: var(--suave); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.topo__nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.topo__nav a { padding: 7px 12px; border-radius: 999px; color: var(--texto); text-decoration: none; font-weight: 600; font-size: 14px; }
.topo__nav a:hover { background: var(--superficie-2); }
.topo__nav a.ativo { background: var(--rosa-suave); color: var(--rosa-texto); }
.topo__usuario { display: flex; align-items: center; gap: 10px; color: var(--suave); font-size: 13px; }

.pagina { max-width: 1180px; margin: 0 auto; padding: 24px 24px 64px; }
.carregando { color: var(--suave); }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cabeca p { margin: 4px 0 0; color: var(--suave); }
.secao { margin-top: 28px; }
.secao > h2 { margin-bottom: 12px; }

.cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); }
.cartao__rotulo { color: var(--suave); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.cartao__valor { margin-top: 4px; font-family: "Nunito", sans-serif; font-size: 24px; font-weight: 700; color: var(--texto-forte); font-variant-numeric: tabular-nums; }
.cartao__nota { margin-top: 2px; color: var(--suave); font-size: 13px; }
.cartao--alerta { border-color: #f3c3bd; background: var(--vermelho-suave); }

.faixa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; }
.faixa--amarela { background: var(--amarelo-suave); border: 1px solid #f2d9a6; color: var(--amarelo); }
.faixa--vermelha { background: var(--vermelho-suave); border: 1px solid #f3c3bd; color: var(--vermelho); }

.quadro { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; box-shadow: var(--sombra); }
.tabela { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { background: var(--superficie-2); color: var(--suave); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
th button { all: unset; cursor: pointer; }
th button[aria-sort] { color: var(--rosa-texto); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover td { background: #fcf8fa; }
.vazio { padding: 22px; text-align: center; color: var(--suave); }

.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--superficie-2); color: var(--suave); white-space: nowrap; }
.etiqueta--verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta--vermelha { background: var(--vermelho-suave); color: var(--vermelho); }
.etiqueta--amarela { background: var(--amarelo-suave); color: var(--amarelo); }
.etiqueta--rosa { background: var(--rosa-suave); color: var(--rosa-texto); }
.mais { color: var(--verde); }
.menos { color: var(--vermelho); }

.botao { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid transparent; border-radius: 999px; background: var(--rosa); color: #fff; font: 600 14px "Nunito Sans", sans-serif; cursor: pointer; text-decoration: none; }
.botao:hover { filter: brightness(.96); }
.botao:disabled { opacity: .5; cursor: default; }
.botao--leve { background: var(--superficie); color: var(--texto); border-color: var(--linha); }
.botao--pequeno { padding: 4px 10px; font-size: 13px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

input, select, textarea { font: inherit; color: var(--texto-forte); background: var(--superficie); border: 1px solid #ddd2d8; border-radius: 10px; padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rosa-suave); border-color: var(--rosa); }
textarea { width: 100%; min-height: 160px; font: 13px/1.5 ui-monospace, Consolas, monospace; }
label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--texto-forte); }
label small { font-weight: 400; color: var(--suave); }
label.linha { display: flex; align-items: center; gap: 8px; }
.formulario { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.formulario .inteira { grid-column: 1 / -1; }
.formulario > label:not(.linha) { align-self: end; }
.busca { display: flex; gap: 8px; margin-bottom: 14px; }
.busca input { flex: 1; min-width: 0; }

.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ficha__topo { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ficha__contato { color: var(--suave); margin-top: 4px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin: 22px 0 12px; }
.abas button { all: unset; cursor: pointer; padding: 8px 14px; font-weight: 600; color: var(--suave); border-bottom: 2px solid transparent; }
.abas button[aria-selected="true"] { color: var(--rosa-texto); border-color: var(--rosa); }

.grafico { width: 100%; height: auto; display: block; }
.legenda { display: flex; gap: 16px; font-size: 13px; color: var(--suave); margin-top: 6px; flex-wrap: wrap; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.login { max-width: 380px; margin: 10vh auto; }
.login form { display: grid; gap: 14px; }
.aviso { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: 360px; padding: 12px 16px; border-radius: 12px; background: var(--texto-forte); color: #fff; box-shadow: var(--sombra); }
.aviso--erro { background: var(--vermelho); }
.ajuda { color: var(--suave); font-size: 13px; }
.previa { border: 1px solid var(--linha); border-radius: 12px; padding: 14px; background: #fff; max-height: 380px; overflow: auto; }

@media (max-width: 900px) {
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulario, .duas { grid-template-columns: minmax(0, 1fr); }
  .topo { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .pagina { padding: 18px 16px 48px; }
}