/* Pedido Fácil · Painel Master v1.0.0 */
:root {
  --fundo: #f5f7f6; --cartao: #ffffff; --borda: #e2e8e5; --texto: #14211b; --mudo: #5f7068;
  --verde: #0f9d58; --verde-escuro: #0b7a44; --verde-claro: #e6f6ee;
  --amarelo: #a86b00; --amarelo-claro: #fff4dc; --vermelho: #c62828; --vermelho-claro: #fdeaea;
  --azul: #1f5fbf; --azul-claro: #e8f0fc; --cinza-claro: #eef1f0;
  --raio: 12px; --sombra: 0 1px 2px rgba(20, 33, 27, .06);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif; }
a { color: var(--verde-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 26px; margin: 4px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
h2 { font-size: 17px; margin: 0 0 14px; }
.mt { margin-top: 28px; }
.mudo { color: var(--mudo); }
.peq { font-size: 13px; }
.forte { font-weight: 600; color: var(--texto); }
.dir { text-align: right; }
.txt-erro { color: var(--vermelho); }

.topo { background: #0e1b14; color: #fff; }
.topo-in { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.marca { color: #fff; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.marca:hover { text-decoration: none; }
.marca-ic { background: #3ee08a; color: #0e1b14; border-radius: 8px; padding: 3px 7px; font-size: 13px; }
.topo nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topo nav a { color: #c7d8cf; padding: 6px 12px; border-radius: 8px; }
.topo nav a:hover { background: #1b3126; text-decoration: none; }
.topo nav a.ativo { background: #1f3a2c; color: #fff; }
.topo nav a.sair { color: #8fa79a; }

.conteudo { max-width: 1180px; margin: 0 auto; padding: 24px 20px 48px; }
.rodape { text-align: center; color: var(--mudo); font-size: 12px; padding: 20px; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra); margin-bottom: 20px; }
.cartao.estreito { max-width: 420px; margin: 40px auto; }
.cartao.vazio { text-align: center; padding: 48px 22px; }
.cartao.destaque { border: 2px solid var(--verde); background: var(--verde-claro); }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.numero { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); }
.numero span { display: block; color: var(--mudo); font-size: 13px; }
.numero strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.numero.alerta { border-color: #f3c3c3; background: var(--vermelho-claro); }
.numero.alerta strong { color: var(--vermelho); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--verde); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.botao:hover { background: var(--verde-escuro); text-decoration: none; }
.botao.sec { background: #fff; color: var(--texto); border: 1px solid var(--borda); }
.botao.sec:hover { background: var(--cinza-claro); }
.botao.perigo { background: #fff; color: var(--vermelho); border: 1px solid #f0c2c2; }
.botao.perigo:hover { background: var(--vermelho-claro); }
.botao.peq { padding: 6px 12px; font-size: 13px; }
.link-perigo { background: none; border: 0; color: var(--vermelho); cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes form { margin: 0; }
.acoes.fim { justify-content: flex-end; flex-wrap: nowrap; }

.aviso { border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; border: 1px solid; }
.aviso-ok { background: var(--verde-claro); border-color: #b9e6cd; color: #0b5e35; }
.aviso-erro { background: var(--vermelho-claro); border-color: #f3c3c3; color: #8e1c1c; }
.aviso-info { background: var(--azul-claro); border-color: #c5d7f5; color: #1b4a92; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.form.grade h2 { margin: 10px 0 0; }
.col-2 { grid-column: 1 / -1; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #33443c; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.form input, .form select, .form textarea, .filtros input, input[type=month] {
  font: inherit; font-weight: 400; color: var(--texto); background: #fff; border: 1px solid #cdd8d2; border-radius: 9px; padding: 9px 11px; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus, .filtros input:focus { outline: 2px solid #9fdcbc; border-color: var(--verde); }
.form label.check input { width: auto; }
.sufixo { display: flex; align-items: stretch; }
.sufixo input { border-radius: 9px 0 0 9px; }
.sufixo em { font-style: normal; font-weight: 400; color: var(--mudo); background: var(--cinza-claro); border: 1px solid #cdd8d2; border-left: 0; border-radius: 0 9px 9px 0; padding: 9px 10px; white-space: nowrap; }
.lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rodape-form { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

.filtros { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros input[type=search] { max-width: 320px; }
.abas { display: flex; gap: 4px; background: #e9eeeb; padding: 4px; border-radius: 10px; flex-wrap: wrap; }
.abas a { padding: 6px 12px; border-radius: 8px; color: var(--mudo); font-size: 14px; }
.abas a:hover { text-decoration: none; color: var(--texto); }
.abas a.ativo { background: #fff; color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }

.tabela-wrap { overflow-x: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao .tabela-wrap { border: 0; box-shadow: none; }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mudo); padding: 12px 14px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela th.dir, .tabela td.dir { text-align: right; }
.tabela.compacta td, .tabela.compacta th { padding: 8px 6px; }

.selo { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.selo-em_dia { background: var(--verde-claro); color: #0b5e35; }
.selo-vence_logo { background: var(--amarelo-claro); color: var(--amarelo); }
.selo-teste { background: var(--azul-claro); color: var(--azul); }
.selo-atrasada { background: #ffe9d6; color: #b4500c; }
.selo-bloqueada, .selo-suspensa { background: var(--vermelho-claro); color: var(--vermelho); }
.selo-cancelada { background: var(--cinza-claro); color: var(--mudo); }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.duas-colunas .cartao { margin-bottom: 0; }
.mensagem { white-space: pre-wrap; background: #fff; border: 1px solid #b9e6cd; border-radius: 10px; padding: 14px; font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; margin: 0 0 14px; }
.historico { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.historico li { padding: 6px 0; border-bottom: 1px solid var(--borda); }
.historico li:last-child { border-bottom: 0; }

.barras { display: flex; align-items: flex-end; gap: 14px; height: 190px; }
.barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; color: var(--mudo); }
.barra:hover { text-decoration: none; }
.barra .col { width: 100%; max-width: 64px; background: #b9e6cd; border-radius: 6px 6px 0 0; }
.barra.ativa .col { background: var(--verde); }
.barra.ativa .rot { color: var(--texto); font-weight: 600; }
.barra .valor { font-size: 12px; white-space: nowrap; }
.barra .rot { font-size: 13px; }

@media (max-width: 820px) {
  .form.grade, .duas-colunas, .lado { grid-template-columns: 1fr; }
  .barra .valor { display: none; }
  h1 { font-size: 22px; }
}