/* Dashboard (início do lojista e do admin), extrato e clientes. */
.grafico__grad-topo { stop-color: var(--primaria); stop-opacity: .38; }
.grafico__grad-base { stop-color: var(--primaria); stop-opacity: 0; }
.grafico__linha { fill: none; stroke: var(--primaria); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.grafico__ponto { fill: var(--primaria); stroke: var(--superficie); stroke-width: 1.5; }
.grafico__foco { fill: var(--superficie); stroke: var(--primaria); stroke-width: 3; }
.grafico__grade { stroke: var(--borda); stroke-width: 1; }
.grafico__guia { stroke: var(--borda-forte); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico__eixo { fill: var(--texto-3); font-size: 11px; font-family: inherit; }
.grafico__captura { cursor: crosshair; touch-action: pan-y; }
.grafico__dica-titulo { color: var(--texto-2); margin-bottom: 2px; }
.grafico__dica div + div { font-weight: 650; color: var(--texto); }

.resumo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; }
.resumo__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumo__texto h1 { font-size: 1.25rem; }
.resumo__acoes { display: flex; align-items: center; gap: 8px; }
.resumo__acoes select.entrada { height: 36px; min-width: 150px; }

.estat__variacao { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.estat__variacao .icone { width: 13px; height: 13px; }
.estat__variacao.negativo .icone { transform: scaleY(-1); }

.atalhos { display: grid; gap: 10px; }
.atalho {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--raio-p); border: 1px solid var(--borda);
  background: var(--superficie-2); color: var(--texto); text-decoration: none; transition: border-color .12s, background .12s;
}
.atalho:hover { border-color: var(--primaria); background: var(--primaria-suave); text-decoration: none; }
.atalho__icone { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--primaria-suave); color: var(--primaria); flex: none; }
.atalho__texto { display: flex; flex-direction: column; min-width: 0; }
.atalho__texto small { color: var(--texto-2); font-size: 12px; }
.atalho > .icone:last-child { margin-left: auto; color: var(--texto-3); }

.movimento { display: flex; align-items: center; gap: 10px; min-width: 0; }
.movimento__icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); flex: none; }
.movimento__icone--entrada { background: var(--sucesso-suave); color: var(--sucesso); }
.movimento__icone--saida { background: var(--perigo-suave); color: var(--perigo); }
.movimento__icone .icone { width: 16px; height: 16px; }
.movimento__texto { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.movimento__texto small { color: var(--texto-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.totais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.carregar-mais { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--borda); }

.perfil-cliente { display: flex; align-items: center; gap: 14px; }
.perfil-cliente .avatar { width: 48px; height: 48px; font-size: 16px; cursor: default; }
.mini-estat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-estat > div { padding: 12px 14px; border-radius: var(--raio-p); background: var(--superficie-2); border: 1px solid var(--borda); }
.mini-estat small { display: block; color: var(--texto-2); font-size: 12px; }
.mini-estat strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.lista-simples { display: flex; flex-direction: column; }
.lista-simples > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.lista-simples > div:last-child { border-bottom: 0; }

@media (max-width: 720px) {
  .resumo { padding: 16px; }
  .resumo__acoes { width: 100%; }
  .resumo__acoes select.entrada { flex: 1; min-width: 0; }
  .totais { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tabela--cartoes td .movimento { justify-content: flex-end; }
}