/* Medicorum Gestão · direção DÉDALO (05/09/2026): papel, verde, cobre; Instrument Serif + Inter + JetBrains Mono.
   Camadas: tokens → reset → casca → componentes → utilitarios. Nenhum CSS inline (CSP style-src 'self'). */
@layer tokens, reset, casca, componentes, utilitarios;
@layer tokens {
  :root {
    color-scheme: light;
    --canvas: #F5F2EB; --surface: #FFFDF8; --surface-2: #FFFDF8; --paper-2: #EDE8DE;
    --line: #E1DBCE; --line-strong: #CFC7B6;
    --ink: #1B1A17; --ink-2: #5C5850; --ink-3: #6B665A;
    --accent: #0F5F4C; --accent-2: #177A62; --accent-soft: #E4EFE9; --accent-ink: #0A3F33; --on-accent: #FFFFFF;
    --copper: #B6642B; --copper-soft: #F6E8DC;
    --ok: #1B7346; --ok-soft: #E4F2E9; --warn: #8A5A00; --warn-soft: #F8ECD2;
    --err: #A8321C; --err-soft: #F8E4DE; --neutral: #5C5850; --neutral-soft: #ECE7DB;
    --shadow: 0 18px 40px -24px rgba(27, 26, 23, .35); --shadow-pop: 0 30px 60px -30px rgba(27, 26, 23, .45);
    --backdrop: rgba(27, 26, 23, .35);
    --ring: 2px solid var(--accent); --input-border: var(--ink-3);
    --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --serif-medio: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --sans: Inter, system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --raio: 9px; --raio-lg: 14px; --raio-xl: 16px;
    --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
    --side: 264px; --rail: 72px; --topo: 56px;
    --rapido: 150ms; --suave: 220ms; --ease: cubic-bezier(.2, .7, .2, 1);
    /* Alias de compatibilidade das telas U2–U4 e do portal. */
    --color-primary: var(--accent); --color-on-primary: var(--on-accent);
    --color-secondary: var(--accent-soft); --color-on-secondary: var(--accent);
    --color-accent: var(--accent); --color-on-accent: var(--on-accent);
    --color-background: var(--canvas); --color-foreground: var(--ink);
    --color-card: var(--surface); --color-card-foreground: var(--ink);
    --color-muted: var(--neutral-soft); --color-muted-foreground: var(--ink-2);
    --color-border: var(--line); --color-destructive: var(--err); --color-on-destructive: var(--on-accent);
    --primaria: var(--accent); --primaria-escura: var(--accent-ink); --primaria-clara: var(--accent-soft);
    --fundo: var(--canvas); --superficie: var(--surface); --texto: var(--ink); --texto-suave: var(--ink-2);
    --linha: var(--line); --linha-forte: var(--line-strong); --focus-strong: var(--accent);
    --ok-fundo: var(--ok-soft); --pendente: var(--warn); --pendente-fundo: var(--warn-soft);
    --erro: var(--err); --erro-fundo: var(--err-soft); --neutro: var(--neutral); --neutro-fundo: var(--neutral-soft);
  }
  /* Tema escuro só por escolha explícita no menu do avatar; o padrão é o papel claro. */
  [data-theme="dark"] {
    color-scheme: dark;
    --canvas: #1A1915; --surface: #23221D; --surface-2: #2A2923; --paper-2: #14130F;
    --line: #34332C; --line-strong: #4A483F;
    --ink: #F1EDE3; --ink-2: #C2BCAE; --ink-3: #ABA595;
    --accent: #7FCBB0; --accent-2: #9ADBC4; --accent-soft: #1B342C; --accent-ink: #DDF1E8; --on-accent: #0A1F1A;
    --copper: #E09A62; --copper-soft: #3D2A1B;
    --ok: #8AD3A6; --ok-soft: #17301F; --warn: #EFC26A; --warn-soft: #3A2C0E;
    --err: #F29C8B; --err-soft: #3F1D16; --neutral: #C2BCAE; --neutral-soft: #2E2D26;
    --shadow: 0 18px 40px -24px rgba(0, 0, 0, .7); --shadow-pop: 0 30px 60px -30px rgba(0, 0, 0, .8);
    --backdrop: rgba(0, 0, 0, .55);
  }
}
@layer reset {
  * { box-sizing: border-box; }
  html { font-size: 14px; }
  body { margin: 0; font: 14px/1.5 var(--sans); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
  ::selection { background: var(--accent-soft); color: var(--accent-ink); }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
  h1, h2, h3, p { margin-top: 0; }
  h1 { font: 400 40px/1.05 var(--serif); letter-spacing: -.01em; margin-bottom: 6px; overflow-wrap: anywhere; text-wrap: balance; }
  h1 em { font-style: italic; color: var(--accent); }
  h2 { font: 400 22px/1.1 var(--serif); letter-spacing: -.005em; color: var(--ink); margin: 26px 0 10px; text-wrap: balance; }
  h3 { font-size: 15px; font-weight: 500; letter-spacing: -.005em; }
  p, dd, li { overflow-wrap: anywhere; }
  small { font-size: 12px; color: var(--ink-2); }
  button, input, select, textarea { font: inherit; color: inherit; }
  button, summary, a, select { touch-action: manipulation; }
  button, summary { cursor: pointer; }
  img { max-width: 100%; height: auto; }
  :focus-visible { outline: var(--ring); outline-offset: 2px; border-radius: 6px; }
  main:focus { outline: none; }
  .js a, .js button, .js summary { transition: background-color var(--rapido) var(--ease), color var(--rapido) var(--ease), border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease), opacity var(--rapido); }
  pre, code { font-family: var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
  dl { margin: 0; } dt { color: var(--ink-2); } dd { margin: 0 0 16px; }
  kbd { font: 11px var(--mono); color: var(--ink-2); padding: 1px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--canvas); border-radius: 999px; }
  ::-webkit-scrollbar-track { background: transparent; }
}
@layer casca {
  .shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns var(--suave) var(--ease); }
  .sidebar { background: var(--paper-2); border-right: 1px solid var(--line); padding: 18px 14px 14px; position: sticky; top: 0; height: 100dvh; overflow: hidden auto; display: flex; flex-direction: column; gap: 10px; z-index: 4; }
  .brand { color: var(--ink); display: flex; align-items: center; gap: 12px; padding: 6px 8px 14px; border-bottom: 1px solid var(--line); }
  .brand:hover { text-decoration: none; }
  .brand-mark { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; background: var(--accent); color: var(--on-accent); border-radius: 4px; box-shadow: none; overflow: hidden; }
  .brand-mark svg { width: 100%; height: 100%; display: block; }
  .brand strong { font: 400 21px/1 var(--serif); letter-spacing: 0; color: var(--ink); }
  .brand strong .ia { color: var(--copper); font-variant-caps: small-caps; letter-spacing: .04em; }
  .brand strong .linha { display: block; }
  .condominio { margin: 0; padding: 0 8px; color: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar nav { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
  .sidebar nav a:not(.botao), .nav-grupo summary { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 9px 10px; border-radius: var(--raio); font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
  .sidebar nav a:not(.botao):hover, .nav-grupo summary:hover { background: rgba(27, 26, 23, .05); text-decoration: none; color: var(--ink); }
  .sidebar nav a.ativo { color: var(--accent-ink); background: var(--surface); font-weight: 500; box-shadow: 0 1px 2px rgba(27, 26, 23, .08); }
  .sidebar nav a.ativo .icone { color: var(--accent); }
  .nav-grupo { margin: 0; }
  .nav-grupo summary { list-style: none; font-weight: 500; }
  summary::-webkit-details-marker { display: none; }
  .nav-seta { margin-left: auto; display: flex; opacity: .55; transition: transform var(--suave) var(--ease); }
  .nav-seta svg { width: 14px; height: 14px; }
  .nav-grupo[open] > summary .nav-seta { transform: rotate(90deg); }
  .nav-itens { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; padding-left: 30px; }
  .sidebar .nav-itens a { min-height: 32px; padding: 6px 10px; font-size: 13px; border-radius: 7px; }
  .sidebar .nav-itens a.ativo { box-shadow: none; position: relative; }
  .sidebar .nav-itens a.ativo::before { content: ''; position: absolute; left: -14px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent); }
  .nav-ponto { width: 8px; color: var(--ink-3); }
  .sidebar-rodape { margin: auto 0 0; padding: 8px; font-size: 11px; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .sidebar-rodape small { color: inherit; font-size: inherit; }
  .area-trabalho { min-width: 0; display: flex; flex-direction: column; }
  .topbar { height: var(--topo); min-height: var(--topo); padding: 0 28px; display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--canvas) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--rapido); }
  .topbar.rolada { border-color: var(--line); }
  .breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; white-space: nowrap; color: var(--ink-3); }
  .breadcrumb a:not(.botao) { color: var(--ink-3); } .breadcrumb a:not(.botao):hover { color: var(--ink); text-decoration: none; }
  .breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 500; }
  .topbar-acoes { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  .icone { flex-shrink: 0; vertical-align: middle; }
  .icone-botao, .menu-nativo > summary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; color: var(--ink-2); width: 34px; min-width: 34px; height: 34px; padding: 0; border-radius: var(--raio); }
  .icone-botao:hover, .menu-nativo > summary:hover { background: rgba(27, 26, 23, .06); color: var(--ink); }
  .comando-gatilho { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 220px; padding: 0 10px 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-3); font-size: 13px; }
  .comando-gatilho:hover { text-decoration: none; color: var(--ink-2); border-color: var(--ink-3); }
  .comando-gatilho kbd { margin-left: auto; border-bottom-width: 1px; background: transparent; color: var(--ink-3); }
  .alertas-menu > summary { position: relative; }
  .alertas-menu > summary .contador:empty, .alertas-menu > summary .contador[data-zero] { display: none; }
  .avatar { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; color: var(--on-accent); background: var(--accent); font: italic 16px/1 var(--serif); }
  .conteudo { width: 100%; max-width: 1236px; padding: 22px 28px 60px; margin-inline: auto; flex: 1; min-width: 0; }
  .rodape-build { padding: 12px 28px; font-size: 12px; color: var(--ink-3); }
  .rodape-build a:not(.botao) { color: inherit; }
  [data-sidebar="rail"] .shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
  [data-sidebar="rail"] .sidebar { padding: 18px 10px 14px; overflow: visible; }
  [data-sidebar="rail"] .sidebar .nav-text, [data-sidebar="rail"] .nav-seta, [data-sidebar="rail"] .condominio, [data-sidebar="rail"] .sidebar-rodape { display: none; }
  [data-sidebar="rail"] .brand { justify-content: center; padding: 6px 0 12px; }
  [data-sidebar="rail"] .sidebar nav a, [data-sidebar="rail"] .nav-grupo > summary { justify-content: center; padding: 10px; }
  [data-sidebar="rail"] .nav-grupo { position: relative; }
  [data-sidebar="rail"] .nav-grupo[data-ativo] > summary { color: var(--accent-ink); background: var(--surface); box-shadow: 0 1px 0 var(--line); }
  [data-sidebar="rail"] .nav-itens { display: none; position: absolute; left: 56px; top: 0; width: 232px; margin: 0; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); z-index: 6; }
  [data-sidebar="rail"] .nav-grupo[open]:focus-within .nav-itens, [data-sidebar="rail"] .nav-grupo[open]:hover .nav-itens { display: flex; }
  [data-sidebar="rail"] .nav-itens .nav-text { display: inline; }
  [data-sidebar="rail"] .sidebar .nav-itens a { justify-content: flex-start; }
  [data-sidebar="hidden"] .shell, [data-foco="true"] .shell { grid-template-columns: minmax(0, 1fr); }
  [data-sidebar="hidden"] .sidebar, [data-foco="true"] .sidebar { display: none; }
  [data-foco="true"] .topbar { height: 44px; min-height: 44px; }
  body.login { display: flex; flex-direction: column; min-height: 100dvh; background: var(--canvas); }
  .caixa-login { width: min(420px, calc(100% - 32px)); padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio-xl); box-shadow: var(--shadow); }
  .caixa-login form { display: grid; gap: 16px; margin-top: 24px; }
  .caixa-login .brand { padding: 0; margin-bottom: 24px; border: 0; }
  .caixa-login h1 { font-size: 30px; }
  @media (max-width: 899px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; height: auto; }
    .js .sidebar { position: fixed; inset: var(--topo) auto 0 0; width: var(--side); height: calc(100dvh - var(--topo)); box-shadow: var(--shadow-pop); }
    .js[data-sidebar="rail"] .sidebar { width: var(--rail); }
    [data-sidebar="rail"] .shell { grid-template-columns: minmax(0, 1fr); }
    .topbar { padding-inline: 14px; gap: 8px; }
    .topbar-acoes { gap: 4px; }
    .comando-gatilho { min-width: 0; width: 34px; padding: 0; justify-content: center; border-radius: var(--raio); }
    .comando-gatilho span, .comando-gatilho kbd { display: none; }
    .breadcrumb { flex: 1; } .breadcrumb a, .breadcrumb > span:first-of-type { display: none; }
    .conteudo { padding: 18px 16px 48px; }
    h1 { font-size: 32px; }
    .tabela-scroll th:first-child, .tabela-scroll td:first-child { white-space: nowrap; min-width: 180px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
    .tabela-scroll thead th:first-child { z-index: 2; }
    .rodape-build { padding: 12px 16px; }
  }
}
@layer componentes {
  .cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
  .cabecalho p { margin-bottom: 0; }
  .contexto, .suave { color: var(--ink-2); font-size: 14px; }
  .acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .botao { display: inline-flex; justify-content: center; align-items: center; gap: 8px; height: 38px; padding: 0 16px; font-weight: 500; font-size: 13.5px; border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: var(--on-accent); text-decoration: none; box-shadow: 0 8px 18px -10px rgba(15, 95, 76, .7); transition: transform 120ms var(--ease), background-color var(--rapido), box-shadow var(--rapido); }
  .botao:hover { text-decoration: none; background: var(--accent-2); }
  .botao:active { transform: translateY(1px); }
  .botao.sec, .botao.secundario, .botao.perigo { color: var(--ink); border-color: var(--line-strong); background: var(--surface); box-shadow: none; }
  .botao.sec:hover, .botao.secundario:hover, .botao.perigo:hover { background: var(--paper-2); }
  .botao.perigo { color: var(--err); }
  .botao.terciario, .botao.link { background: none; color: var(--ink-2); border-color: transparent; box-shadow: none; }
  .botao.terciario:hover, .botao.link:hover { background: rgba(27, 26, 23, .06); color: var(--ink); }
  .botao:disabled { background: var(--neutral-soft); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; box-shadow: none; transform: none; }
  .botao .icone { width: 16px; height: 16px; }
  #ui-confirmacao .perigo { color: var(--on-accent); background: var(--err); border-color: var(--err); }
  .abas-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 24px; padding: 2px; }
  .abas { display: flex; width: max-content; gap: 2px; padding: 3px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; }
  .abas a:not(.botao) { padding: 0 12px; height: 30px; display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap; font-size: 13px; color: var(--ink-2); }
  .abas a[aria-current] { color: var(--accent-ink); background: var(--surface); font-weight: 500; box-shadow: 0 1px 2px rgba(27, 26, 23, .08); }
  .abas a:not(.botao):hover { color: var(--ink); text-decoration: none; }
  .stats, .cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0 0 24px; }
  .stats { gap: 0; padding: 12px 0; }
  .stat { padding: 0 24px; }
  .stat:first-child { padding-left: 0; }
  .stat + .stat { border-left: 1px solid var(--line); }
  .rotulo, .eyebrow { color: var(--ink-3); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; }
  .numero { font: 400 28px/1.1 var(--serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; margin: 8px 0 6px; }
  .nota { font-size: 12px; color: var(--ink-2); }
  .cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio-lg); padding: 18px 20px; min-width: 0; box-shadow: var(--shadow); }
  .numero-tipo, .numero-nome { font-size: 16px; }
  .tabela-scroll { position: relative; max-width: 100%; max-height: 65vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio-lg); box-shadow: var(--shadow); margin: 12px 0 24px; }
  table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; background: var(--surface); }
  th, td { height: 44px; padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
  thead th { position: sticky; top: 0; z-index: 1; color: var(--ink-3); background: var(--surface); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
  tbody th { font-weight: 500; }
  tbody tr:hover > *, tbody tr:focus-within > * { background: var(--canvas); }
  tbody tr[data-href] { cursor: pointer; }
  tr:last-child > td, tr:last-child > th { border-bottom: 0; }
  tfoot th, tfoot td { background: var(--canvas); font-weight: 600; border-top: 1px solid var(--line-strong); border-bottom: 0; }
  td small { display: block; }
  td a, th a { color: var(--ink); }
  td .botao { height: 28px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
  .num, .valor { font-variant-numeric: tabular-nums lining-nums; text-align: right; white-space: nowrap; }
  .chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; color: var(--neutral); background: var(--neutral-soft); white-space: nowrap; }
  .chip.ok { color: var(--ok); background: var(--ok-soft); }
  .chip.pendente { color: var(--warn); background: var(--warn-soft); }
  .chip.erro { color: var(--err); background: var(--err-soft); }
  .chip.info { color: var(--accent); background: var(--accent-soft); }
  .contador { color: var(--ink-3); background: var(--neutral-soft); border-radius: 999px; font: 500 11px/1.6 var(--sans); min-width: 20px; padding: 1px 8px; text-align: center; }
  .secao-recolhivel { border-top: 1px solid var(--line); margin: 22px 0; padding-top: 4px; }
  summary { min-height: 36px; padding: 8px 0; }
  .secao-recolhivel > summary { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-2); padding: 12px 0; list-style: none; }
  .secao-recolhivel > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); margin: 0 6px 0 4px; transition: transform var(--suave) var(--ease); }
  .secao-recolhivel[open] > summary::before { transform: rotate(45deg); }
  .secao-recolhivel > summary:hover { color: var(--ink); }
  .secao-corpo { padding: 4px 0 16px 26px; }
  .secao-corpo > h2:first-child { margin-top: 8px; }
  .vazio { padding: 28px 16px; text-align: center; color: var(--ink-3); font-size: 13.5px; }
  .vazio p { margin: 0 0 12px; }
  form { margin-block: 16px; }
  form.linha, .formulario, .filtros { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
  label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; min-width: 0; }
  .campo { min-width: 0; }
  .campo-ajuda, .campo-erro { max-width: 45ch; font-size: 12px; font-weight: 400; }
  .campo-ajuda { color: var(--ink-3); } .campo-erro { color: var(--err); }
  /* Obrigatoriedade visível sem tocar em 110 formulários: o marcador nasce do próprio `required`. */
  /* Só o primeiro span é o rótulo: campo-valor e campo-percentual têm um segundo span de entrada,
     que ganhava um asterisco solto embaixo do campo. */
  /* O estado da despesa ("aguardando aprovação · 0 de 2 assinaturas") vazava 107 px fora da janela. */
  .detalhe-lateral .chip { max-width: 100%; height: auto; min-height: 22px; padding-block: 3px; white-space: normal; overflow-wrap: anywhere; }
  .campo:has(:required) > span:first-of-type::after { content: " *"; color: var(--err); font-weight: 600; }
  input, select, textarea { min-height: 38px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: var(--raio); background: var(--surface); font-size: 14px; font-weight: 400; caret-color: var(--accent); transition: border-color var(--rapido), box-shadow var(--rapido); }
  input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
  textarea { width: 100%; min-height: 110px; resize: vertical; }
  input[type="checkbox"], input[type="radio"] { min-height: 18px; width: 18px; height: 18px; accent-color: var(--accent); }
  [aria-invalid="true"] { border-color: var(--err); }
  fieldset { min-width: 0; border: 1px solid var(--line); border-radius: var(--raio-lg); padding: 18px 20px; }
  .formulario > .campo { flex: 1 1 240px; }
  .form-despesa, .form-grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
  .barra-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
  .filtro-chip { display: inline-flex; gap: 10px; align-items: center; height: 30px; padding: 0 12px; }
  .busca-lista { max-width: 320px; margin: -8px 0 16px; font-size: 12px; color: var(--ink-2); }
  .form-filtros { display: grid; gap: 20px; }
  .form-filtros .acoes { margin-top: 20px; }
  .comp-nav { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); height: 34px; padding: 0 4px; font-size: 13px; white-space: nowrap; }
  .comp-nav a:not(.botao) { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; font-size: 18px; line-height: 1; color: var(--ink-2); }
  .comp-nav a:not(.botao):hover { background: var(--paper-2); text-decoration: none; color: var(--ink); }
  .comp-nav strong { padding: 0 8px; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
  .paginacao { display: flex; gap: 12px; align-items: center; font-size: 12px; margin-block: 20px; }
  .aviso { padding: 12px 16px; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--raio-lg); color: var(--ink-2); background: var(--surface); }
  .importacao-vinculos { list-style: disc; padding-inline-start: 16px; }
  .importacao-vinculos li + li { margin-top: 16px; }
  .aviso ul { list-style: disc; padding-inline-start: 16px; margin: 12px 0 0; }
  .aviso li + li { margin-top: 12px; }
  .aviso > h2 { margin: 0 0 10px; color: inherit; }
  .aviso.erro { color: var(--err); background: var(--err-soft); border-color: transparent; }
  .aviso.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
  .aviso.pendente { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
  .toast { display: flex; align-items: center; gap: 16px; background: var(--ink); color: var(--canvas); border: 0; border-radius: 10px; padding: 10px 10px 10px 14px; font-size: 13px; box-shadow: var(--shadow-pop); }
  .toast.aviso.erro { color: var(--canvas); background: var(--err); } .toast.aviso.ok { color: var(--canvas); background: var(--ink); }
  .js .toast { position: fixed; left: 50%; top: calc(var(--topo) + 12px); transform: translateX(-50%); z-index: 8; max-width: min(480px, calc(100% - 32px)); }
  .toast-fechar, .dialog-fechar { border: 0; background: none; color: inherit; padding: 6px; min-width: 28px; min-height: 28px; border-radius: 6px; opacity: .8; }
  .toast-fechar:hover, .dialog-fechar:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
  dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--raio-xl); box-shadow: var(--shadow-pop); }
  dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
  dialog h2 { margin: 0 0 20px; font-size: 22px; }
  .dialog-fechar { position: absolute; top: 12px; right: 12px; font-size: 20px; color: var(--ink-2); }
  .dialog-fechar:hover { background: rgba(27, 26, 23, .06); }
  .gaveta { margin: 0 0 0 auto; width: min(420px, 100%); height: 100dvh; max-height: 100dvh; border-radius: var(--raio-xl) 0 0 var(--raio-xl); padding: 28px 24px; }
  .menu-nativo, .menu-acoes { position: relative; margin: 0; }
  .menu-nativo > summary, .menu-acoes > summary { list-style: none; }
  .menu-acoes > summary { width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px; line-height: 1; padding: 0; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
  .menu-acoes > summary:hover { background: var(--paper-2); }
  .acao-linha > summary { width: 28px; height: 28px; min-height: 28px; opacity: 0; }
  tr:hover .acao-linha > summary, .acao-linha:focus-within > summary { opacity: 1; }
  @media (hover: none) { .acao-linha > summary { opacity: 1; } }
  .menu-conteudo { display: grid; gap: 4px; padding: 8px; }
  .menu-conteudo > strong { padding: 8px 10px 2px; font-size: 13px; }
  .menu-conteudo > small { padding: 0 10px 8px; }
  details > .menu-conteudo { position: absolute; right: 0; top: calc(100% + 8px); z-index: 7; width: 272px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-pop); }
  .menu-conteudo a:not(.botao), .menu-conteudo label, .menu-conteudo .botao.terciario { padding: 9px 10px; color: var(--ink); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; border-radius: 8px; min-height: 36px; align-items: center; }
  .menu-conteudo a:not(.botao):hover, .menu-conteudo .botao.terciario:hover { background: var(--canvas); text-decoration: none; }
  .menu-conteudo a:not(.botao) > span { color: var(--ink-3); }
  .menu-conteudo label { flex-direction: row; font-weight: 400; }
  .menu-conteudo label select { min-height: 30px; padding: 2px 8px; }
  .menu-conteudo form { margin: 4px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
  .menu-conteudo form .botao { width: 100%; }
  .popover { position: fixed; inset: 64px 28px auto auto; margin: 0; width: 300px; padding: 20px 0 0; }
  .paleta { margin-top: min(140px, 12vh); width: min(580px, calc(100% - 32px)); padding: 0; }
  .paleta h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
  #comandos-busca { width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 20px; font-size: 16px; background: transparent; }
  #comandos-busca:focus-visible { box-shadow: none; border-color: var(--line); }
  #comandos-lista { list-style: none; padding: 8px; margin: 0; max-height: 48vh; overflow: auto; }
  :where(#comandos-lista) a { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 12px; border-radius: var(--raio); color: var(--ink); font-size: 13.5px; }
  :where(#comandos-lista) a small { color: var(--ink-3); }
  :where(#comandos-lista) a:hover { text-decoration: none; background: var(--canvas); }
  :where(#comandos-lista) [aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
  #comandos-status { margin: 0; padding: 10px 20px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
  .comandos-fallback { margin: 16px 24px; }
  .fracao { appearance: none; border: 0; height: 6px; background: var(--accent-soft); }
  .fracao::-webkit-meter-bar { height: 6px; background: var(--accent-soft); border: 0; }
  .fracao::-webkit-meter-optimum-value { background: var(--accent); }
  .fracao::-moz-meter-bar { background: var(--accent); }
  @media (min-width: 900px) { .form-despesa, .form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 899px) { .stats, .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .popover { inset: 64px 14px auto auto; } }
  @media (max-width: 600px) {
    .cabecalho { align-items: flex-start; flex-direction: column; } .stats { gap: 12px; }
    .rotulo, .nota { font-size: 11px; } .numero { font-size: 26px; }
    .cabecalho .acoes { flex-shrink: 0; }
    .filtros > .campo, form.linha > .campo { flex: 1 1 100%; }
    .campo input:not([type=checkbox]):not([type=radio]), .campo select { width: 100%; }
    .coluna-dupla { grid-column: auto; }
    .descricao-larga { min-width: 0; }
  }
}
@layer utilitarios {
  [hidden], .so-imprimir, .js-only { display: none !important; }
  .js .js-only { display: inline-flex !important; }
  .js label.js-only { display: flex !important; }
  .js .filtros-fallback, .js .comandos-fallback { display: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .pular-conteudo { position: fixed; top: 8px; left: 8px; transform: translateY(-200%); z-index: 20; padding: 12px; background: var(--surface); color: var(--ink); border-radius: var(--raio); box-shadow: var(--shadow-pop); }
  .pular-conteudo:focus { transform: translateY(0); }
  .mono { font-family: var(--mono); font-size: .93em; }
  .quebra-longa { overflow-wrap: anywhere; } .preserva-linhas { white-space: pre-wrap; }
  .texto-padrao { color: var(--ink); } .sem-margem-superior { margin-top: 0; }
  .margem-superior { margin-top: 16px; } .margem-superior-curta { margin-top: 12px; } .margem-inferior { margin-bottom: 20px; }
  .coluna-inteira, .acoes-despesa { grid-column: 1/-1; } .coluna-dupla { grid-column: span 2; }
  .acoes-despesa { display: flex; flex-wrap: wrap; gap: 8px; }
  .opcao-horizontal, .opcao-lancamento { flex-direction: row; align-items: center; gap: 8px; }
  .form-inline { display: inline; } .fracao-largura { width: 60px; } .parcela-curta { width: 70px; }
  .descricao-larga { min-width: 260px; }
  .conta-sintetica { background: var(--canvas); font-weight: 600; }
  .col-36 { width: 36%; } .col-12 { width: 12%; } .col-30 { width: 30%; } .col-15 { width: 15%; }
  .etiqueta { font-size: 12px; color: var(--ink-2); }
  @media (max-width: 600px) { .coluna-dupla { grid-column: auto; } .descricao-larga { min-width: 0; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
  @media print {
    @page { size: A4 landscape; margin: 12mm; }
    .sidebar, .topbar, .rodape-build, .pular-conteudo, .abas-scroll, .barra-filtros, .filtros-fallback, .comandos-fallback,
    .comp-nav, .paginacao, .filtros, form, dialog, .toast, .nao-imprimir, .acoes, .botao, button, .sr-only, details:has(form) { display: none !important; }
    .shell, .area-trabalho { display: block; min-height: 0; } .conteudo { padding: 0; max-width: none; }
    .so-imprimir { display: block !important; } .tabela-scroll { max-height: none; overflow: visible; box-shadow: none; }
    body { font-size: 10pt; } table { font-size: 8pt; } thead th { position: static; }
    th, td { white-space: normal !important; padding: 2mm; } tr { break-inside: avoid; }
    details::details-content { content-visibility: visible; } details > :not(form) { display: block !important; }
    a { color: inherit; text-decoration: none; } h1, h2, h3 { break-after: avoid; }
  }
}

/* Painel: folha de caixa. Hairlines, um número enorme, um anel; cartão só na tabela. */
@layer componentes {
  html { background: var(--canvas); }
  body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
  .folha-data { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: 12.5px; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .folha-data .sep { color: var(--line-strong); }
  .folha-data .mono { color: var(--ink-2); }
  .folha-data span:first-child::first-letter { text-transform: uppercase; }
  .hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 44px; padding: 6px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  .hero .caixa { padding-right: 44px; border-right: 1px solid var(--line); min-width: 0; }
  .hero .num { text-align: left; }
  .giant { font: 400 92px/1 var(--serif); letter-spacing: -.03em; margin: 12px 0 22px; color: var(--ink); white-space: nowrap; display: flex; align-items: baseline; }
  .giant small { font: inherit; font-size: 34px; color: var(--ink-3); margin-right: 6px; letter-spacing: 0; }
  .giant .cent { font-size: 46px; color: var(--ink-2); letter-spacing: -.02em; }
  .stack { display: block; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: var(--paper-2); }
  .stack rect { transition: none; }
  .fundo-1 rect, rect.fundo-1 { fill: var(--accent); } rect.fundo-2 { fill: var(--accent-2); } rect.fundo-3 { fill: var(--copper); } rect.fundo-4, rect.fundo-5 { fill: var(--line-strong); }
  .stack-legenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; margin: 18px 0 14px; }
  .stack-legenda .fundo { min-width: 0; }
  .stack-legenda .eyebrow { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stack-legenda i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
  .stack-legenda .fundo-2 i { background: var(--accent-2); } .stack-legenda .fundo-3 i { background: var(--copper); } .stack-legenda .fundo-4 i, .stack-legenda .fundo-5 i { background: var(--line-strong); }
  .stack-legenda b { display: block; font: 400 24px/1.1 var(--serif); margin: 6px 0 4px; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stack-legenda .pct { font-size: 12px; color: var(--ink-3); }
  .meta { color: var(--ink-2); font-size: 13px; margin: 0; }
  .meta a:not(.botao) { color: var(--accent); }  /* .botao guarda a própria cor: sem o :not, some no fundo */
  .hero .mes { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .eyebrow em { font: italic 13px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--accent); }
  .ring { display: flex; align-items: center; gap: 24px; }
  .donut-wrap { position: relative; width: 132px; height: 132px; flex: none; display: grid; place-items: center; }
  .donut { width: 132px; height: 132px; transform: rotate(-90deg); }
  .donut-fundo { fill: none; stroke: var(--copper-soft); stroke-width: 3.2; }
  .donut-valor { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: butt; }
  .donut-rotulo { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
  .donut-rotulo b { font: 400 28px/1 var(--serif); font-variant-numeric: tabular-nums; text-align: center; }
  .donut-rotulo small { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
  .legend { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
  .legend div { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
  .legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); flex: none; }
  .legend .aberta i { background: var(--copper); } .legend .vencida i { background: var(--err); } .legend .total i { background: transparent; }
  .legend .total { padding-top: 9px; border-top: 1px solid var(--line); color: var(--ink); }
  .legend b { margin-left: auto; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
  .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .kpis .stat { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; padding: 0; border: 0; font-size: 13px; color: var(--ink-2); gap: 2px 8px; }
  .kpis .rotulo { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--ink-2); }
  .kpis .numero { font-size: 22px; margin: 0; color: var(--ink); }
  .kpis .nota { flex-basis: 100%; font-size: 11px; color: var(--ink-3); }
  .calmo { font: italic 18px/1.4 var(--serif); color: var(--ink-2); margin: 8px 0 0; }
  .calmo em { color: var(--accent); }
  .calmo a { font-style: normal; }
  .hoje { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 44px; padding-bottom: 8px; }
  .hoje .decidir { padding-right: 44px; border-right: 1px solid var(--line); min-width: 0; }
  .section { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px; }
  .section h2 { margin: 0; }
  .section .tools { display: flex; gap: 6px; margin-left: auto; }
  .section .botao { height: 32px; padding: 0 12px; font-size: 13px; }
  .lista-fina { display: flex; flex-direction: column; }
  .linha-fina { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; }
  .linha-fina:last-child { border-bottom: 1px solid var(--line); }
  .linha-fina:hover { text-decoration: none; color: var(--accent-ink); }
  .linha-fina:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
  .linha-fina > span:first-child { flex: 1; min-width: 0; }
  .linha-fina .cobre { margin-left: auto; font: 400 24px/1 var(--serif); color: var(--copper); }
  .linha-fina.pag { font-size: 13.5px; flex-wrap: wrap; row-gap: 4px; }
  .linha-fina.pag .pag-desc { flex-basis: 100%; }
  .pag-desc { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
  .pag-desc { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .pag-desc small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .linha-fina.pag .chip { flex: none; }
  .pag-desc small { color: var(--ink-3); font-size: 12px; }
  .pag-data { color: var(--ink-3); font-size: 12px; }
  .linha-fina.pag b { font: 400 18px/1 var(--serif); font-variant-numeric: tabular-nums; }
  .acct { display: flex; align-items: center; gap: 10px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
  .dot.off { background: var(--line-strong); }
  .foot { margin-top: 40px; color: var(--ink-3); font-size: 12px; display: flex; gap: 12px; }
  /* O único momento de movimento da folha: o número assenta e o anel se desenha. */
  @keyframes assentar { from { opacity: 0; transform: translateY(10px); } }
  @keyframes anel { to { stroke-dashoffset: 0; } }
  .js .giant { animation: assentar 620ms var(--ease) both; }
  .js .stack, .js .stack-legenda { animation: assentar 620ms var(--ease) 120ms both; }
  .js .ring, .js .kpis { animation: assentar 620ms var(--ease) 200ms both; }
  .js .donut-valor { animation: anel 1100ms cubic-bezier(.16, 1, .3, 1) 260ms both; }
  @media (max-width: 1100px) {
    .hero, .hoje { grid-template-columns: 1fr; gap: 26px; }
    .hero .caixa, .hoje .decidir { padding-right: 0; border-right: 0; }
    .hero .mes { padding-top: 22px; border-top: 1px solid var(--line); }
  }
  @media (max-width: 600px) {
    .giant { font-size: 60px; } .giant small { font-size: 22px; margin-top: 6px; } .giant .cent { font-size: 32px; }
    .stack-legenda { grid-template-columns: 1fr; }
    .pag-desc, .pag-desc small { white-space: normal; overflow: visible; text-overflow: clip; }
    .kpis { grid-template-columns: 1fr; }
    .kpis .stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
    .kpis .rotulo { min-width: 0; }
    .kpis .nota { grid-column: 1 / -1; margin-top: -2px; }
  }
}

/* U2 · padrões do painel. Componentes do portal conservam seus próprios limites. */
@layer componentes {
  .titulo-estado { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .titulo-estado h1 { margin-bottom: 0; }
  .cabecalho .contexto { margin-top: 6px; }
  .busca-lista { position: relative; width: 320px; max-width: 100%; margin: 0 0 0 auto; }
  .busca-lista .icone { position: absolute; top: 10px; left: 12px; color: var(--ink-3); }
  .busca-lista input { width: 100%; padding-left: 38px; border-radius: 999px; }
  .barra-filtros { width: 100%; }
  .barra-filtros > .botao.secundario { height: 34px; padding: 0 14px; font-size: 13px; }
  .sidebar nav a.ativo:hover, .abas a[aria-current]:hover { color: var(--accent-ink); background: var(--surface); }
  .ui-tabela td:has(> .chip) { text-align: left; }
  .ui-tabela tr > .num:first-child, .ui-tabela tr > .num:first-child a:not(.botao), .terciaria { color: var(--ink-3); }
  .identificador { color: var(--ink-3); font-size: 12px; }
  .menu-conteudo a { justify-content: flex-start; align-items: center; }
  .menu-conteudo .icone { color: var(--ink-3); }
  .menu-conteudo button { justify-content: flex-start; }
  .form-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .form-filtros > * { grid-column: 1 / -1; }
  .form-filtros > label:has(input[type=date]), .form-filtros > label:has(input[type=datetime-local]) { grid-column: auto; }
  [data-gaveta-conteudo] { min-height: 100%; display: flex; flex-direction: column; }
  .gaveta .form-filtros { flex: 1; grid-template-rows: none; margin-bottom: 0; }
  .filtro-rodape { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 16px 0 0; justify-content: space-between; align-self: end; }
  .gaveta [data-gaveta-conteudo] { height: 100%; }
  .gaveta .form-filtros { display: flex; flex-direction: column; }
  .datas-filtro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .gaveta .filtro-rodape { margin-top: auto; }
  .editor-dialog { width: min(784px, calc(100% - 32px)); padding: 28px 32px 0; }
  .js .editor-fallback { display: none; }
  .editor-fallback:target { display: block; }
  .form-padrao { max-width: 720px; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 16px 0 24px; background: none; border: 0; padding: 0; border-radius: 0; align-items: start; }
  .form-padrao > .linha, .form-padrao > .cartoes { display: contents; }
  .form-padrao > h2, .form-padrao > h3, .form-padrao > p, .form-padrao > fieldset, .form-padrao > details, .form-padrao > .coluna-inteira, .form-padrao > #itens-modelo, .form-padrao > #pautas-novas { grid-column: 1 / -1; }
  .form-padrao h2, .form-padrao h3, .form-padrao legend { font: 500 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 16px 0 0; }
  .form-padrao > .campo { width: 100%; }
  .form-padrao input:not([type=checkbox]):not([type=radio]), .form-padrao select { width: 100%; }
  .campo:has(textarea), .campo:has(input[type=file]), .campo:has([name=descricao]), .campo:has([name=titulo]), .campo:has([name=assunto]), .campo:has([name=linha_digitavel]), .campo:has([name=referencia_parecer]) { grid-column: 1 / -1; }
  .form-padrao textarea { min-height: 130px; height: 150px; }
  .form-padrao .campo:has(input[type=checkbox]) { flex-direction: row; align-items: center; justify-content: flex-start; }
  .form-padrao .campo:has(input[type=checkbox]) input { order: -1; flex-shrink: 0; }
  .form-padrao .campo:has(input[type=file]) { padding: 20px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--raio-lg); }
  .anexos-selecionados { padding-left: 16px; font-size: 12px; color: var(--ink-3); }
  .form-acoes { grid-column: 1 / -1; position: static; display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 16px 0; border-top: 1px solid var(--line); background: var(--canvas); margin-top: 16px; }
  .form-acoes > .cancelar { margin-right: auto; }
  dialog .form-acoes { background: var(--surface); position: sticky; bottom: 0; z-index: 2; }
  .form-acoes > div { display: contents; }
  .opcoes-multiplas { min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--raio-lg); padding: 4px 12px; }
  .opcoes-multiplas > div { max-height: 240px; overflow-y: auto; padding: 8px 2px; }
  .opcoes-multiplas label { flex-direction: row; align-items: center; margin-block: 8px; }
  .opcoes-multiplas input[type=search] { width: 100%; }
  .detalhe-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  .detalhe-principal, .detalhe-lateral { min-width: 0; }
  .detalhe-lateral { border-top: 1px solid var(--line); padding-top: 20px; }
  .detalhe-lateral h2:first-child { margin-top: 0; }
  .detalhe-lateral dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; font-size: 13px; }
  .detalhe-lateral dd { margin: 0; font-variant-numeric: tabular-nums; }
  .detalhe-lateral .form-padrao { grid-template-columns: minmax(0, 1fr); }
  .detalhe-grade .cartoes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .detalhe-grade .cartao { padding: 0; border: 0; background: none; box-shadow: none; }
  .linha-tempo { list-style: none; padding: 0 0 0 18px; margin: 20px 0; border-left: 1px solid var(--line); }
  .linha-tempo > li, .linha-tempo > article { position: relative; padding: 0 0 24px; }
  .linha-tempo > li::before, .linha-tempo > article::before { content: ''; position: absolute; left: -22px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
  .linha-tempo time { font-family: var(--mono); color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; display: block; margin-bottom: 8px; }
  .operacoes-dialog { width: min(720px, calc(100% - 32px)); max-height: 80dvh; }
  [data-padrao=formulario] { max-width: 768px; }
  .como-funciona { margin: 12px 0 24px; color: var(--ink-2); font-size: 13px; }
  .como-funciona summary { font-weight: 500; }
  @media (min-width: 900px) { .form-padrao { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .detalhe-grade { grid-template-columns: minmax(0, 1fr) 320px; } .detalhe-lateral { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 24px; } }
  @media (max-width: 600px) { .busca-lista { width: 100%; margin: 0; } .editor-dialog { padding-inline: 16px; } .form-acoes { flex-wrap: wrap; } .stat { padding-inline: 12px; } }
}
@layer componentes {
  .acao-abrir { display: inline-flex; margin-left: 12px; color: var(--ink-3); opacity: 0; }
  tr:hover .acao-abrir, tr:focus-within .acao-abrir { opacity: 1; }
  .editor-dialog:has(.detalhe-grade) { width: min(1152px, calc(100% - 32px)); }
  .detalhe-lateral .numero { font-size: 20px; }
  @media (hover: none) { .acao-abrir { opacity: 1; } }
}
@layer componentes {
  .form-padrao fieldset .linha, .item-modelo, .pauta-nova { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 16px 0; }
  @media (min-width: 900px) { .form-padrao fieldset .linha, .item-modelo, .pauta-nova { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}
@layer componentes {
  .ui-tabela td > .menu-acoes { display: inline-block; vertical-align: middle; }
  .ui-tabela td .menu-acoes { margin: 0; }
  [data-padrao=lista] > section.cartao { border: 0; padding: 0; background: none; box-shadow: none; }
}

@layer componentes {
  .codigo-conta { color: var(--ink-2); font-family: var(--mono); font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; }
  .tabular, .valor { font-variant-numeric: tabular-nums; }
  .info-inline { display: flex; gap: 8px; color: var(--ink-2); font-size: 13px; margin: 12px 0; }
  .info-inline > span { flex: none; }
  .identificador-grupo { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
  .copiar-id { min-width: 32px; height: 28px; padding: 0 4px; }
  .cabecalho .acoes > form { display: contents; }
  .caixa-login .brand-mark { width: 36px; height: 36px; }
  .caixa-login img { display: block; max-width: 200px; width: 100%; margin: 16px auto; }
  .caixa-login code { overflow-wrap: anywhere; }
  .mensagem-inline { color: var(--ink-2); margin: 16px 0; }
  .mensagem-inline.erro { color: var(--err); }
  .erro-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
  .caixa-login form > .botao { width: 100%; height: 44px; }
}

@media print {
 :root, [data-theme="dark"] { --canvas: #fff; --surface: #fff; --surface-2: #fff; --paper-2: #fff; --ink: #1b1a17; --ink-2: #5c5850; --ink-3: #5c5850; --line: #e1dbce; --line-strong: #CFC7B6; --accent: #0F5F4C; --neutral-soft: #fff; --shadow: none; }
}

@layer componentes { p a:not(.botao) { text-decoration: underline; text-underline-offset: 3px; } }

@media print {
 .detalhe-grade { display: block; }
 .detalhe-lateral { width: auto; border: 0; padding: 0; margin-top: 6mm; }
 .ui-tabela th, .ui-tabela td { border-bottom: .5pt solid var(--line-strong); background: var(--surface); color: var(--ink); }
 .ui-tabela th { position: static; }
 .cabecalho { margin-bottom: 6mm; }
 .cabecalho h1 { font-size: 20px; color: var(--ink); }
 .menu-acoes, .menu-nativo { display: none !important; }
}

/* U5 · acesso, resumos e ergonomia transversal da folha de caixa. */
@layer componentes {
  .caixa-login .brand-mark { width: 32px; height: 32px; flex-basis: 32px; box-shadow: none; }
  .caixa-login .brand strong { font-size: 20px; }
  .caixa-login .brand strong .ia { color: var(--ink); }
  .caixa-login .brand strong .linha { display: inline; margin-left: .28em; }
  .caixa-login > p:not(.erro-numero):not(.erro), .caixa-login > ul { color: var(--ink-2); }
  .caixa-login input:not([type=checkbox]):not([type=radio]), .caixa-login .botao { min-height: 44px; }
  input[autocomplete=one-time-code] { font: 400 22px/1.2 var(--mono); letter-spacing: .3em; }
  .erro-numero { font: 400 72px/1 var(--serif); color: var(--accent); margin: 20px 0; }
  .resumo-valor { font: 400 20px/1.2 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
  .detalhe-lateral dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .detalhe-lateral .mono { overflow-wrap: anywhere; }
  .form-padrao { box-shadow: none; }
  .stats .cartao { background: none; border: 0; border-radius: 0; box-shadow: none; }
  .stats .cartao + .cartao { border-left: 1px solid var(--line); }
  .form-padrao .form-acoes { align-self: end; }
  .paginacao { flex-wrap: wrap; }
  .info-inline > .icone { flex: none; margin-top: 1px; }
  .cabecalho > div, .acoes, .stats > *, .form-acoes > * { min-width: 0; max-width: 100%; }
  .botao { max-width: 100%; height: auto; min-height: 38px; padding-block: 8px; text-align: center; overflow-wrap: anywhere; }
  .stats .numero { font-size: 28px; white-space: normal; overflow-wrap: anywhere; }
  .secao-corpo { min-width: 0; }
  @media (max-width: 899px) {
    [data-padrao] .coluna-dupla { grid-column: 1 / -1; }
    .stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
    .form-padrao .form-acoes { flex-wrap: wrap; }
    .cabecalho .contexto, .cabecalho small { overflow-wrap: anywhere; }
  }
}

@media print {
 .chip { background: none !important; color: var(--ink) !important; padding: 0; }
 .chip::before { content: '('; } .chip::after { content: ')'; }
}

/* Badge do sino: fica depois da camada componentes para vencer a regra base de .contador. */
@layer componentes {
  .alertas-menu > summary .contador { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--copper); color: #fff; font: 600 10px/18px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--canvas); }
}

/* U7 · usabilidade: decisão visível, ações secundárias, erro persistente, detalhes técnicos. */
@layer componentes {
  .decisao-despesa { padding: 20px 22px; }
  .decisao-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .decisao-acoes { grid-column: 1 / -1; gap: 10px; }
  .decisao-acoes .botao { height: 44px; padding: 0 20px; font-size: 14px; }
  .acao-secundaria { display: block; font: 400 12px/1.4 var(--sans); color: var(--ink-3); margin-top: 2px; }
  .acao-secundaria:hover { color: var(--accent); }
  .toast.erro { background: var(--err); color: #fff; }
  .toast.erro .toast-fechar { color: #fff; }
  .quiet-inline > summary { list-style: none; cursor: pointer; color: var(--ink-3); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
  .quiet-inline > summary::-webkit-details-marker { display: none; }
  .quiet-inline[open] > summary { margin-bottom: 4px; }
  .form-padrao > details.secao-recolhivel { margin: 8px 0 0; border: 0; border-top: 1px solid var(--line); }
  .form-padrao > details.secao-recolhivel > summary { font-size: 14px; }
  .form-padrao .form-grade { padding-left: 0; }
}

/* U8 — tabelas em cartões no celular (avaliação cega de 06/09: colunas cortadas a 390 px). */
@layer componentes {
  @media (max-width: 600px) {
    .ui-tabela, .ui-tabela tbody { display: block; width: 100%; }
    .ui-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ui-tabela tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--line-strong); }
    .ui-tabela tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0; text-align: left; }
    .ui-tabela tbody td.num { text-align: right; }
    .ui-tabela tbody td[data-rotulo]::before { content: attr(data-rotulo); flex: 0 0 38%; color: var(--ink-3); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
    .ui-tabela tbody td:empty, .ui-tabela tbody td:has(> .sr-only:only-child) { display: none; }
    .ui-tabela tbody td[colspan] { display: block; }
    .ui-tabela tbody td.celula-vazia { display: none; }
    .ui-tabela tbody td[colspan]::before { content: none; }
    .ui-tabela tbody td.codigo-conta { white-space: normal; overflow-wrap: anywhere; }
    .decisao-acoes { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .decisao-acoes .botao, .decisao-acoes button { width: 100%; justify-content: center; }
    .tabela-scroll { overflow: visible; max-height: none; }
    .form-acoes { position: static; }
    .tabela-scroll th:first-child, .tabela-scroll td:first-child { position: static; min-width: 0; white-space: normal; }
  }
}

/* Acesso (login, autenticador, portal) — referência docs/marca/aplicacoes/login, 07/09/2026: duas colunas a partir de
   900 px, folha de caixa à esquerda, formulário à direita; zero itálico; corpo 17 px em tinta; sem cartão com sombra. */
@layer componentes {
  .acesso { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
  .acesso .folha { display: none; }
  .acesso .formulario { background: var(--surface); display: flex; flex-direction: column; padding: 32px 20px 24px; }
  .acesso .formulario-miolo { width: 100%; max-width: 440px; margin: 0 auto; flex: 1; font-size: 17px; line-height: 1.5; color: var(--ink); }
  .acesso .formulario .marca { margin-bottom: 36px; }
  .acesso .formulario .marca img { height: 36px; width: auto; display: block; }
  .acesso h1 { font: 600 34px/1.1 var(--serif-medio); letter-spacing: -.015em; color: var(--ink); margin: 0 0 8px; text-wrap: balance; }
  .acesso .contexto { color: var(--ink); font-size: 17px; margin: 0 0 24px; }
  .acesso form { display: grid; gap: 18px; margin: 0; }
  .acesso .campo { display: grid; gap: 6px; }
  .acesso .campo > span, .acesso .campo label { font: 600 15px/1.3 var(--sans); color: var(--ink); }
  .acesso .campo input:not([type=checkbox]):not([type=radio]) { width: 100%; min-height: 48px; padding: 0 14px; font: 400 17px/1.3 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--ink-3); border-radius: var(--raio); }
  .acesso .campo input::placeholder { color: var(--ink-3); }
  .acesso .campo input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
  .acesso .campo input[aria-invalid="true"] { border-color: var(--err); }
  .acesso .campo-ajuda, .acesso .campo .ajuda { font-size: 15px; color: var(--ink); }
  .acesso .campo-erro { font: 500 15px/1.4 var(--sans); color: var(--err); }
  .acesso .mensagem-inline { margin: 0 0 20px; padding: 12px 14px; border-radius: var(--raio); font-size: 16px; color: var(--ink); background: var(--paper-2); }
  .acesso .mensagem-inline.erro { color: var(--err); background: var(--err-soft); }
  .acesso .mensagem-inline.status { color: var(--accent-ink); background: var(--accent-soft); }
  .acesso input.codigo-totp { font: 500 32px/1.2 var(--mono); letter-spacing: .32em; text-align: center; min-height: 64px; padding-left: .32em; }
  .acesso .recuperacao { margin: 4px 0 0; }
  .acesso .recuperacao summary { cursor: pointer; font: 500 15px/1.4 var(--sans); color: var(--accent); text-decoration: underline; text-underline-offset: 3px; list-style: none; min-height: 44px; display: flex; align-items: center; }
  .acesso .recuperacao summary::-webkit-details-marker { display: none; }
  .acesso .recuperacao p { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
  .acesso .botao { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; height: auto; padding: 0 22px; font: 600 16px/1 var(--sans); }
  .acesso .aviso-lgpd { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
  .acesso .botao-google { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
  .acesso .botao-google:hover { background: var(--paper-2); }
  .acesso .g-marca { font: 600 20px/1 var(--sans); }
  .acesso .separador-google { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 14px; color: var(--ink-2); }
  .acesso .separador-google::before, .acesso .separador-google::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
  .acesso .rodape { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); display: grid; gap: 6px; }
  .acesso .rodape a:not(.botao) { color: var(--ink); font-weight: 500; }
  .acesso .toast { position: static; transform: none; margin: 0 0 20px; max-width: none; }
  @media (min-width: 900px) {
    .acesso { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .acesso .folha { display: flex; flex-direction: column; justify-content: space-between; padding: 56px 64px 40px; border-right: 1px solid var(--line-strong); background: var(--canvas); }
    .acesso .folha .marca img { height: 176px; width: auto; display: block; }
    .acesso .folha h2 { font: 400 clamp(40px, 3.6vw, 52px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--ink); max-width: 15ch; margin: 48px 0 40px; text-wrap: balance; }
    .caixa-motivo { list-style: none; padding: 0; margin: 0; max-width: 460px; }
    .caixa-motivo li { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line-strong); font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
    .caixa-motivo li:last-child { border-bottom: 1px solid var(--line-strong); }
    .caixa-motivo li span:last-child { font: 400 22px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--accent); }
    .acesso .formulario { padding: 56px 64px 40px; justify-content: center; }
    .acesso .formulario .marca { display: none; }
    .acesso h1 { font-size: 40px; }
  }
}

/* Subtelas: DIANA-TP, §13; referência subtelas.css, blocos B e D. */
@layer tokens {
  :root {
    --t-secao: 600 20px/1.2 var(--serif-medio);
    --t-secao-m: 600 18px/1.2 var(--serif-medio);
    --t-bloco: 600 15px/1.3 var(--sans);
    --t-rotulo: 600 12px/1.3 var(--sans);
    --t-valor: 600 15px/1.3 var(--sans);
    --t-nota: 400 13px/1.45 var(--sans);
    --marcador-ok: var(--ok); --marcador-espera: var(--copper); --marcador-erro: var(--err);
  }
}
@layer componentes {
/* 9.2 escala */
h2 { font: var(--t-secao); letter-spacing: -.01em; color: var(--ink); margin: 40px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); }
h2 + * { margin-top: 20px; }
.cabecalho + h2, .conteudo > h2:first-of-type, .abas-scroll + h2, .detalhe-principal > h2:first-child { margin-top: 0; }
h2 .contador, h2 .resumo-secao { font: var(--t-nota); color: var(--ink-2); margin-left: auto; }
h2:has(.contador), h2:has(.resumo-secao), h2:has(.acoes) { display: flex; align-items: baseline; gap: 12px; }
h3 { font: var(--t-bloco); color: var(--ink); margin: 20px 0 8px; }
.rotulo, .eyebrow, thead th, .form-padrao h2, .form-padrao h3 { font: var(--t-rotulo); text-transform: uppercase; letter-spacing: .10em; color: var(--ink-2); }
.form-padrao h2, .form-padrao h3 { border: 0; padding: 0; margin: 20px 0 0; }
.nota, .campo-ajuda, .identificador, .como-funciona { font: var(--t-nota); color: var(--ink-2); }
.contexto, .suave { color: var(--ink); }
.cabecalho .contexto { color: var(--ink-2); }
dialog h2 { font: 600 22px/1.2 var(--serif-medio); border: 0; padding: 0; margin: 0 0 12px; }
@media (max-width: 600px) { h2 { font: var(--t-secao-m); margin-top: 32px; } .rotulo, .nota { font-size: 12px; } }

/* 9.3 lateral do detalhe */
.detalhe-lateral { border-top: 0; padding: 0; }
.detalhe-lateral > h2:first-child { margin-top: 0; }
.detalhe-lateral dl { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0; font-size: 14px; }
.detalhe-lateral dt { font: var(--t-rotulo); text-transform: none; letter-spacing: 0; color: var(--ink-2); padding: 10px 0; border-bottom: 1px solid var(--line); }
.detalhe-lateral dd { font: var(--t-valor); color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line); }
.detalhe-lateral dt:last-of-type, .detalhe-lateral dd:last-of-type { border-bottom: 0; }
.detalhe-grade .cartao { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.detalhe-grade .cartao:last-child { border-bottom: 0; }
.detalhe-grade .cartao .rotulo { margin-bottom: 4px; display: block; }
.detalhe-grade .cartao .numero { margin: 2px 0 4px; }
.detalhe-lateral .numero, .detalhe-grade .cartao .numero { font: var(--t-valor); }
.como-funciona > summary { font: var(--t-bloco); color: var(--ink); padding: 10px 0; }
@media (min-width: 1100px) { .detalhe-grade { grid-template-columns: minmax(0, 1fr) 320px; } .detalhe-lateral { padding-left: 28px; border-left: 1px solid var(--line); } }

/* 9.4 acontecimentos */
.linha-tempo { list-style: none; border-left: 0; padding: 0; margin: 12px 0 0; }
.linha-tempo .dia { font: 600 15px/1.3 var(--serif-medio); color: var(--ink); margin: 20px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); display: flex; justify-content: space-between; gap: 12px; }
.linha-tempo .dia:first-child { margin-top: 0; }
.linha-tempo .dia .num { font: var(--t-valor); }
.linha-tempo > li:not(.dia), .linha-tempo > article { display: grid; grid-template-columns: 72px 18px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.linha-tempo > li:not(.dia):last-child, .linha-tempo > article:last-child { border-bottom: 0; }
.linha-tempo > li:not(.dia)::before, .linha-tempo > article::before { content: ''; grid-column: 2; grid-row: 1; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--ink-3); }
.linha-tempo > li[data-estado="ok"]::before { background: var(--marcador-ok); }
.linha-tempo > li[data-estado="espera"]::before { background: var(--marcador-espera); }
.linha-tempo > li[data-estado="erro"]::before { background: var(--marcador-erro); }
.linha-tempo time { grid-column: 1; grid-row: 1; margin: 0; padding-top: 2px; font: 500 12.5px/1.4 var(--mono); color: var(--ink-2); }
.linha-tempo p { grid-column: 3; grid-row: 1; margin: 0; font-size: 14px; }
.linha-tempo p strong { font-weight: 600; color: var(--ink); }
.linha-tempo .apoio { display: block; font: var(--t-nota); color: var(--ink-2); margin-top: 2px; }
.linha-tempo .valor { grid-column: 4; grid-row: 1; font: var(--t-valor); font-variant-numeric: tabular-nums; }
.linha-tempo .valor.entrada { color: var(--ok); } .linha-tempo .valor.estorno { color: var(--err); }
@media (max-width: 600px) {
  .linha-tempo > li:not(.dia), .linha-tempo > article { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .linha-tempo > li:not(.dia)::before { grid-column: 1; }
  .linha-tempo p { grid-column: 2; }
  .linha-tempo time { grid-column: 2; grid-row: 2; padding-top: 4px; }
  .linha-tempo .valor { grid-column: 3; }
}

/* 9.5 extrato agrupado por dia */
tr.dia-grupo th { background: var(--canvas); font: 600 14px/1.3 var(--serif-medio); text-transform: none; letter-spacing: 0; color: var(--ink); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); position: static; }
tr.dia-grupo th .num { float: right; font: var(--t-valor); }
.ui-tabela td .titulo { display: block; font-weight: 600; color: var(--ink); }
.ui-tabela td .apoio { display: block; font: var(--t-nota); color: var(--ink-2); }
.ui-tabela td.num.entrada { color: var(--ok); }
.ui-tabela.extrato td.num, .detalhe-principal .ui-tabela td.num { font: var(--t-valor); font-variant-numeric: tabular-nums; }
table { font-size: 14px; }

/* 9.6 formulários */
.form-padrao { max-width: 860px; }
@media (min-width: 900px) { .form-padrao.form-grade-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 18px; } }
.form-padrao > fieldset { padding: 0; border: 0; margin: 0; min-width: 0; display: contents; }
.form-padrao > fieldset > legend { grid-column: 1 / -1; }
.form-padrao > fieldset > legend, .form-padrao > h2 { font: 600 18px/1.25 var(--serif-medio); text-transform: none; letter-spacing: 0; color: var(--ink); width: 100%; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); margin: 24px 0 4px; }
.form-padrao > fieldset > .explica, .form-padrao > .explica { font: var(--t-nota); color: var(--ink-2); margin: 4px 0 12px; grid-column: 1 / -1; }
.form-padrao label { font: 600 13px/1.3 var(--sans); color: var(--ink); }
.form-padrao label .obrigatorio { color: var(--copper); margin-left: 2px; }
.campo-data { grid-column: span 3; } .campo-valor { grid-column: span 3; } .campo-competencia { grid-column: span 3; }
.campo-curto { grid-column: span 4; } .campo-medio { grid-column: span 6; } .campo-longo, .campo-texto, .campo-anexo { grid-column: 1 / -1; }
@media (max-width: 899px) { .form-padrao .campo { grid-column: 1 / -1; } .barra-acoes { flex-wrap: wrap; } .barra-acoes .nota { flex-basis: 100%; order: 3; text-align: left; } }
/* AJUSTE 8: a 390 a nota da barra de ações vai para a linha de baixo, alinhada à esquerda; entre 'Cancelar' e a primária ela não cabe. */
.campo-valor .entrada-valor { position: relative; }
.campo-valor .entrada-valor::before { content: 'R$'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-size: 14px; }
.campo-valor input { padding-left: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.campo-percentual { grid-column: span 3; }
.campo-percentual .entrada-percentual { position: relative; }
.campo-percentual .entrada-percentual::after { content: '%'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-size: 14px; pointer-events: none; }
.campo-percentual input { padding-right: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.campo-erro { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: var(--err-soft); color: var(--err); border-radius: 8px; max-width: none; font-size: 13px; }
.campo-erro svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.campo-anexo .anexo { padding: 20px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--raio-lg); color: var(--ink-2); font-size: 13px; }
html:has(.barra-acoes) { scroll-padding-bottom: 96px; }
.form-padrao:has(.barra-acoes) { padding-bottom: 80px; }
.barra-acoes { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 0 0; padding: 12px 0; background: color-mix(in srgb, var(--canvas) 92%, transparent); border-top: 1px solid var(--line-strong); backdrop-filter: blur(6px); grid-column: 1 / -1; }
.barra-acoes .nota { flex: 1; text-align: center; }
.decisao-despesa { max-width: none; padding: 20px 22px; background: var(--accent-soft); border-radius: var(--raio-lg); margin-top: 20px; }
.decisao-despesa h2 { border: 0; margin: 0 0 8px; font-size: 18px; }
.decisao-despesa dl { display: grid; grid-template-columns: 132px 1fr; gap: 4px 12px; margin: 0 0 16px; }
.decisao-despesa dt { color: var(--ink-2); } .decisao-despesa dd { font-weight: 600; }
.decisao-despesa .linha-codigo { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.decisao-despesa .linha-codigo .campo { flex: 0 1 220px; }
.decisao-despesa input.codigo { font: 500 22px/1 var(--mono); letter-spacing: .2em; text-align: center; min-height: 44px; }

/* 9.7 diálogos */
dialog { padding: 28px; width: min(480px, calc(100% - 32px)); }
dialog.dialog-form { width: min(640px, calc(100% - 32px)); }
dialog p { font-size: 15px; max-width: 60ch; }
dialog dl.resumo { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 12px 0 20px; padding: 12px 14px; background: var(--canvas); border-radius: var(--raio); font-size: 14px; }
dialog dl.resumo dt { color: var(--ink-2); } dialog dl.resumo dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
dialog .acoes { justify-content: flex-end; margin-top: 8px; }
dialog .acoes .perigo { margin-right: auto; }
dialog .fechar { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; background: none; color: var(--ink-2); border-radius: 8px; display: grid; place-items: center; }
dialog .fechar svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }

/* 9.8 menus e paleta */
.menu-conteudo > strong { font: var(--t-rotulo); text-transform: uppercase; letter-spacing: .10em; color: var(--ink-2); padding: 10px 10px 4px; }
.menu-conteudo hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu-conteudo a:not(.botao), .menu-conteudo .botao.terciario { font-size: 14px; }
.menu-conteudo .identidade { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-conteudo .identidade strong { display: block; font: 600 14px/1.3 var(--sans); padding: 0; }
.menu-conteudo .identidade small { display: block; font: var(--t-nota); color: var(--ink-2); padding: 0; }
.menu-conteudo a.perigo { color: var(--err); }
.paleta .grupo { font: var(--t-rotulo); text-transform: uppercase; letter-spacing: .10em; color: var(--ink-2); padding: 12px 20px 4px; }
.paleta .resultado { display: grid; text-align: left; justify-items: start; justify-content: start; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 20px; border-left: 3px solid transparent; }
.paleta .resultado kbd { justify-self: end; }
.paleta .resultado .icone { width: 28px; height: 28px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.paleta .resultado strong { font: 600 14px/1.3 var(--sans); } .paleta .resultado small { display: block; font: var(--t-nota); color: var(--ink-2); }
.paleta .resultado[aria-selected="true"], .paleta .resultado:hover { background: var(--accent-soft); border-left-color: var(--accent); }

}
@layer componentes {
/* 12.1 formulário dentro de diálogo */
dialog.dialog-form .form-padrao { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; max-width: none; margin: 8px 0 0; }  /* display: grid vence form.linha (item 12 da DIANA-TP) */
#comandos-busca::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }  /* item 13: só o nosso fechar */
dialog.dialog-form .campo-medio { grid-column: span 3; } dialog.dialog-form .campo-valor { grid-column: span 3; }
dialog.dialog-form .campo-longo, dialog.dialog-form .campo-texto, dialog.dialog-form .campo-check, dialog.dialog-form .barra-acoes { grid-column: 1 / -1; }
.campo-parcela { grid-column: span 3; } .campo-parcela .parcela { display: flex; align-items: center; gap: 8px; }
.campo-parcela input { width: 72px; text-align: center; } .campo-parcela .de { color: var(--ink-2); font-size: 14px; }
.campo-check { flex-direction: row; align-items: center; gap: 10px; } .campo-check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.campo-check label { font-weight: 400; }
dialog .barra-acoes { position: static; background: none; border-top: 1px solid var(--line); padding-top: 16px; backdrop-filter: none; }
/* AJUSTE 6: dentro do diálogo os selects de 6 col (Descrição/Conta) usam .campo-longo; "Disponibilidade 3 + Natureza 3" e "Valor 3" usam .campo-medio/.campo-valor (span 3 no grid de 6) */
/* 12.2 estados vazios */
.vazio { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 16px 18px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--raio-lg); color: var(--ink-2); font-size: 14px; }
.vazio .icone { width: 36px; height: 36px; border-radius: 8px; background: var(--paper-2); color: var(--ink-2); display: grid; place-items: center; }
.vazio .icone svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vazio p { margin: 0; color: var(--ink); } .vazio p small { display: block; color: var(--ink-2); font-size: 13px; } .vazio .botao { justify-self: end; }
/* AJUSTE 7: o memo dá 2 colunas ao .vazio; a ação ("Anexar arquivo") precisa da 3ª coluna (auto) para ficar à direita. A 390 o botão desce. */
@media (max-width: 600px) { .vazio { grid-template-columns: 36px minmax(0, 1fr); } .vazio .botao { grid-column: 2; justify-self: start; } }
/* 12.3 um só bloco de estado no topo da trilha */
.estado-trilha { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 14px; margin: 20px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio-lg); font-size: 14px; }
.estado-trilha .quem { font-weight: 600; } .estado-trilha .regra { color: var(--ink-2); font-size: 13px; flex-basis: 100%; }
/* AJUSTE 8 (correção): `.barra-acoes .nota { flex: 1 }` do memo vence o flex-basis; no celular a nota precisa de `flex: 1 1 100%` e vir depois. */
@media (max-width: 899px) { .barra-acoes { flex-wrap: wrap; } .barra-acoes .nota { flex: 1 1 100%; order: 3; text-align: left; } }
/* AJUSTE 9: extrato a 390 — a coluna "Tipo" some (o tipo já está no título da linha) e o valor não quebra. */
td.num, th.num { white-space: nowrap; }
@media (max-width: 600px) { .extrato th:nth-child(2), .extrato td:nth-child(2) { display: none; } }
}
/* Integração dos blocos B/D com os componentes anteriores do aplicativo. */
@layer componentes {
  .comando-gatilho svg { width: 16px; height: 16px; }
  .js .no-js-only { display: none; }
  .linha-tempo > li::before, .linha-tempo > article::before { position: static; }
  .linha-tempo > li.dia::before { content: none; }
  .linha-tempo > li.dia { padding: 0 0 6px; }
  .linha-tempo .detalhes-evento { grid-column: 3 / -1; margin-top: 6px; font: var(--t-nota); color: var(--ink-2); }
  .linha-tempo .detalhes-evento summary { cursor: pointer; }
  .detalhe-lateral dd { min-width: 0; overflow-wrap: anywhere; }
  .vazio:not(:has(> .icone)) { grid-template-columns: minmax(0, 1fr); }
  .vazio:not(:has(> .icone)) > .botao { grid-column: 1; justify-self: start; }
  .form-padrao .campo-check { grid-column: 1 / -1; }
  .form-padrao .parcela-input { min-width: 0; }
  .parcela-input > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .parcela-input .campo-erro { min-width: 130px; }
  .form-padrao > fieldset > p:not(.explica) { grid-column: 1 / -1; }
  .barra-acoes .botao { flex-shrink: 0; }
  .extrato td.num.estorno { color: var(--err); }
  @media (max-width: 600px) {
    .linha-tempo .detalhes-evento { grid-column: 2 / -1; }
    .extrato tbody tr.dia-grupo { display: block; padding: 0; }
    .extrato tr.dia-grupo th { display: block; padding: 10px 0; }
    .extrato tr.dia-grupo .num { float: none; display: block; margin-top: 4px; }
    .extrato tbody td:first-child { display: block; }
    .extrato tbody td:first-child::before { content: none; }
    .extrato tbody td:nth-child(2) { display: none; }
    dialog.dialog-form .campo-parcela { grid-column: 1 / -1; }
    dialog.dialog-form .campo-data, dialog.dialog-form .campo-competencia, dialog.dialog-form .campo-curto { grid-column: span 3; }
    .barra-acoes { gap: 8px; }
  }
}
@layer componentes {
  /* O extrato mantém duas colunas no celular, conforme §13; saldos seguem U8. */
  @media (max-width: 600px) {
    .ui-tabela.extrato { display: table; width: 100%; }
    .ui-tabela.extrato thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .ui-tabela.extrato tbody { display: table-row-group; }
    .ui-tabela.extrato tbody tr, .ui-tabela.extrato tbody tr.dia-grupo { display: table-row; padding: 0; }
    .ui-tabela.extrato tbody td, .ui-tabela.extrato tbody td:first-child, .ui-tabela.extrato tr.dia-grupo th { display: table-cell; padding: 10px 8px; border-bottom: 1px solid var(--line); }
    .ui-tabela.extrato thead th { padding: 10px 8px; }
    .ui-tabela.extrato tbody td::before { content: none; }
    .ui-tabela.extrato tr.dia-grupo .num { float: right; margin: 0; }
    .ui-tabela.extrato tbody td:nth-child(2), .ui-tabela.extrato thead th:nth-child(2) { display: none; }
  }
}
@layer componentes {
  dialog.dialog-form .campo:not(:is(.campo-medio, .campo-valor, .campo-data, .campo-competencia, .campo-curto, .campo-parcela)) { grid-column: 1 / -1; }
}