/* ============================================================
   SOLUÇÕES CONTÁBEIS ERP — estilo compartilhado das telas
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --grad-a: #667eea;
  --grad-b: #764ba2;
  --fundo: #f4f5fb;
  --card: #ffffff;
  --borda: #e6e8f0;
  --tinta: #1f2430;
  --tinta-2: #5c6370;
  --tinta-3: #8a90a0;
  --acento: #667eea;
  /* status — sempre acompanhados de rótulo em texto */
  --st-pendente-bg: #fef3c7;  --st-pendente-ink: #92400e;
  --st-andamento-bg: #dbeafe; --st-andamento-ink: #1e40af;
  --st-concluido-bg: #dcfce7; --st-concluido-ink: #166534;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fundo);
  color: var(--tinta);
  min-height: 100vh;
}

/* topo */
.topo {
  background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%);
  color: #fff;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.topo .marca { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.topo nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topo nav a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.topo nav a:hover { background: rgba(255,255,255,.15); color: #fff; }
.topo nav a.ativo { background: rgba(255,255,255,.22); color: #fff; }
.topo .saude { margin-left: auto; font-size: 13px; opacity: .9; }

.pagina { max-width: 1200px; margin: 0 auto; padding: 24px 20px 48px; }
h1.titulo { font-size: 22px; margin-bottom: 4px; }
p.subtitulo { color: var(--tinta-2); font-size: 14px; margin-bottom: 24px; }

/* cartões e tiles */
.cartao {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 20px;
}
.grade-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.tile .rotulo { font-size: 13px; color: var(--tinta-2); margin-bottom: 6px; }
.tile .valor { font-size: 28px; font-weight: 700; line-height: 1.1; }
.tile .nota { font-size: 12px; color: var(--tinta-3); margin-top: 6px; }

/* tabela */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--tinta-2); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 10px 12px; border-bottom: 2px solid var(--borda); }
td { padding: 10px 12px; border-bottom: 1px solid var(--borda); }
tr:hover td { background: #f8f9fe; }

/* controles */
.controles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.controles input[type="search"], .controles select {
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: var(--tinta);
}
.controles input[type="search"] { min-width: 260px; }
.btn {
  padding: 9px 16px; border: none; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; background: var(--acento); color: #fff;
}
.btn:hover { filter: brightness(1.06); }
.btn.claro { background: #eef0fb; color: var(--acento); }

/* selos de status (cor + texto, nunca só cor) */
.selo { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.selo.pendente  { background: var(--st-pendente-bg);  color: var(--st-pendente-ink); }
.selo.andamento { background: var(--st-andamento-bg); color: var(--st-andamento-ink); }
.selo.concluido { background: var(--st-concluido-bg); color: var(--st-concluido-ink); }
.selo.neutro    { background: #eef0f4; color: var(--tinta-2); }

/* kanban */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 800px) { .kanban { grid-template-columns: 1fr; } }
.coluna { background: #eceef6; border-radius: 12px; padding: 12px; }
.coluna h3 { font-size: 14px; margin: 4px 4px 12px; display: flex; justify-content: space-between; color: var(--tinta-2); }
.cartao-kanban {
  background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px; margin-bottom: 10px;
}
.cartao-kanban .nome { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.cartao-kanban .meta { font-size: 12px; color: var(--tinta-3); margin-bottom: 8px; }
.cartao-kanban .acoes { display: flex; gap: 6px; }
.cartao-kanban .acoes button {
  border: 1px solid var(--borda); background: #f8f9fe; color: var(--tinta-2);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-weight: 600;
}
.cartao-kanban .acoes button:hover { border-color: var(--acento); color: var(--acento); }

/* barras horizontais (série única) */
.barras .linha-barra { display: grid; grid-template-columns: 150px 1fr 40px; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.barras .trilho { background: #eef0f4; border-radius: 4px; height: 18px; position: relative; }
.barras .preenchido { background: var(--acento); border-radius: 4px 4px 4px 4px; height: 100%; min-width: 2px; }
.barras .qtde { color: var(--tinta-2); text-align: right; font-variant-numeric: tabular-nums; }

.aviso { background: #fef3c7; color: #92400e; border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; display: none; }
.secao { margin-bottom: 24px; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; } }
.paginacao { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 14px; font-size: 13px; color: var(--tinta-2); }