:root {
  --petroleo: #0D3944;
  --petroleo-escuro: #0A2830;
  --cinza: #A6A7AB;
  --grafite: #333333;
  --borda: #D9D9DB;
  --fundo: #F5F5F6;
  --ok: #1F8A4C;
  --alerta: #B7791F;
  --erro: #C0392B;
  --texto: #1A1A1A;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--texto); background: var(--fundo); font-size: 15px; }
h1, h2, .titulo { font-family: Montserrat, Inter, sans-serif; }
.topo { background: radial-gradient(circle at 20% 0%, var(--petroleo) 0%, var(--petroleo-escuro) 70%); color: #fff; }
.topo-dentro { max-width: 1180px; margin: 0 auto; padding: 22px 24px; display: flex; gap: 22px; align-items: center; }
.logo { height: 34px; }
.topo h1 { margin: 0; font-weight: 900; font-size: 24px; letter-spacing: .2px; }
.topo p { margin: 4px 0 0; color: #D5DADB; font-size: 14px; }
main { max-width: 1180px; margin: 0 auto; padding: 24px; }

.soltar { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; background: #fff; border: 2px dashed var(--cinza); border-radius: 12px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.soltar:hover, .soltar:focus, .soltar.arrastando { border-color: var(--petroleo); background: #F0F5F6; outline: none; }
.soltar input { display: none; }
.soltar strong { font-family: Montserrat, Inter, sans-serif; font-weight: 800; font-size: 18px; color: var(--petroleo); }
.soltar span { color: var(--grafite); }
.soltar small { color: #6b6c70; margin-top: 4px; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 2px 6px; color: var(--grafite); font-size: 14px; }
.opcoes input { accent-color: var(--petroleo); }

.juntar { margin: 14px 0; padding: 12px 16px; background: #E8F0F2; border: 1px solid #C5D6DA; border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 12px; margin: 16px 0; overflow: hidden; }
.cartao > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borda); }
.cartao .nome { font-weight: 700; word-break: break-all; }
.cartao .nome small { display: block; font-weight: 400; color: #6b6c70; margin-top: 2px; }
.selo { flex: none; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; color: #fff; }
.selo.ok { background: var(--ok); }
.selo.alerta { background: var(--alerta); }
.selo.erro { background: var(--erro); }
.selo.lendo { background: var(--cinza); }
.corpo { padding: 14px 18px 18px; }
.campos { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; }
.campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6b6c70; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.campos input, .campos select { font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 7px; min-width: 90px; color: var(--texto); text-transform: none; }
.campos input.conta { width: 150px; }
.campos input.agencia { width: 90px; }
.campos input.periodo { width: 200px; background: var(--fundo); }
.teste { margin: 0 0 18px; padding: 14px 18px; background: #fff; border: 1px solid var(--borda); border-left: 5px solid var(--alerta); border-radius: 10px; font-size: 14px; color: var(--grafite); }
.teste strong { color: var(--texto); }
.teste ol { margin: 8px 0 6px 18px; padding: 0; }
.teste li { margin: 3px 0; }
.numeros { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 6px; }
.numeros div { display: flex; flex-direction: column; }
.numeros span { font-size: 12px; color: #6b6c70; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.numeros strong { font-family: Montserrat, Inter, sans-serif; font-weight: 800; font-size: 18px; color: var(--petroleo); }
.numeros strong.neg { color: var(--erro); }
.conferencia { list-style: none; padding: 0; margin: 10px 0; }
.conferencia li { padding: 6px 10px 6px 30px; position: relative; font-size: 14px; border-radius: 6px; margin: 3px 0; }
.conferencia li::before { position: absolute; left: 10px; font-weight: 800; }
.conferencia li.ok { background: #EEF7F1; } .conferencia li.ok::before { content: "✓"; color: var(--ok); }
.conferencia li.alerta { background: #FBF4E8; } .conferencia li.alerta::before { content: "!"; color: var(--alerta); }
.conferencia li.erro { background: #FBECEA; } .conferencia li.erro::before { content: "✕"; color: var(--erro); }
.conferencia li.info { background: var(--fundo); } .conferencia li.info::before { content: "i"; color: var(--petroleo); }
.aviso-historico { margin: 10px 0 4px; padding: 10px 14px; border-radius: 8px; font-size: 14px; color: var(--grafite); border-left: 4px solid var(--petroleo); background: var(--fundo); }
.aviso-historico.alerta { border-left-color: var(--alerta); background: #FBF4E8; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
button { font: inherit; font-weight: 600; font-size: 14px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--petroleo); background: #fff; color: var(--petroleo); cursor: pointer; }
button:hover { background: #F0F5F6; }
button.principal { background: var(--petroleo); color: #fff; }
button.principal:hover { background: var(--petroleo-escuro); }
button.discreto { border-color: var(--borda); color: var(--grafite); }
.mensagem-erro { color: var(--erro); font-weight: 600; }
.senha { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.senha input { font: inherit; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 7px; }

.tabela { margin-top: 14px; overflow-x: auto; }
/* o histórico com os espaços como vão no OFX (Bradesco, Santander, Sicredi usam espaços repetidos) */
.tabela .memo { white-space: pre-wrap; }
.campos .memoria { flex-basis: 100%; color: var(--grafite); font-size: 13px; }
.opcoes #esquecer { padding: 4px 10px; font-size: 13px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; background: var(--petroleo); color: #fff; font-weight: 600; padding: 7px 8px; position: sticky; top: 0; }
td { padding: 6px 8px; border-bottom: 1px solid #ECECEE; vertical-align: top; }
tr:nth-child(even) td { background: #FAFAFB; }
td.valor, th.valor, td.saldo, th.saldo { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.valor.neg { color: var(--erro); }
td.data { white-space: nowrap; }
td.origem { color: #8D8E92; white-space: nowrap; }
td [contenteditable] { outline: none; border-radius: 4px; padding: 1px 2px; }
td [contenteditable]:focus { background: #FFF8E1; box-shadow: 0 0 0 1px var(--alerta); }
tr.consertado td { background: #FFF8E1 !important; }
.tirar { border: none; background: none; color: #8D8E92; padding: 0 4px; font-size: 15px; }
.tirar:hover { color: var(--erro); background: none; }
.mais { margin: 10px 0; }
.ignorados { margin-top: 12px; font-size: 13px; color: var(--grafite); }
.ignorados li { margin: 3px 0; }
.rodape { max-width: 1180px; margin: 10px auto 30px; padding: 0 24px; color: #8D8E92; font-size: 12px; }