:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1c2b3b;
  background: #f4f6f8;
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: #174e71; }
.shell { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.site-header { background: #fff; border-bottom: 1px solid #dbe2e8; padding-block: 1.25rem 0; }
.brand { font-size: 1.25rem; font-weight: 750; text-decoration: none; }
.tagline { color: #506070; font-size: .9rem; margin: .35rem 0 1.25rem; }
nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding-bottom: 1rem; }
nav a { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: .6rem .5rem; border-radius: .5rem; font-weight: 600; text-decoration: none; }
nav a:hover { background: #edf3f7; }
nav a[aria-current="page"] { background: #174e71; color: #fff; }
:focus-visible { outline: 3px solid #966500; outline-offset: 4px; }
.skip-link { position: absolute; top: -8rem; left: 1rem; padding: .75rem; background: #fff; z-index: 1; }
.skip-link:focus { top: .5rem; }
main { flex: 1; padding-block: 2rem 3rem; }
.page-heading { margin-bottom: 1.5rem; }
h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.2; }
.page-heading p { color: #506070; margin: .5rem 0 0; }
.card { background: #fff; border: 1px solid #dbe2e8; border-radius: .8rem; padding: 1.5rem; }
.card h2 { font-size: 1.25rem; margin: 1rem 0 .5rem; }
.card p { max-width: 65ch; }
.badge { display: inline-block; background: #edf3f7; color: #35536b; padding: .2rem .7rem; border-radius: 2rem; font-size: .85rem; font-weight: 600; }
.muted, .site-footer { color: #506070; }
.site-footer { font-size: .85rem; padding-block: 1rem; }
@media (min-width: 48rem) {
  nav { display: flex; }
  nav a { padding-inline: 1.25rem; }
  main { padding-top: 3rem; }
  .card { padding: 2rem; }
}

/* Componentes do fluxo financeiro */
.actions, .filters { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.actions { justify-content:space-between; }
.filters { margin-block:1rem; gap:.5rem; }
.button, button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.65rem 1rem; border:1px solid #174e71; border-radius:.5rem; background:#174e71; color:white; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; }
.secondary { background:white; color:#174e71; }
.filters [aria-current] { background:#174e71; color:white; }
label { display:block; margin-block:1rem .3rem; font-weight:600; }
input, textarea { width:100%; padding:.7rem; min-height:44px; border:1px solid #8798a6; border-radius:.4rem; font:inherit; background:white; color:#1c2b3b; }
fieldset { min-width:0; border:1px solid #dbe2e8; border-radius:.5rem; padding:1rem; }
legend { font-weight:700; }
.form-grid, .details, .metrics { display:grid; gap:1rem; }
.wide { grid-column:1/-1; }
.table-wrap { overflow-x:auto; border:1px solid #dbe2e8; border-radius:.5rem; background:white; }
table { width:100%; border-collapse:collapse; }
th, td { padding:.9rem; text-align:left; border-bottom:1px solid #e3e8ed; vertical-align:top; }
th { background:#eaf0f5; white-space:nowrap; }
caption { text-align:left; padding:1rem; font-weight:600; }
td { min-width:7rem; }
.message { padding:1rem; border-radius:.5rem; background:#eaf0f5; }
.error { background:#fff0ed; color:#882a19; border:1px solid #d98575; }
.success, .status-PAGO { background:#e5f4eb; color:#165a32; }
.status-ATRASADO { background:#fff0ed; color:#882a19; }
.status-VENCE_HOJE { background:#fff2cf; color:#644b00; }
.status-CANCELADO { background:#ececec; color:#454545; }
.details dt { font-size:.85rem; color:#506070; }
.details dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.note { white-space:pre-wrap; overflow-wrap:anywhere; }
.history { padding-left:1rem; font-size:.85rem; }
.metric h2, .metric h3 { font-size:1rem; margin:0; }
.metric p { font-size:1.5rem; font-weight:700; margin:.5rem 0 0; }
@media(min-width:48rem) { .form-grid, .details { grid-template-columns:repeat(2,minmax(0,1fr)); } .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Ajustes mobile: rolagem limitada às tabelas, sem esconder conteúdo global. */
.shell, main, .card, .table-wrap, .metrics > *, .form-grid > * { min-width:0; }
h1, h2, h3, p, .message, .badge, td, th { overflow-wrap:anywhere; }
.metric p, td { font-variant-numeric:tabular-nums; }
input, textarea { font-size:1rem; }
input[type="hidden"] { display:none; }
td a { display:inline-flex; min-height:44px; align-items:center; }
.table-wrap { max-width:100%; margin-bottom:1.5rem; }
.table-wrap:focus-visible { outline:3px solid #966500; }
.account { display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.account p { margin:0; }
.alert-list { list-style:none; padding:0; display:grid; gap:.75rem; }
.alert-list a { display:block; min-height:44px; padding:1rem; background:#fff2cf; border:1px solid #c9af63; border-radius:.5rem; }
.connection-message { padding:1rem; margin:1rem; background:#fff2cf; border:2px solid #644b00; }
.is-offline main, .is-offline .account form, .is-offline.authenticated nav { display:none; }
.login-main { max-width:30rem; }
.site-footer { margin-top:1rem; }
@media(max-width:47.99rem) {
  .site-header { padding-block:.75rem; }
  .tagline { margin-bottom:.75rem; }

  /* Mobile navigation is defined with its .nav-links container below. */
  nav a { font-size:.82rem; padding:.65rem .1rem; }
  main { padding-top:1.25rem; }
  .card { padding:1rem; }
  .metric p { font-size:1.35rem; }
}
@media(min-width:24rem) and (max-width:47.99rem) { .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* LOTE-06: acabamento operacional; desktop conserva tabelas e linguagem visual. */
.site-header { padding:1rem 0; }
.header-content { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.identity { min-width:0; }
.brand { display:flex; align-items:center; gap:.65rem; overflow-wrap:anywhere; }
.brand-short { display:none; }
.brand-logo { max-width:3rem; max-height:3rem; object-fit:contain; }
.tagline { margin:.25rem 0 0; }
.account { font-size:.9rem; flex-shrink:0; max-width:35%; }
.primary-nav { display:block; background:#fff; margin:0; padding:0; border-bottom:1px solid #dbe2e8; }
.nav-links { display:flex; gap:.5rem; padding-bottom:.75rem; }
.primary-nav a { min-height:44px; }
.search-form { margin:0 0 1rem; }
.search-fields { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.search-fields input { flex:1 1 16rem; min-width:0; width:auto; }
.search-fields .button, .search-fields button { flex-shrink:0; }
.pagination { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin:1rem 0; }
.pagination-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.pagination p { margin:0; }
.text-action { display:inline-flex; align-items:center; min-height:44px; }
.money { font-variant-numeric:tabular-nums; white-space:nowrap; }
.financial-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.25rem 0; }
.financial-summary > div { padding:.8rem; border:1px solid #dbe2e8; border-radius:.5rem; background:#f4f6f8; min-width:0; }
.financial-summary dt { font-size:.9rem; color:#506070; }
.financial-summary dd { margin:.25rem 0 0; font-size:1.2rem; font-weight:700; }
.alert-list a[data-alert="vencidos"] { background:#fff0ed; border-color:#d98575; color:#882a19; }
.alert-list a[data-alert="hoje"] { background:#fff2cf; border-color:#c9af63; color:#644b00; }
.alert-list a[data-alert="semana"] { background:#edf3f7; border-color:#b2c9d8; color:#174e71; }
.metric[data-metric="overdue"] { border-left:4px solid #bc7060; }
.metric[data-metric="received"] { border-left:4px solid #44825d; }
.status-QUITADO { background:#e5f4eb; color:#165a32; }
.responsive-table td .button { font-size:.9rem; }
@media(max-width:63.99rem) {
  .table-wrap.responsive-table { overflow:visible; border:0; background:transparent; }
  .responsive-table table, .responsive-table tbody { display:block; width:100%; }
  .responsive-table caption { display:block; padding:.5rem 0; }
  /* Cabeçalhos continuam disponíveis para tecnologia assistiva; os mesmos rótulos aparecem nos registros. */
  .responsive-table thead { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
  .responsive-table tbody > tr { display:block; border:1px solid #dbe2e8; border-radius:.7rem; background:#fff; padding:1rem; margin-bottom:1rem; }
  .responsive-table td, .responsive-table tbody th { display:grid; grid-template-columns:minmax(6rem,.85fr) minmax(0,1.15fr); align-items:start; gap:.75rem; min-width:0; width:auto; padding:.55rem 0; border:0; background:none; white-space:normal; }
  .responsive-table [data-label]::before { content:attr(data-label); font-size:.85rem; color:#506070; font-weight:500; }
  .responsive-table .record-title, .responsive-table tbody th[scope="row"] { display:block; font-size:1.05rem; font-weight:600; border-bottom:1px solid #e3e8ed; margin-bottom:.4rem; padding-top:0; }
  .responsive-table .record-title::before, .responsive-table tbody th[scope="row"]::before { display:block; margin-bottom:.25rem; }
  .responsive-table .record-title a { min-height:44px; }
  .responsive-table .record-title div { font-weight:400; }
  .responsive-table .record-title strong { font-weight:700; }
  .responsive-table .badge { justify-self:start; }
  .responsive-table .record-balance { font-size:1.05rem; }
  .responsive-table .record-action { border-top:1px solid #e3e8ed; margin-top:.35rem; padding-top:.8rem; }
  .history { margin-bottom:0; padding-left:1rem; }
}
@media(max-width:47.99rem) {
  /* Três regiões: cabeçalho, conteúdo rolável e navegação em fluxo próprio. Nenhuma sobreposição. */
  body.authenticated { height:100vh; height:100dvh; min-height:0; padding-bottom:0; }
  .authenticated .site-header { order:0; flex-shrink:0; padding:.5rem 0; }
  .authenticated .header-content { align-items:center; gap:.5rem; }
  .authenticated .brand-full, .authenticated .tagline { display:none; }
  .authenticated .brand-short { display:inline; font-size:1rem; }
  .authenticated .account { max-width:60%; gap:.5rem; font-size:.75rem; flex-wrap:nowrap; }
  .authenticated .account p { overflow-wrap:anywhere; }
  .authenticated .account button { padding:.5rem .65rem; min-height:44px; }
  .authenticated main { order:1; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; width:100%; max-width:none; margin:0; padding:1rem 1rem 1.5rem; scroll-padding:1rem; }
  .authenticated .site-footer { display:none; }
  .authenticated nav.primary-nav { display:block; order:2; flex:0 0 auto; position:static; width:100%; z-index:auto; padding:.35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); border-top:1px solid #bbc9d3; border-bottom:0; }
  .primary-nav .nav-links { width:100%; min-width:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.1rem; padding:0; }
  .primary-nav .nav-links > a { min-width:0; width:100%; white-space:nowrap; font-size:.82rem; padding:.65rem .1rem; }
  .financial-summary { grid-template-columns:1fr; gap:.5rem; }
  .financial-summary > div { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
  .financial-summary dd { font-size:1.1rem; }
  .filters { gap:.4rem; }
  .filters a { padding:.5rem .65rem; font-size:.85rem; }
  .search-fields input { flex-basis:100%; }
  .anonymous .header-content { display:block; }
  .anonymous .brand { font-size:1.1rem; }
  .is-offline.authenticated main, .is-offline.authenticated nav.primary-nav { display:none; }
}