/* Painel Jappa da Quitanda — marrom e coral das artes do Jappa, Bricolage como nas peças */
:root {
  --tinta: #3b3326;
  --papel: #faf3ea;
  --cartao: #ffffff;
  --ouro: #e5643f;
  --ouro-claro: #fbe3d9;
  --mudo: #6a6157;
  --linha: #e8ddd0;
  --bom: #2f7d4f;
  --ruim: #b5452f;
  --titulo: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --texto: 'Public Sans', 'Segoe UI', sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.5 var(--texto); }
a { color: var(--ouro); }

.topo { background: var(--tinta); color: #fff; }
.topo-in { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topo img { width: 52px; height: 52px; border-radius: 50%; background: #fbe8dd; object-fit: cover; }
.topo h1 { font: 600 24px/1 var(--titulo); letter-spacing: .02em; margin: 0; }
.topo h1 small { display: block; font: 400 12px/1.4 var(--texto); color: #f2b9a4; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.filtros { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros select, .filtros input { background: #4a4034; color: #fff; border: 1px solid #6a5c4b; border-radius: 6px; padding: 7px 10px; font: inherit; }
.filtros a { color: #f2b9a4; font-size: 13px; text-decoration: none; }

main { max-width: 1280px; margin: 0 auto; padding: 24px; display: grid; gap: 28px; }
.status { font-size: 13px; color: var(--mudo); display: flex; gap: 16px; flex-wrap: wrap; }
.status .erro { color: var(--ruim); }

h2 { font: 600 20px/1.2 var(--titulo); margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
h2::after { content: ''; flex: 1; border-bottom: 1px solid var(--linha); }
.nota { font-size: 13px; color: var(--mudo); margin: -6px 0 12px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; }
.kpi span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); }
.kpi b { display: block; font: 600 28px/1.1 var(--titulo); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: 12px; color: var(--mudo); }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 16px; min-width: 0; }
.cartao h3 { font: 600 16px/1.2 var(--titulo); margin: 0 0 10px; }
.grafico { position: relative; height: 260px; }

.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; }
th { font-weight: 600; color: var(--mudo); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
td.n, th.n { text-align: right; }
td.longo { white-space: normal; min-width: 220px; }
.selo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ouro-claro); color: #a3401f; }
.selo.meta { background: #e3e9f6; color: #2f4a8a; }
.selo.google { background: #f6ecd8; color: #7a5410; }
.vazio { color: var(--mudo); font-size: 13px; padding: 24px 0; text-align: center; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--tinta); padding: 24px; }
.login form { background: var(--papel); border-radius: 12px; padding: 32px; width: min(360px, 100%); display: grid; gap: 14px; text-align: center; }
.login img { width: 120px; margin: 0 auto; }
.login input { padding: 10px 12px; border: 1px solid var(--linha); border-radius: 6px; font: inherit; }
.login button { padding: 10px; border: 0; border-radius: 6px; background: var(--tinta); color: #fff; font: 600 15px var(--texto); cursor: pointer; }
.login button:hover { background: var(--ouro); }
.login .erro { color: var(--ruim); font-size: 13px; }

@media (max-width: 640px) {
  main { padding: 16px; }
  .topo-in { padding: 12px 16px; }
  .filtros { margin-left: 0; width: 100%; }
}