: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; }

main { padding: 16px 20px; max-width: none; }
.nav { display: flex; gap: 14px; margin-bottom: 14px; }
.nav button { border: 0; background: none; color: #6c757d; font-size: 2rem; line-height: 1; padding: 2px 8px; }
.nav button:hover:not(:disabled) { color: var(--azul); }
.nav button:disabled { color: #ced4da; cursor: default; }
#relatorio { display: none; }
@media print {
  main, dialog { display: none !important; }
  #relatorio { display: block; font-family: "Times New Roman", serif; color: #000; }
  #relatorio h1 { text-align: center; font-weight: 400; font-size: 1.7rem; margin: 8px 0 16px; }
  #relatorio .grupo { border-bottom: 1px solid #000; padding-bottom: 6px; break-inside: avoid; }
  #relatorio h2 { width: 54%; margin: 6px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #000; font-weight: 400; font-size: 1.3rem; white-space: pre; }
  #relatorio p { margin: 0; line-height: 1.45; font-size: .95rem; display: grid;
    grid-template-columns: 2.6fr 1fr 1fr 2fr; column-gap: 12px; }
  #relatorio p.cab-rel { font-size: .8rem; font-weight: 700; border-bottom: 1px dotted #555; margin-bottom: 2px; }
}
.campo { display: block; font-size: .9rem; margin-bottom: 12px; }
.campo select { display: block; width: 100%; margin-top: 6px; padding: 10px 14px; font: inherit; border: 1px solid var(--borda); border-radius: 8px; background: #fff; color: #495057; }
.barra { display: flex; align-items: center; margin-bottom: 12px; }
.icone { width: 40px; height: 36px; padding: 0; font-size: 18px; margin-right: 6px; }
.sair { margin-left: auto; }
.grande { width: 100%; margin-top: 16px; padding: 10px; border-radius: 20px; }

.tabela { border: 1px solid var(--borda); touch-action: manipulation; } /* sem zoom por duplo toque */
.rolagem { overflow-x: auto; }
.linha { display: flex; align-items: center; min-width: 640px; }
.cab { background: var(--azul); color: #fff; font-weight: 600; padding: 4px 0; }
.corpo { min-height: 40vh; max-height: 62vh; overflow-y: auto; }
.item { min-height: 29px; padding: 2px 0; cursor: pointer; }
.item:nth-child(even) { background: #e9ecef; }
.c-marca { flex: 0 0 90px; padding-left: 52px; }
.c-marca input { width: 20px; height: 20px; cursor: pointer; display: block; margin-left: -40px; }
.c-serie { flex: 0 0 22%; }
.c-peso { flex: 0 0 22%; }
.c-abrir { flex: 0 0 56px; }
.abrir { width: 40px; height: 28px; padding: 0; font-size: 18px; line-height: 1; background: var(--azul); border-color: var(--azul); color: #fff; }
.c-desc { flex: 1; }
.obs { color: #6c757d; margin-left: 8px; }
.vazio { padding: 16px; color: #6c757d; text-align: center; }

.nav button:disabled { color: #ced4da; }
.novo { margin-top: 8px; border-style: dashed; }
.icone:disabled, .grande:disabled, select:disabled { opacity: .5; cursor: default; }

/* Linha selecionada e edição direta na grade */
.item.sel, .item.sel:nth-child(even) { background: #cfe2ff; }
.editando { cursor: default; }
.editando .c-marca { align-self: stretch; background: #6c757d; margin-right: 0; }
.editando .c-serie, .editando .c-peso { padding-right: 8px; }
.editando input { width: 100%; height: auto; padding: 4px 8px; font: inherit; border: 1px solid #86b7fe; border-radius: 6px; background: #fff; }
.campos { display: flex; gap: 8px; padding-right: 8px; }
.campos .f-descricao { flex: 2; }
.campos .f-observacao, .campos .f-link { flex: 1; }

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; }

/* Celular: colunas compactas para a grade caber sem rolagem lateral */
@media (max-width: 700px) {
  main { padding: 12px 10px; }
  .linha { min-width: 0; }
  .c-marca { flex: 0 0 38px; padding-left: 10px; }
  .c-marca input { margin-left: 0; }
  .c-serie { flex: 0 0 64px; }
  .c-peso { flex: 0 0 74px; }
  .c-abrir { flex: 0 0 46px; }
  .abrir { width: 36px; }
  .c-desc { padding-right: 6px; line-height: 1.2; }
  .obs { display: block; margin: 2px 0 0; }
  .editando .c-serie, .editando .c-peso { padding-right: 4px; }
  .editando input { padding: 4px 6px; }
  .campos { flex-direction: column; gap: 4px; padding: 2px 6px 2px 0; }
}