* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: #f4f6f8; color: #1c2733; font-size: 15px; }
.topo { background: #0b5e3b; color: #fff; padding: 10px 16px; display: flex;
        flex-wrap: wrap; align-items: center; gap: 12px; }
.marca { font-weight: 700; font-size: 17px; }
.topo nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.topo a { color: #d9f2e5; text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.topo a:hover { background: rgba(255,255,255,.14); color: #fff; }
.topo a.sair { color: #ffd9d9; }
main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; margin: 8px 0 16px; }
h2 { font-size: 17px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.flash.ok { background: #e2f5e9; color: #14532d; border: 1px solid #a7dcb8; }
.flash.erro { background: #fde8e8; color: #8a1c1c; border: 1px solid #f3b4b4; }
.flash.aviso { background: #fff4d6; color: #7a5900; border: 1px solid #ecd28a; }

.cartao { background: #fff; border: 1px solid #dde3e9; border-radius: 10px; padding: 18px; margin-bottom: 16px; }

form.pilha label { display: block; font-weight: 600; margin: 12px 0 4px; }
input[type=text], input[type=password], input[type=date], input[type=number], select {
  width: 100%; max-width: 420px; padding: 9px 10px; border: 1px solid #b9c2cc;
  border-radius: 7px; font-size: 15px; background: #fff; }
input[type=file] { margin: 8px 0; }
button, .botao { display: inline-block; background: #0b5e3b; color: #fff; border: 0;
  padding: 10px 18px; border-radius: 7px; font-size: 15px; cursor: pointer; text-decoration: none; }
button:hover, .botao:hover { background: #0e7549; }
button.perigo, .botao.perigo { background: #b32020; }
button.perigo:hover { background: #d32f2f; }
button.secundario, .botao.secundario { background: #5a6875; }
.acoes { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #e4e9ee; vertical-align: middle; }
th { background: #eef2f5; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #46535f; }
tr.protesto-passou { background: #fdecec; }
tr.protesto-marcado td { color: #8a1c1c; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.tag.vermelha { background: #fbd5d5; color: #8a1c1c; }
.tag.amarela { background: #fdeeba; color: #7a5900; }
.tag.cinza { background: #e4e9ee; color: #46535f; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.confirmar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.confirmar-grid .foto img { width: 100%; border: 1px solid #dde3e9; border-radius: 8px; }
@media (max-width: 800px) { .confirmar-grid { grid-template-columns: 1fr; } }

.login-caixa { max-width: 360px; margin: 60px auto; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filtros label { font-size: 13px; font-weight: 600; display: block; }
.muted { color: #6a7682; font-size: 13px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid #dde3e9; border-radius: 10px; padding: 14px; }
.kpi .valor { font-size: 22px; font-weight: 700; }
.kpi .rotulo { font-size: 12px; color: #6a7682; text-transform: uppercase; }
.barra { height: 12px; max-width: 420px; background: #e4e9ee; border-radius: 999px;
         overflow: hidden; margin-top: 16px; }
.barra-fill { height: 100%; width: 0; background: #0b5e3b; border-radius: 999px;
              transition: width .3s ease; }