:root { --azul: #332882; --azul2: #3E4096; --vermelho: #E40915; --cinza: #f3f4f8; --borda: #d9dbe6; --texto: #1f2233; --ok: #1e8e3e; --alerta: #b45309; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--cinza); font-size: 16px; }
a { color: var(--azul); }
h1 { font-size: 1.35rem; margin: 0 0 14px; color: var(--azul); }
h2 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--azul2); }

.marca { background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; gap: 12px; }
.marca .logo-eldorado { height: 26px; } .marca .logo-daf { height: 30px; }
.marca .titulo-app { font-weight: 600; color: var(--azul); font-size: .95rem; }
.faixa-vermelha { height: 3px; background: var(--vermelho); }
.menu { background: var(--azul); display: flex; overflow-x: auto; white-space: nowrap; }
.menu a { color: #fff; text-decoration: none; padding: 11px 14px; font-size: .92rem; flex-shrink: 0; }
.menu a.ativo { background: var(--azul2); font-weight: 600; }
.menu a.sair { margin-left: auto; opacity: .85; }
.badge { background: var(--vermelho); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: .75rem; font-weight: 700; }

main { padding: 16px; max-width: 1100px; margin: 0 auto; }
footer { text-align: center; color: #777; font-size: .8rem; padding: 24px 16px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; background: #e6f4ea; color: #1e4620; border-left: 4px solid var(--ok); }
.flash.erro { background: #fdecea; color: #611a15; border-left-color: var(--vermelho); }

.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.grade { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grade { grid-template-columns: 1fr 1fr; } .grade .largo { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .grade.tres { grid-template-columns: 1fr 1fr 1fr; } }

label { display: block; font-size: .85rem; color: #444; margin-bottom: 4px; font-weight: 600; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul2); border-color: var(--azul2); }
textarea { min-height: 80px; }
.radios label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin-right: 16px; }
.radios input { width: auto; }
.botao, button { background: var(--azul); color: #fff; border: 0; border-radius: 6px; padding: 12px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.botao.secundario, button.secundario { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
.botao.pequeno, button.pequeno { padding: 6px 10px; font-size: .85rem; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filtros > div { flex: 1 1 140px; }

.tabela { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
.tabela th, .tabela td { padding: 9px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tabela th { background: #eef0f7; color: var(--azul); font-weight: 600; white-space: nowrap; }
.tabela tr:hover td { background: #fafbff; }
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.num { text-align: right; white-space: nowrap; }
.vencido { color: var(--vermelho); font-weight: 700; }
.hoje { color: var(--alerta); font-weight: 700; }
.muted { color: #777; font-size: .85rem; }

.indicadores { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
@media (min-width: 700px) { .indicadores { grid-template-columns: repeat(4, 1fr); } }
.ind { background: #fff; border: 1px solid var(--borda); border-left: 5px solid var(--azul); border-radius: 8px; padding: 12px 14px; }
.ind .valor { font-size: 1.5rem; font-weight: 700; color: var(--azul); }
.ind .rotulo { font-size: .8rem; color: #555; }
.ind.ok { border-left-color: var(--ok); } .ind.ok .valor { color: var(--ok); }
.ind.alerta { border-left-color: var(--vermelho); } .ind.alerta .valor { color: var(--vermelho); }
.barra { background: #eef0f7; border-radius: 4px; height: 8px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--azul2); }

.login { max-width: 380px; margin: 40px auto; }
.lista-mobile .tabela td[data-r]::before { content: none; }
@media (max-width: 600px) {
  .lista-mobile .tabela thead { display: none; }
  .lista-mobile .tabela tr { display: block; border-bottom: 6px solid var(--cinza); }
  .lista-mobile .tabela td { display: flex; gap: 8px; border: 0; padding: 4px 10px; }
  .lista-mobile .tabela td[data-r]::before { content: attr(data-r); font-weight: 600; color: #555; min-width: 110px; }
  .lista-mobile .tabela tr td:first-child { padding-top: 10px; } .lista-mobile .tabela tr td:last-child { padding-bottom: 10px; }
}