:root {
  --fundo: #f4f6f8;
  --superficie: #ffffff;
  --texto: #1b2430;
  --texto-suave: #4a5565;
  --borda: #c9d1db;
  --primaria: #0b5cad;
  --primaria-escura: #084682;
  --foco: #1d4ed8;
  --erro: #a3191b;
  --erro-fundo: #fdecec;
  --ok: #17643a;
  --ok-fundo: #e7f5ec;
  --alerta: #7a4b00;
  --alerta-fundo: #fff3d6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: var(--texto);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fundo); }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.pular { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: .5rem 1rem; z-index: 10; }
.pular:focus { left: 1rem; }

.topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem 1.5rem; background: #12263f; color: #fff; }
.marca { display: flex; flex-direction: column; }
.marca strong { font-size: 1.25rem; }
.marca span { font-size: .875rem; color: #d4dde8; }
.sessao { display: flex; align-items: center; gap: .75rem; }
.topo :focus-visible { outline-color: #ffd166; }

nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: .5rem 1.5rem; background: var(--superficie); border-bottom: 1px solid var(--borda); }
nav button { background: transparent; color: var(--texto); border: 2px solid transparent; }
nav button:hover { background: var(--fundo); }
nav button[aria-current="page"] { border-color: var(--primaria); color: var(--primaria-escura); font-weight: 700; }

main { max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
main:focus { outline: none; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }

#mensagem:empty { display: none; }
#mensagem { padding: .75rem 1rem; border-radius: 6px; border-left: 4px solid var(--ok); background: var(--ok-fundo); color: var(--ok); }
#mensagem.erro { border-color: var(--erro); background: var(--erro-fundo); color: var(--erro); }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.estreito { max-width: 24rem; margin: 2rem auto; }
.estreito form { display: flex; flex-direction: column; gap: .5rem; }

fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1rem; }
legend { font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; padding: 0; }
fieldset > div { display: flex; flex-direction: column; gap: .25rem; }
label { font-weight: 600; }
small { color: var(--texto-suave); }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.check input { width: 1.25rem; height: 1.25rem; }

input, select { font: inherit; padding: .5rem .625rem; border: 1px solid #7b8794; border-radius: 6px; background: #fff; color: var(--texto); min-height: 2.5rem; }

button { font: inherit; font-weight: 600; cursor: pointer; padding: .5rem 1rem; min-height: 2.5rem; border-radius: 6px; border: 2px solid var(--primaria); background: var(--primaria); color: #fff; }
button:hover { background: var(--primaria-escura); border-color: var(--primaria-escura); }
button.secundario { background: #fff; color: var(--primaria-escura); }
button.secundario:hover { background: var(--fundo); }
button.perigo { background: #fff; color: var(--erro); border-color: var(--erro); }
button.pequeno { padding: .25rem .625rem; min-height: 2rem; font-size: .875rem; }
.acoes { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.filtros input[type="search"] { flex: 1 1 16rem; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.indicadores div { background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 1rem; }
.indicadores dt { color: var(--texto-suave); font-weight: 600; }
.indicadores dd { margin: .25rem 0 0; font-size: 2rem; font-weight: 700; }

.tabela { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-weight: 700; padding: .75rem 1rem; }
th, td { text-align: left; padding: .5rem 1rem; border-top: 1px solid var(--borda); vertical-align: top; }
thead th { background: #eef2f6; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td .acoes { margin: 0; }

.selo { display: inline-block; padding: 0 .5rem; border-radius: 999px; font-size: .875rem; font-weight: 600; background: var(--ok-fundo); color: var(--ok); }
.selo.repor { background: var(--alerta-fundo); color: var(--alerta); }
.selo.inativo { background: #eceff3; color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }