:root {
  --fundo: #f3f7fa;
  --cartao: #ffffff;
  --texto: #14232e;
  --suave: #5b6e7c;
  --linha: #d9e3ea;
  --azul: #0b6fa4;
  --azul-escuro: #095883;
  --verde: #1b8a4b;
  --ambar: #b26a00;
  --ambar-fundo: #fff4de;
  --vermelho: #b3261e;
  --campo: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0e1a22;
    --cartao: #16262f;
    --texto: #e6eef3;
    --suave: #9ab0bf;
    --linha: #27404e;
    --azul: #4aa8dc;
    --azul-escuro: #2f86b8;
    --verde: #4cc17f;
    --ambar: #f0b45a;
    --ambar-fundo: #3a2c10;
    --vermelho: #ff8a80;
    --campo: #0e1a22;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom)); }
#app { max-width: 640px; margin: 0 auto; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.topo { display: flex; align-items: center; gap: 8px; padding: 14px 0 8px; }
.topo h1 { font-size: 18px; margin: 0; flex: 1; }
.topo .quem { color: var(--suave); font-size: 14px; }
.link { background: none; border: 0; color: var(--azul); padding: 8px 4px; font-size: 14px; }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; margin: 12px 0; }
.linha { display: flex; gap: 10px; align-items: center; }
select, input[type=text], input[type=password], input[type=search], input[inputmode] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--campo); min-height: 48px;
}
select:focus, input:focus, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 45%, transparent); outline-offset: 1px; }

.progresso { height: 8px; background: var(--linha); border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.progresso > i { display: block; height: 100%; background: var(--verde); transition: width .25s; }
.pequeno { color: var(--suave); font-size: 14px; }

.unidade { font-size: 40px; font-weight: 700; line-height: 1.1; margin: 0 0 4px; }
.anterior { color: var(--suave); }
.anterior b { color: var(--texto); font-variant-numeric: tabular-nums; }
.entrada { font-size: 32px !important; font-weight: 600; text-align: center; letter-spacing: 1px; margin: 14px 0 6px; min-height: 64px !important; font-variant-numeric: tabular-nums; }
.previa { text-align: center; min-height: 22px; color: var(--suave); font-variant-numeric: tabular-nums; }
.previa b { color: var(--texto); }

.botao { width: 100%; min-height: 54px; border: 0; border-radius: 12px; background: var(--azul-escuro); color: #fff; font-size: 18px; font-weight: 600; margin-top: 10px; }
.botao:disabled { opacity: .5; }
.botao.sec { background: transparent; color: var(--azul); border: 1px solid var(--linha); font-weight: 500; }

.alerta { background: var(--ambar-fundo); border: 1px solid var(--ambar); color: var(--texto); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.alerta strong { color: var(--ambar); }
.erro { color: var(--vermelho); margin: 10px 0 0; min-height: 22px; }

.filtros { display: flex; gap: 8px; margin: 14px 0 8px; }
.filtros button { flex: 1; min-height: 44px; border: 1px solid var(--linha); border-radius: 10px; background: var(--cartao); }
.filtros button[aria-pressed=true] { background: var(--azul-escuro); color: #fff; border-color: var(--azul-escuro); }

.lista { list-style: none; margin: 8px 0 0; padding: 0; }
.lista li button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; min-height: 52px; padding: 8px 14px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 6px; }
.lista li button[aria-current=true] { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.lista .rot { font-weight: 600; min-width: 74px; }
.lista .val { flex: 1; font-variant-numeric: tabular-nums; color: var(--suave); }
.lista .ok { color: var(--verde); font-weight: 600; }
.lista .pend { color: var(--ambar); }

.login { margin-top: 12vh; }
.login h1 { font-size: 24px; margin: 0 0 4px; }
.login label { display: block; margin-top: 14px; font-size: 14px; color: var(--suave); }

#aviso { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 608px; margin: 0 auto; background: var(--texto); color: var(--fundo); border-radius: 12px; padding: 12px 16px; opacity: 0; transform: translateY(8px); transition: .2s; pointer-events: none; text-align: center; }
#aviso.ver { opacity: 1; transform: none; }