:root { --azul: #0d6efd; --borda: #dee2e6; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; color: #212529; }
main { max-width: 900px; margin: 0 auto; padding: 12px; }

button { font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid #999; background: #fff; padding: 8px 14px; }
.azul { background: var(--azul); border-color: var(--azul); color: #fff; }
.vermelho { background: #dc3545; border-color: #dc3545; color: #fff; }
.icone { width: 40px; height: 36px; padding: 0; font-size: 18px; }
.grande { flex: 1; }

.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
#busca { width: 100%; padding: 8px; margin-bottom: 8px; font: inherit; border: 1px solid var(--borda); border-radius: 6px; }

.tabela { border: 1px solid var(--borda); }
.cab { background: var(--azul); color: #fff; font-weight: 600; padding: 4px 8px 4px 52px; }
.corpo { max-height: 62vh; overflow-y: auto; }
.item { display: flex; align-items: center; gap: 14px; padding: 4px 8px 4px 14px; min-height: 29px; cursor: pointer; }
.item:nth-child(even) { background: #e9ecef; }
.item input { width: 20px; height: 20px; flex: none; cursor: pointer; }
.item .desc { flex: 1; }
.item .obs, .item .cat { color: #6c757d; font-size: .85em; }
.vazio { padding: 16px; color: #6c757d; text-align: center; }

.rodape { display: flex; gap: 6px; margin-top: 12px; }
.rodape button { flex: 1; padding: 10px 4px; }
.rodape button.ativo { outline: 3px solid #9ec5fe; }

dialog { border: 1px solid var(--borda); border-radius: 8px; width: min(440px, 92vw); }
dialog::backdrop { background: rgba(0, 0, 0, .4); }
dialog label { display: block; margin-bottom: 12px; }
dialog input, dialog select { display: block; width: 100%; padding: 8px; margin-top: 4px; font: inherit; border: 1px solid var(--borda); border-radius: 6px; }
.obrig { color: #dc3545; }
.acoes { display: flex; gap: 8px; }
.acoes .vermelho { margin-left: auto; }

.login { background: #f1f3f5; }
.cartao { max-width: 340px; margin: 15vh auto 0; padding: 24px; background: #fff; border: 1px solid var(--borda); border-radius: 8px; }
.cartao h1 { margin: 0 0 16px; font-size: 1.4rem; }
.cartao label { display: block; margin-bottom: 12px; }
.cartao input { display: block; width: 100%; padding: 8px; margin-top: 4px; font: inherit; border: 1px solid var(--borda); border-radius: 6px; }
.cartao button { width: 100%; padding: 10px; }
.erro { color: #dc3545; margin: 0 0 12px; }
.links { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

@media (max-width: 600px) {
  .item .cat { display: none; }
  .rodape { flex-wrap: wrap; }
  .rodape button { flex: 1 1 45%; }
}