:root {
  --fundo: #f3f5f7; --papel: #fff; --texto: #1d2733; --mudo: #6b7683; --borda: #dde3ea;
  --verde: #168821; --vermelho: #c62828; --ambar: #d98c00; --azul: #1351b4; --cinza: #8a949e;
  --verde-fraco: #e6f4e8; --vermelho-fraco: #fdecea; --ambar-fraco: #fff4dd; --azul-fraco: #e7eef9; --cinza-fraco: #eef0f2;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; background: var(--fundo); color: var(--texto); font-size: 14px; }
a { color: var(--azul); }
.oculto { display: none !important; }
.mudo { color: var(--mudo); }
.erro { color: var(--vermelho); }
.ok { color: var(--verde); }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.topo { display: flex; align-items: center; gap: 24px; background: #071d41; color: #fff; padding: 8px 20px; position: sticky; top: 0; z-index: 20; }
.marca { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.marca .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); display: inline-block; }
.abas { display: flex; gap: 4px; flex: 1; }
.abas a { color: #cfd8e3; text-decoration: none; padding: 8px 12px; border-radius: 6px; }
.abas a.ativa, .abas a:hover { background: rgba(255,255,255,.12); color: #fff; }
.usuario { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.15); text-transform: uppercase; }
.tag.homologacao { background: var(--ambar); color: #000; }
.cabecalho { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 12px; padding: 14px 20px 0; }
.cartao { background: var(--papel); border: 1px solid var(--borda); border-left: 5px solid var(--cinza); border-radius: 8px; padding: 10px 12px; min-height: 84px; }
.cartao .rotulo { font-size: 12px; color: var(--mudo); text-transform: uppercase; letter-spacing: .3px; }
.cartao .valor { font-size: 16px; font-weight: 600; margin-top: 4px; }
.cartao .valor small { display: block; font-size: 12px; font-weight: normal; color: var(--mudo); margin-top: 2px; }
.cartao .acao { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.cartao.verde { border-left-color: var(--verde); } .cartao.vermelho { border-left-color: var(--vermelho); background: var(--vermelho-fraco); }
.cartao.ambar { border-left-color: var(--ambar); } .cartao.cinza { border-left-color: var(--cinza); }
.cartao.alertas ul { list-style: none; margin: 0; padding: 0; font-size: 13px; font-weight: normal; }
.cartao.alertas li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px dashed var(--borda); }
.cartao.alertas li.alta { color: var(--vermelho); }
main { padding: 14px 20px 40px; }
.painel { background: var(--papel); border: 1px solid var(--borda); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.painel h2 { margin: 0 0 10px; font-size: 16px; }
.painel h3 { margin: 12px 0 6px; font-size: 14px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 10px; }
.filtros label { display: flex; flex-direction: column; font-size: 12px; color: var(--mudo); gap: 3px; }
input, select, textarea { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; background: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: 12px; color: var(--mudo); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
tr.clicavel { cursor: pointer; } tr.clicavel:hover { background: var(--azul-fraco); }
tr.precisa-acao td:first-child { border-left: 4px solid var(--ambar); }
.estado { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.estado.concluido { background: var(--verde-fraco); color: var(--verde); }
.estado.cancelada { background: var(--cinza-fraco); color: var(--mudo); }
.estado.pendente, .estado.processando, .estado.enviando { background: var(--azul-fraco); color: var(--azul); }
.estado.aguardando_aprovacao { background: var(--ambar-fraco); color: var(--ambar); }
.estado.erro_dados, .estado.erro_layout, .estado.revisao_humana, .estado.enviada_sem_comprovante, .estado.erro_recuperavel { background: var(--vermelho-fraco); color: var(--vermelho); }
.btn { border: 1px solid var(--borda); background: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; color: var(--texto); }
.btn:hover { background: var(--cinza-fraco); }
.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; } .btn.primario:hover { background: #0f4396; }
.btn.perigo { color: var(--vermelho); border-color: var(--vermelho); }
.btn.sucesso { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.pequeno { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1100px) { .cabecalho { grid-template-columns: 1fr 1fr; } .grade2, .grade3 { grid-template-columns: 1fr; } }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--borda); }
.linha-tempo li { position: relative; padding: 4px 0 10px 12px; }
.linha-tempo li::before { content: ""; position: absolute; left: -24px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); }
.linha-tempo .meta { font-size: 12px; color: var(--mudo); }
.miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.miniatura { width: 150px; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; background: #fff; font-size: 11px; }
.miniatura img { width: 100%; height: 95px; object-fit: cover; object-position: top; display: block; cursor: zoom-in; }
.miniatura .legenda { padding: 4px 6px; color: var(--mudo); }
tr.divergente td { background: var(--vermelho-fraco); color: var(--vermelho); }
.diag { background: var(--ambar-fraco); border: 1px solid var(--ambar); border-radius: 8px; padding: 10px 12px; }
details summary { cursor: pointer; color: var(--azul); }
pre { background: #0f172a; color: #e2e8f0; padding: 10px; border-radius: 6px; overflow: auto; font-size: 12px; max-height: 400px; }
.logs { font-family: Consolas, monospace; font-size: 12px; background: #0f172a; color: #e2e8f0; padding: 10px; border-radius: 6px; height: 65vh; overflow: auto; }
.logs .warn { color: #fbbf24; } .logs .error, .logs .fatal { color: #f87171; } .logs .info { color: #a5f3fc; } .logs .modulo { color: #94a3b8; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-caixa { background: #fff; border-radius: 10px; padding: 18px 20px; width: min(720px, 94vw); max-height: 90vh; overflow: auto; }
.modal-caixa h3 { margin-top: 0; }
.modal-caixa img, .modal-caixa iframe { max-width: 100%; }
.login { position: fixed; inset: 0; background: #071d41; display: flex; align-items: center; justify-content: center; }
.login-caixa { background: #fff; padding: 28px; border-radius: 10px; width: 360px; display: flex; flex-direction: column; gap: 10px; }
.login-caixa label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.login-caixa h1 { margin: 0; font-size: 20px; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: #1d2733; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.toast.erro { background: var(--vermelho); } .toast.ok { background: var(--verde); }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 4px 10px; font-size: 13px; }
.kv dt { color: var(--mudo); } .kv dd { margin: 0; }
.md h1, .md h2, .md h3 { margin: 18px 0 8px; } .md table { margin: 8px 0; } .md code { background: var(--cinza-fraco); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.md pre code { background: none; padding: 0; }
.abas-internas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 10px; }
.abas-internas button { border: 0; background: none; padding: 8px 12px; cursor: pointer; font: inherit; color: var(--mudo); border-bottom: 2px solid transparent; }
.abas-internas button.ativa { color: var(--azul); border-bottom-color: var(--azul); }
.chat { display: flex; flex-direction: column; gap: 8px; }
.chat .msg { background: var(--cinza-fraco); padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; }
.chat .msg.eu { background: var(--azul-fraco); align-self: flex-end; }
.parecer { border-left: 4px solid var(--cinza); padding: 6px 10px; margin-bottom: 8px; background: var(--cinza-fraco); border-radius: 0 6px 6px 0; }
.parecer.ok { border-left-color: var(--verde); } .parecer.divergente { border-left-color: var(--vermelho); } .parecer.indisponivel, .parecer.inconclusivo { border-left-color: var(--ambar); }
.saude-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.saude-grade .cartao { min-height: 70px; }
.paginacao { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.contadores { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.contadores .estado { cursor: pointer; }
.contadores .estado.ativo { outline: 2px solid var(--azul); }