* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0;
       background: #f6f7f9; color: #222; font-size: 14px; }
nav { display: flex; gap: 16px; align-items: center; padding: 12px 24px;
      background: #fff; border-bottom: 1px solid #e2e5ea; }
nav a { color: #1a73e8; text-decoration: none; }
nav .spacer { flex: 1; }
main { padding: 24px; max-width: 1400px; margin: 0 auto; }
h1 { margin: 8px 0 16px; font-size: 24px; }
h2 { margin-top: 24px; font-size: 18px; }
.muted { color: #888; }
a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.flash.error { background: #fde7e9; color: #8a1f2b; }

.card { background: #fff; padding: 20px; border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 16px; }
.login { max-width: 380px; margin: 80px auto; }
.login label { display: block; margin-bottom: 12px; }
.login input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
button { background: #1a73e8; color: #fff; border: 0; padding: 10px 16px;
         border-radius: 4px; cursor: pointer; }
button:hover { background: #1557b0; }

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: #666; margin-bottom: 8px; }
.breadcrumb a { color: #1a73e8; }
.breadcrumb .sep { margin: 0 6px; color: #aaa; }
.breadcrumb .current { color: #333; font-weight: 600; }

/* Totals card (KPI strip) */
.totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
          margin-bottom: 20px; }
.totals > div { background: #fff; padding: 14px 18px; border-radius: 8px;
                box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.totals span { display: block; color: #888; font-size: 12px;
               text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.totals strong { font-size: 20px; }
.totals .pos { color: #1a7e3a; }
.totals .neg { color: #a32330; }

/* Tables */
table.grid { width: 100%; border-collapse: collapse; background: #fff;
             border-radius: 8px; overflow: hidden;
             box-shadow: 0 1px 3px rgba(0,0,0,.06); }
table.grid th, table.grid td { padding: 10px 14px; text-align: left;
                                border-bottom: 1px solid #eef0f3; vertical-align: middle; }
table.grid th { background: #f0f3f7; font-weight: 600; font-size: 13px; }
table.grid tfoot th { background: #e8edf3; }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .diff.pos { color: #1a7e3a; }
table.grid .diff.neg { color: #a32330; }
table.grid.hover tbody tr { cursor: pointer; }
table.grid.hover tbody tr:hover { background: #f3f7fc; }
table.grid.small th, table.grid.small td { padding: 6px 10px; font-size: 13px; }

/* Filter chips */
.filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.chip { display: inline-block; padding: 4px 12px; border-radius: 999px;
        background: #fff; border: 1px solid #d4d8df; color: #444;
        font-size: 13px; }
.chip:hover { background: #f0f3f7; text-decoration: none; }
.chip.active { background: #1a73e8; color: #fff; border-color: #1a73e8; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px;
         font-size: 11px; font-weight: 600; text-transform: uppercase;
         letter-spacing: .3px; }
.badge.se-S { background: #e6f4ea; color: #1a7e3a; }
.badge.se-E { background: #fce8e6; color: #a32330; }
.badge.st-autorizada { background: #e8eaed; color: #444; }
.badge.st-cancelada { background: #fce8e6; color: #a32330; }

/* Pagination */
.pagination { display: flex; gap: 12px; align-items: center; margin-top: 16px;
              justify-content: center; }
.pagination span { color: #666; font-size: 13px; }

/* Detalhe NF (dl meta) */
dl.meta { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px;
          margin: 0; }
dl.meta dt { color: #666; }
dl.meta dd { margin: 0; }
dl.meta code { background: #f0f3f7; padding: 2px 6px; border-radius: 3px;
                font-size: 12px; }

@media (max-width: 700px) {
  .totals { grid-template-columns: repeat(2, 1fr); }
  dl.meta { grid-template-columns: 1fr; gap: 2px 0; }
  dl.meta dt { margin-top: 8px; }
}