/* ============================================================
   Lançamentos — A receber / A pagar (drill-down)
   Spec: design_handoff_drilldown_aberto/README.md
   ============================================================ */

:root {
  /* Tokens derivados pra botões "novo / baixar" — filled no light, tonal (container) no dark
     pra evitar pastéis vivos em fundo escuro. */
  --lanc-success-bg: var(--m3-success-40);
  --lanc-success-fg: #FFFFFF;
  --lanc-primary-bg: var(--primary);
  --lanc-primary-fg: var(--on-primary);
  /* Gastos: terracota (hue 50) — usado nas páginas obra-gastos */
  --lanc-gastos-bg: oklch(0.50 0.12 50);
  --lanc-gastos-fg: #FFFFFF;
}
[data-theme="dark"] {
  /* No dark, success-container fica L=0.27 — quase igual ao header receber (L=0.26).
     Subo o L pra dar contraste claro/escuro entre chip e header (paridade com o pagar,
     onde primary-container L=0.36 sobre header L=0.22). */
  --lanc-success-bg: oklch(0.40 0.08 158);
  --lanc-success-fg: oklch(0.96 0.04 158);
  --lanc-primary-bg: var(--primary-container);
  --lanc-primary-fg: var(--on-primary-container);
  --lanc-gastos-bg: oklch(0.40 0.10 50);
  --lanc-gastos-fg: oklch(0.96 0.05 50);
}

.lanc-shell {
  width: 100%;
  min-width: 0;
  /* Accent (info/highlight) — default azul (combina com primary).
     Em .kind-receber, vira verde pra família success.
     Usado em: filter chip ativo, due-pill "Vence hoje", row selected/focused. */
  --lanc-accent-bg: var(--primary-container);
  --lanc-accent-fg: var(--on-primary-container);
}
.lanc-shell.kind-receber,
.lanc-shell.kind-recebido {
  --lanc-accent-bg: var(--success-container);
  --lanc-accent-fg: var(--on-success-container);
}
[data-theme="dark"] .lanc-shell.kind-receber,
[data-theme="dark"] .lanc-shell.kind-recebido {
  /* Mesmo lift do --lanc-success-bg pra chips/pills "Todos", "Vence hoje", row focus seguirem
     o tom claro do botão "Novo recebimento". */
  --lanc-accent-bg: oklch(0.40 0.08 158);
  --lanc-accent-fg: oklch(0.96 0.04 158);
}
.lanc-shell.kind-gastos,
.lanc-shell.kind-pagar {
  --lanc-accent-bg: oklch(0.94 0.045 50);
  --lanc-accent-fg: oklch(0.30 0.10 45);
}
[data-theme="dark"] .lanc-shell.kind-gastos,
[data-theme="dark"] .lanc-shell.kind-pagar {
  --lanc-accent-bg: oklch(0.40 0.10 50);
  --lanc-accent-fg: oklch(0.96 0.05 50);
}

/* ============================================================
   MOBILE (<= 760px)
   ============================================================ */
.lanc-mobile { display: none; }
.lanc-desktop { display: block; }

@media (max-width: 760px) {
  /* FAB extended (56px) ocupa todo o canto inferior em mobile. Padding-bottom
     de 140px garante que último item não fique debaixo do FAB pra todos os
     kinds reformados (Sergio 2026-05-27). */
  .lanc-mobile  { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: calc(140px + env(safe-area-inset-bottom, 0)); overflow-x: hidden; }
  .lanc-desktop { display: none; }
  .lanc-shell   { overflow-x: hidden; }
}

/* ─── Header colorido ──────────────────────────────────────── */
.lanc-m-header {
  padding: 12px 14px 16px;
  flex-shrink: 0;
}
/* Header tints — mesmo hue do botão primário pra família de cor coerente.
   Receber/Recebido: hue 158 (verde · família success). Pagar: hue 220 (azul · família primary).
   Gastos: hue 50 (terracota · histórico de saída). */
.lanc-m-header.kind-receber,
.lanc-m-header.kind-recebido { background: oklch(0.96 0.025 158); color: oklch(0.32 0.07 158); }
.lanc-m-header.kind-pagar,
.lanc-m-header.kind-gastos   { background: oklch(0.96 0.04 50);   color: oklch(0.30 0.10 45); }
[data-theme="dark"] .lanc-m-header.kind-receber,
[data-theme="dark"] .lanc-m-header.kind-recebido { background: oklch(0.26 0.04 158); color: oklch(0.92 0.04 158); }
[data-theme="dark"] .lanc-m-header.kind-pagar,
[data-theme="dark"] .lanc-m-header.kind-gastos   { background: oklch(0.24 0.06 50);  color: oklch(0.92 0.04 50); }

.lanc-m-header-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.lanc-m-back {
  width: 32px; height: 32px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.5); color: inherit;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  text-decoration: none;
}
[data-theme="dark"] .lanc-m-back { background: rgba(255,255,255,.12); }
.lanc-m-back:hover { background: rgba(255,255,255,.7); }
[data-theme="dark"] .lanc-m-back:hover { background: rgba(255,255,255,.18); }
.lanc-m-back .msym { font-size: 20px; }

.lanc-m-eyebrow {
  font: 600 9.5px/1 'Inter';
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}
.lanc-m-subtitle {
  font: 600 14px/1.2 'Inter Tight';
  margin-top: 2px;
}
.lanc-m-more {
  width: 32px; height: 32px; border-radius: 999px;
  border: 0; background: transparent; color: inherit;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.lanc-m-more .msym { font-size: 20px; opacity: 0.7; }

.lanc-m-totallabel {
  font: 600 10.5px/1 'Inter';
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
}
.lanc-m-total {
  font: 700 30px/1.05 'Inter Tight';
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  margin-top: 4px;
}
.lanc-m-count {
  font: 400 11px/1.3 'Inter';
  opacity: 0.85;
}
.lanc-m-headfoot {
  margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.lanc-m-newchip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 99px;
  font: 600 13px 'Inter';
  cursor: pointer;
  white-space: nowrap;
  background: var(--lanc-success-bg);
  color: var(--lanc-success-fg);
  transition: opacity var(--motion-fast);
}
.lanc-m-newchip:hover { opacity: .92; }
.lanc-m-newchip.kind-pagar,
.lanc-m-newchip.kind-gastos   { background: var(--lanc-gastos-bg);  color: var(--lanc-gastos-fg); }
.lanc-m-newchip .msym { font-size: 18px; }

/* ─── Filter bar (segura o dropdown de período) ────────────── */
.lanc-m-filterbar {
  padding: 10px 12px 6px;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  background: var(--surface);
  /* Em mobile, vira scroll horizontal pra acomodar os chips extras
     (Situação, Obra, Fornecedor) sem quebrar linha. */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.lanc-m-filterbar::-webkit-scrollbar { display: none; }
.lanc-m-filterbar > * { flex-shrink: 0; }
/* Filterbar mobile clipa overflow-y (regra CSS: overflow-x auto força
   overflow-y auto). Tira o menu do flow e posiciona pra fugir do clip
   — vira tipo "tooltip" ancorado no trigger. Vale pra todos os menus
   dentro do filterbar mobile (period, status, project, etc.) — o
   period chip usa data-menu-id="period" (sem sufixo "-mobile") porque
   o componente é compartilhado com o desktop. */
.lanc-m-filterbar .lanc-period-menu {
  position: fixed;
  /* top é calculado via JS (positionMobileDropdowns) a partir do rect
     do trigger — o default `top: calc(100% + 6px)` herdado fica relativo
     ao viewport quando o menu é fixed, jogando ele pra fora da tela. */
  top: auto;
  left: 12px;
  right: 12px;
  min-width: 0;
  max-width: none;
  z-index: 300;
}
/* ─── Searchbar mobile ─────────────────────────────────────── */
/* Saulo 2026-05-27: searchbar recolhida por padrão — ícone na topbar
   abre. Quando .is-open, anima altura+padding pra revelar suavemente. */
.lanc-m-searchbar {
  margin: 0 12px;
  display: flex; align-items: center; gap: 8px;
  height: 0;
  padding: 0 12px;
  background: var(--surface-container-low);
  border: 0 solid var(--outline-variant);
  border-radius: 999px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: border-color var(--motion-fast),
              background var(--motion-fast),
              height var(--motion-fast),
              opacity var(--motion-fast),
              margin var(--motion-fast),
              border-width var(--motion-fast);
}
.lanc-m-searchbar.is-open {
  height: 38px;
  margin: 0 12px 6px;
  border-width: 1px;
  opacity: 1;
  pointer-events: auto;
}
.lanc-m-searchbar:focus-within {
  border-color: var(--outline);
  background: var(--surface);
}
.lanc-m-searchbar .msym { font-size: 18px; color: var(--on-surface-variant); }
.lanc-m-search-input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font: 400 14px 'Inter';
  color: var(--on-surface);
  height: 100%;
  padding: 0;
}
.lanc-m-search-input::placeholder { color: var(--on-surface-variant); }
.lanc-m-search-input::-webkit-search-decoration,
.lanc-m-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lanc-m-search-clear {
  border: 0; background: transparent; cursor: pointer; padding: 2px;
  color: var(--on-surface-variant);
  display: inline-grid; place-items: center;
  border-radius: 999px;
}
.lanc-m-search-clear:hover { background: var(--surface-container); color: var(--on-surface); }
.lanc-m-search-clear .msym { font-size: 18px; }
/* ─── Pager mobile ─────────────────────────────────────────── */
.lanc-m-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-container-low);
  border-top: 1px solid var(--outline-variant);
  font: 400 12px 'Inter';
  color: var(--on-surface-variant);
  gap: 10px;
}
.lanc-m-pager-info { font-variant-numeric: tabular-nums; flex: 1; }
.lanc-m-pager-nav { display: inline-flex; gap: 4px; }
.lanc-m-perpage {
  font: inherit;
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  padding: 4px 6px;
}

/* Dropdown de período (chip + menu) — usado em mobile e desktop */
.lanc-period-trigger {
  position: relative;
  display: inline-block;
}
.lanc-period-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  box-shadow: var(--elev-3);
  padding: 6px;
  z-index: 200;
  display: flex; flex-direction: column;
  gap: 1px;
  /* leve animação de entrada */
  animation: lanc-menu-in 120ms cubic-bezier(.2,0,0,1);
}
@keyframes lanc-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lanc-period-menu-sep {
  height: 1px; border: 0;
  background: var(--outline-variant);
  margin: 4px 6px;
}
.lanc-period-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0; background: transparent;
  font: 500 13px 'Inter';
  color: var(--on-surface);
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  white-space: nowrap;
}
.lanc-period-opt:hover { background: var(--surface-container-low); }
.lanc-period-opt.on {
  background: var(--lanc-accent-bg);
  color: var(--lanc-accent-fg);
  font-weight: 600;
}
.lanc-period-opt > .msym { font-size: 18px; flex-shrink: 0; opacity: .85; }
.lanc-period-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lanc-period-opt-sub {
  font: 400 11px 'Inter';
  color: var(--on-surface-variant);
}
.lanc-period-opt.on .lanc-period-opt-sub { color: inherit; opacity: .8; }
/* Especificidade igual à de `.lanc-period-opt > .msym` (linha 291) — sem o
   seletor filho direto, a regra anterior (.lanc-period-opt > .msym opacity .85)
   vencia e o check aparecia em TODOS os itens. */
.lanc-period-opt > .lanc-period-opt-check {
  font-size: 18px; flex-shrink: 0;
  opacity: 0;
}
.lanc-period-opt.on > .lanc-period-opt-check { opacity: 1; }

/* Mobile: menu sobe a viewport inteira pra dar mais clareza */
@media (max-width: 760px) {
  .lanc-period-menu { min-width: 280px; }
}
.lanc-chip {
  padding: 6px 11px;
  border-radius: 999px;
  font: 600 11px/1 'Inter';
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.lanc-chip:hover { background: var(--surface-container-low); }
.lanc-chip.on {
  background: var(--lanc-accent-bg);
  color: var(--lanc-accent-fg);
  border-color: var(--lanc-accent-bg);
}
.lanc-chip-count {
  font: 700 9.5px/1 'Inter';
  background: var(--surface-container-high);
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 14px;
  text-align: center;
}
.lanc-chip.on .lanc-chip-count { background: rgba(0,0,0,.12); }
[data-theme="dark"] .lanc-chip.on .lanc-chip-count { background: rgba(255,255,255,.12); }

/* ─── Sort/Group bar ──────────────────────────────────────── */
.lanc-m-sortbar {
  padding: 4px 12px 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  background: var(--surface);
  min-width: 0;
}
.lanc-m-sortbtn {
  background: transparent; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 11px/1 'Inter';
  color: var(--on-surface-variant);
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lanc-m-sortbtn .msym { font-size: 14px; flex-shrink: 0; }

/* ─── Lista (rolagem + grupos sticky) ──────────────────────── */
.lanc-m-list {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
}
.lanc-m-group-head {
  padding: 10px 14px 6px;
  background: var(--surface);
  display: flex; align-items: baseline; justify-content: space-between;
  position: sticky; top: 0; z-index: 1;
}
.lanc-m-group-name { font: 700 11px/1.2 'Inter'; color: var(--on-surface); letter-spacing: 0.01em; }
.lanc-m-group-count { font: 400 9.5px/1 'Inter'; color: var(--on-surface-variant); margin-top: 2px; }
.lanc-m-group-total {
  font: 700 12px/1 'Inter Tight';
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
}
.lanc-m-group-total.kind-receber,
.lanc-m-group-total.kind-recebido { color: var(--success); }
.lanc-m-group-total.kind-pagar,
.lanc-m-group-total.kind-gastos   { color: var(--on-surface); }

/* ─── Linha de lançamento ──────────────────────────────────── */
.lanc-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--outline-variant);
  display: flex; gap: 10px;
  background: transparent;
  transition: background 120ms;
  cursor: pointer;
  width: 100%;
  border-left: 0; border-right: 0; border-top: 0;
  text-align: left;
  color: inherit;
  font: inherit;
}
.lanc-row:hover { background: var(--surface-container-low); }
.lanc-row.selected { background: var(--lanc-accent-bg); }
.lanc-row.selected:hover { background: var(--lanc-accent-bg); }

.lanc-check {
  width: 18px; height: 18px; border-radius: 4px;
  margin-top: 2px;
  border: 1.5px solid var(--outline);
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.lanc-row.selected .lanc-check {
  background: var(--primary);
  border-color: var(--primary);
}
.lanc-check .msym {
  font-size: 14px;
  color: var(--on-primary);
  display: none;
}
.lanc-row.selected .lanc-check .msym { display: block; }

.lanc-row-body { flex: 1; min-width: 0; }
.lanc-row-line1 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.lanc-row-counterparty {
  font: 600 12.5px/1.3 'Inter';
  color: var(--on-surface);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lanc-row-amount {
  font: 700 14px/1 'Inter Tight';
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lanc-row-amount.kind-receber,
.lanc-row-amount.kind-recebido { color: var(--success); }
.lanc-row-amount.kind-pagar,
.lanc-row-amount.kind-gastos   { color: var(--on-surface); }
.lanc-row-title {
  font: 400 11px/1.4 'Inter';
  color: var(--on-surface-variant);
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lanc-row-attach {
  font-size: 13px !important;
  color: var(--on-surface-variant);
  vertical-align: middle;
  margin-right: 4px;
  opacity: .75;
}
.lanc-row-pills {
  display: flex; align-items: center; gap: 6px;
  margin-top: 7px; flex-wrap: wrap;
}
.lanc-row-project {
  display: inline-flex; align-items: center; gap: 4px;
  font: 400 10px/1 'Inter';
  color: var(--on-surface-variant);
}
.lanc-row-project .swatch {
  width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0;
}
.lanc-row-project .name {
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Pill genérica ────────────────────────────────────────── */
.lanc-pill {
  font: 600 9.5px/1.2 'Inter';
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  display: inline-block;
}
.lanc-pill.tone-neutral { background: var(--surface-container-high); color: var(--on-surface-variant); }
.lanc-pill.tone-info    { background: var(--lanc-accent-bg, var(--primary-container)); color: var(--lanc-accent-fg, var(--on-primary-container)); }
.lanc-pill.tone-success { background: var(--success-container);     color: var(--on-success-container); }
.lanc-pill.tone-danger  { background: var(--error-container);       color: var(--on-error-container); }
.lanc-pill.tone-warn,
.lanc-pill.tone-warning { background: #FFE7B5; color: #5C3B00; }
[data-theme="dark"] .lanc-pill.tone-warn,
[data-theme="dark"] .lanc-pill.tone-warning { background: #4A3700; color: #FFE2A3; }

/* ─── Selection bar (mobile, sobre o bottom nav) ──────────── */
.lanc-m-selbar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0));
  background: var(--m3-neutral-10);
  color: var(--m3-neutral-95);
  border-radius: 16px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 22px rgba(15,23,42,.25);
  z-index: 111;
}
.lanc-m-selbar-clear {
  background: transparent; color: inherit;
  border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
}
.lanc-m-selbar-clear .msym { font-size: 18px; }
.lanc-m-selbar-info { flex: 1; min-width: 0; }
.lanc-m-selbar-count { font: 400 11px/1 'Inter'; opacity: 0.7; }
.lanc-m-selbar-total {
  font: 700 13px/1.2 'Inter Tight';
  font-feature-settings: 'tnum';
  margin-top: 2px;
}
.lanc-m-selbar-cta {
  background: var(--lanc-primary-bg); color: var(--lanc-primary-fg);
  border: 0; border-radius: 999px;
  padding: 8px 14px;
  font: 600 11.5px 'Inter';
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.lanc-m-selbar-cta.kind-receber,
.lanc-m-selbar-cta.kind-recebido { background: var(--lanc-success-bg); color: var(--lanc-success-fg); }
.lanc-m-selbar-cta.kind-pagar,
.lanc-m-selbar-cta.kind-gastos   { background: var(--lanc-gastos-bg);  color: var(--lanc-gastos-fg); }
.lanc-m-selbar-cta .msym { font-size: 16px; }

/* ─── Bottom sheet (detalhe no mobile) ─────────────────────── */
.lanc-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-mid);
}
.lanc-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.lanc-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 90vh;
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  z-index: 201;
  transform: translateY(100%);
  transition: transform var(--motion-mid);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.lanc-sheet.open { transform: translateY(0); }
.lanc-sheet-handle {
  width: 36px; height: 4px;
  background: var(--outline-variant);
  border-radius: 999px;
  margin: 8px auto 4px;
  flex-shrink: 0;
}
.lanc-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
}
.lanc-sheet-foot {
  border-top: 1px solid var(--outline-variant);
  padding: 12px 16px;
  display: flex; gap: 8px;
  background: var(--surface);
}

/* ─── Receipt preview lightbox ─────────────────────────────── */
.lanc-preview-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-mid);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.lanc-preview-backdrop.open { opacity: 1; pointer-events: auto; }
.lanc-preview-modal {
  background: var(--surface);
  border-radius: 20px;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(0,0,0,.45);
  transform: scale(.96);
  transition: transform var(--motion-mid);
}
.lanc-preview-backdrop.open .lanc-preview-modal { transform: scale(1); }
.lanc-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}
.lanc-preview-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lanc-preview-meta strong {
  font: 600 15px 'Inter', sans-serif;
  color: var(--on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lanc-preview-meta span {
  font: 500 12px 'Inter', sans-serif;
  color: var(--on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lanc-preview-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lanc-preview-actions .lanc-btn { padding: 8px 12px; }
.lanc-preview-close {
  width: 36px; height: 36px;
  border: none; background: transparent;
  border-radius: 999px;
  color: var(--on-surface-variant);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lanc-preview-close:hover { background: var(--surface-variant); color: var(--on-surface); }
.lanc-preview-body {
  flex: 1; min-height: 0;
  overflow: auto;
  background: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
}
.lanc-preview-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.lanc-preview-body embed {
  width: 100%;
  height: 80vh;
}
.lanc-preview-fallback {
  padding: 48px 24px;
  text-align: center;
  color: #ccc;
}
.lanc-preview-fallback .msym { font-size: 48px; opacity: .6; }
.lanc-preview-fallback p { margin: 12px 0 0; font: 500 14px 'Inter', sans-serif; }

@media (max-width: 600px) {
  .lanc-preview-backdrop { padding: 0; }
  .lanc-preview-modal { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .lanc-preview-actions .lanc-btn span:not(.msym) { display: none; }
}

/* ============================================================
   DESKTOP (>= 761px)
   ============================================================ */
.lanc-desktop { padding: 20px 28px 32px; min-width: 0; }

.lanc-d-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.lanc-crumb {
  display: flex; align-items: center; gap: 6px;
  font: 400 13px/1 'Inter';
  color: var(--on-surface-variant);
}
.lanc-crumb a { color: inherit; text-decoration: none; }
.lanc-crumb a:hover { color: var(--on-surface); text-decoration: underline; }
.lanc-crumb .msym { font-size: 16px; }
.lanc-crumb .current {
  color: var(--on-surface);
  font-weight: 600;
}
.lanc-d-topbar-right {
  display: flex; align-items: center; gap: 12px;
}

.lanc-d-title {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.lanc-d-title h1 {
  margin: 0;
  font: 700 26px/1.2 'Inter Tight';
  letter-spacing: -0.02em;
  color: var(--on-surface);
}
.lanc-d-title .date {
  font: 400 13px/1 'Inter';
  color: var(--on-surface-variant);
}

/* ─── Layout: conteúdo + painel lateral ────────────────────── */
.lanc-d-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1080px) {
  .lanc-d-grid { grid-template-columns: minmax(0, 1fr); }
  .lanc-d-panel { display: none !important; }
}
/* Quando não há item focado (lista vazia), elimina a coluna do painel
   pra não deixar espaço morto à direita. */
.lanc-d-grid-nopanel { grid-template-columns: minmax(0, 1fr); }

.lanc-d-main { min-width: 0; }

/* ─── KPI strip ────────────────────────────────────────────── */
.lanc-d-kpis {
  display: flex;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}

/* Saulo 2026-05-28: Financeiro Adm tem 2 grupos (despesas + receitas).
   Container empilha verticalmente em vez de flex horizontal. */
.lanc-d-kpis-grouped {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.lanc-d-kpi-grouplabel {
  font: 600 10px/1 'Inter';
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin: 0 0 6px 4px;
}
.lanc-d-kpi-row + .lanc-d-kpi-grouplabel { margin-top: 14px; }
.lanc-d-kpi-row {
  display: flex;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  overflow: hidden;
}
.lanc-d-kpi {
  flex: 1;
  padding: 14px 18px;
  border: 0;
  border-right: 1px solid var(--outline-variant);
  min-width: 0;
  text-align: left;
  background: transparent;
  color: inherit;
  font: inherit;
}
.lanc-d-kpi:last-child { border-right: 0; }
.lanc-d-kpi.is-clickable {
  cursor: pointer;
  transition: background var(--motion-fast);
}
.lanc-d-kpi.is-clickable:hover { background: var(--surface-container); }
.lanc-d-kpi.is-active {
  background: var(--surface-container);
  box-shadow: inset 0 -3px 0 0 var(--success);
}
.kind-pagar .lanc-d-kpi.is-active,
.kind-gastos .lanc-d-kpi.is-active { box-shadow: inset 0 -3px 0 0 var(--error); }
.lanc-d-kpi-label {
  font: 600 10px/1 'Inter';
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.lanc-d-kpi-val {
  font: 700 24px/1.1 'Inter Tight';
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
  margin-top: 4px;
  color: var(--on-surface);
}
.lanc-d-kpi-val.kind-receber { color: var(--success); }
.lanc-d-kpi-val.tone-error   { color: var(--error); }

/* Tones por bucket (Vencidos/Vence hoje/A vencer/Pagos/Total). Aplica
   cor do label + valor + box-shadow no estado ativo, criando uma faixa
   horizontal de cores que reflete o ciclo do lançamento. */
.lanc-d-kpi.tone-danger  .lanc-d-kpi-label,
.lanc-d-kpi.tone-danger  .lanc-d-kpi-val   { color: var(--error); }
.lanc-d-kpi.tone-warn    .lanc-d-kpi-label,
.lanc-d-kpi.tone-warn    .lanc-d-kpi-val   { color: var(--tertiary); }
.lanc-d-kpi.tone-success .lanc-d-kpi-label,
.lanc-d-kpi.tone-success .lanc-d-kpi-val   { color: var(--success); }
.lanc-d-kpi.tone-danger.is-active  { box-shadow: inset 0 -3px 0 0 var(--error); }
.lanc-d-kpi.tone-warn.is-active    { box-shadow: inset 0 -3px 0 0 var(--tertiary); }
.lanc-d-kpi.tone-success.is-active { box-shadow: inset 0 -3px 0 0 var(--success); }
.lanc-d-kpi-sub {
  font: 400 11px/1.3 'Inter';
  color: var(--on-surface-variant);
  margin-top: 3px;
}
.lanc-d-actions {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 6px;
  justify-content: center;
  min-width: 220px;
}
.lanc-btn {
  border: 0; border-radius: 10px;
  padding: 9px 14px;
  font: 600 12px 'Inter';
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  transition: filter var(--motion-fast), background var(--motion-fast);
}
.lanc-btn .msym { font-size: 16px; }
.lanc-btn-primary { background: var(--lanc-primary-bg); color: var(--lanc-primary-fg); }
.lanc-btn-primary.kind-receber,
.lanc-btn-primary.kind-recebido { background: var(--lanc-success-bg); color: var(--lanc-success-fg); }
.lanc-btn-primary.kind-pagar,
.lanc-btn-primary.kind-gastos   { background: var(--lanc-gastos-bg);  color: var(--lanc-gastos-fg); }
.lanc-btn-primary:hover { filter: brightness(1.05); }
.lanc-btn-outline {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline);
}
.lanc-btn-outline:hover { background: var(--surface-container-low); }
/* Danger outline — pra ação destrutiva tipo "Apagar lançamento" (#336). */
.lanc-btn-danger-outline {
  color: #c43c4a;
  border-color: rgba(196, 60, 74, .45);
}
.lanc-btn-danger-outline:hover { background: rgba(196, 60, 74, .08); color: #b02a3a; }
.lanc-btn-danger {
  background: #c43c4a; color: #fff; border: 1px solid #c43c4a;
}
.lanc-btn-danger:hover { background: #b02a3a; }

/* ─── Row kebab menu (⋮) — popover de ações da linha ─────────── */
.lanc-row-menu {
  position: absolute;
  z-index: 90;
  background: var(--surface, #fff);
  color: var(--on-surface, #1a1a1a);
  border: 1px solid var(--outline, rgba(0,0,0,.12));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  padding: 6px;
  min-width: 200px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.lanc-row-menu.open { opacity: 1; transform: translateY(0); }
.lanc-row-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 9px 12px;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lanc-row-menu-item:hover { background: var(--surface-container-low, rgba(0,0,0,.04)); }
.lanc-row-menu-item .msym { font-size: 18px; color: var(--on-surface-variant); }
/* Variante verde pra "Marcar como pago". */
.lanc-row-menu-item-success .msym { color: var(--success, #1b7a4f); }
.lanc-row-menu-item-success:hover { color: var(--success, #1b7a4f); background: rgba(27, 122, 79, .08); }
/* Variante âmbar pra "Marcar como em aberto" (estornar) — operação reversa do
   pago, semanticamente "atenção/voltar" e não "destrutivo". */
.lanc-row-menu-item-warn .msym { color: var(--tertiary, #b58900); }
.lanc-row-menu-item-warn:hover { color: var(--tertiary, #b58900); background: rgba(181, 137, 0, .08); }
/* Variante vermelha pra "Apagar lançamento" — destrutiva. */
.lanc-row-menu-item-danger .msym { color: #c43c4a; }
.lanc-row-menu-item-danger:hover { color: #b02a3a; background: rgba(196, 60, 74, .08); }

/* Modal "Marcar como pago" — pede data com validação max=hoje. */
.lanc-baixar-modal { max-width: 400px; }
.lanc-baixar-label {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px;
}
.lanc-baixar-label > span {
  font: 500 12px/1 'Inter';
  color: var(--on-surface-variant);
}
.lanc-baixar-label input[type="date"] {
  padding: 10px 12px;
  border-radius: var(--shape-s, 8px);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  font: 400 14px/1 'Inter';
  color: var(--on-surface);
}
.lanc-baixar-label input[type="date"]:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}
.lanc-baixar-hint {
  font: 400 11px/1.4 'Inter';
  color: var(--on-surface-variant);
  margin-top: 4px;
}
.lanc-baixar-err {
  font: 500 12px/1.3 'Inter';
  color: var(--error, #b3261e);
  margin-top: 6px;
  min-height: 14px;
}

/* ─── Confirm modal (delete) ──────────────────────────────────── */
.lanc-confirm-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.lanc-confirm-backdrop.open { opacity: 1; pointer-events: auto; }
.lanc-confirm-modal {
  background: var(--surface, #fff);
  color: var(--on-surface, #1a1a1a);
  border-radius: 14px;
  max-width: 420px; width: 100%;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  display: flex; flex-direction: column; gap: 14px;
}
.lanc-confirm-head { font-weight: 600; font-size: 17px; }
.lanc-confirm-body p { margin: 0; line-height: 1.45; font-size: 14px; }
.lanc-confirm-body p + p { margin-top: 10px; }
.lanc-confirm-warning {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(196, 60, 74, .08);
  color: #8b2030; padding: 10px 12px; border-radius: 8px; font-size: 13px;
}
.lanc-confirm-warning .msym { font-size: 18px; margin-top: 1px; }
.lanc-confirm-foot { display: flex; gap: 10px; justify-content: flex-end; }
.lanc-btn:disabled,
.lanc-btn[disabled] {
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale(.4);
}
.lanc-btn:disabled:hover,
.lanc-btn[disabled]:hover { filter: grayscale(.4); background: var(--lanc-gastos-bg); }
.lanc-btn-primary[disabled] { background: var(--surface-variant); color: var(--on-surface-variant); }

/* ─── Filters strip ────────────────────────────────────────── */
.lanc-d-filters {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.lanc-segctrl {
  display: inline-flex;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  padding: 3px;
}
.lanc-segctrl button {
  padding: 5px 13px;
  font: 600 12px 'Inter';
  background: transparent;
  color: var(--on-surface-variant);
  border: 0; border-radius: 999px;
  cursor: pointer;
}
.lanc-segctrl button.on {
  background: var(--surface);
  color: var(--on-surface);
  box-shadow: var(--elev-1);
}
.lanc-d-filterchip {
  height: 32px;
  padding: 0 12px;
  font: 500 12px 'Inter';
  background: var(--surface-container-low);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.lanc-d-filterchip:hover {
  background: var(--surface-container);
  border-color: var(--outline);
}
.lanc-d-filterchip .msym { font-size: 14px; }
/* Saulo 2026-05-27: filtro ativo destacado com primary-container + texto
   primary. Faz o estado "tem filtro aplicado" saltar visualmente sem
   precisar de badge dot. Mesmo padrão do header da coluna. */
.lanc-d-filterchip.on {
  background: var(--primary-container);
  border-color: var(--primary);
  color: var(--primary);
}
.lanc-d-filterchip.on:hover {
  background: color-mix(in srgb, var(--primary-container) 80%, var(--primary) 20%);
}
/* X de "limpar filtro" no canto direito do chip ativo. Funciona como
   atalho — clique direto remove o filtro sem precisar abrir dropdown.
   Implementado como <span role="button"> (HTML proíbe button-in-button). */
.lanc-d-filterchip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  margin-right: -2px;
  border-radius: 50%;
  color: var(--primary);
  cursor: pointer;
  transition: background var(--motion-fast);
}
.lanc-d-filterchip-clear:hover {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}
.lanc-d-filterchip-clear .msym {
  font-size: 14px !important;
}
.lanc-d-search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px;
  font: 400 12px 'Inter';
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  height: 32px;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.lanc-d-search:focus-within {
  border-color: var(--outline);
  background: var(--surface);
}
.lanc-d-search .msym { font-size: 16px; }
.lanc-d-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  color: var(--on-surface);
  padding: 0;
  height: 100%;
}
.lanc-d-search-input::placeholder { color: var(--on-surface-variant); }
/* Esconde o "x" nativo do type=search nos navegadores que renderizam */
.lanc-d-search-input::-webkit-search-decoration,
.lanc-d-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lanc-d-search-clear {
  border: 0; background: transparent; cursor: pointer; padding: 2px;
  color: var(--on-surface-variant); display: inline-grid; place-items: center;
  border-radius: 999px;
}
.lanc-d-search-clear:hover { color: var(--on-surface); background: var(--surface-container); }
.lanc-d-search-clear .msym { font-size: 16px; }

/* ─── Tabela ───────────────────────────────────────────────── */
.lanc-d-table-wrap {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  overflow: hidden;
}
.lanc-d-table {
  width: 100%;
  border-collapse: collapse;
}
.lanc-d-table thead {
  background: var(--surface-container-low);
}
.lanc-d-table th {
  font: 600 10.5px/1 'Inter';
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--outline-variant);
  white-space: nowrap;
}
.lanc-d-table th.right { text-align: right; }
.lanc-d-table th.col-check { width: 36px; }
.lanc-d-table th.col-actions { width: 40px; }
/* Saulo 2026-05-27: filtro no header da coluna. Sem filtro: clique abre
   o dropdown (mesmo do chip do topo). Com filtro: clique LIMPA o filtro
   direto (sem precisar abrir dropdown), e um badge dot sobre o label
   sinaliza o estado ativo. Pattern aplica a qualquer coluna filtrável. */
.lanc-d-table th .lanc-d-col-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin: -4px -6px; /* expande área clicável sem afetar layout */
  border-radius: 6px;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.lanc-d-table th .lanc-d-col-filter:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}
.lanc-d-table th .lanc-d-col-filter.is-active {
  color: var(--primary);
  font-weight: 700; /* reforça destaque */
}
/* Header ordenável: cursor + hover + ícone de direção quando ativo */
.lanc-d-table th.lanc-d-sort {
  cursor: pointer;
  user-select: none;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.lanc-d-table th.lanc-d-sort:hover { background: var(--surface-container); color: var(--on-surface); }
.lanc-d-table th.lanc-d-sort.is-active { color: var(--on-surface); }
.lanc-d-sort-inner { display: inline-flex; align-items: center; gap: 4px; }
.lanc-d-table th.right .lanc-d-sort-inner { justify-content: flex-end; width: 100%; }
.lanc-d-sort-icon { font-size: 14px !important; }

.lanc-d-row {
  font: 400 12.5px/1.4 'Inter';
  border-bottom: 1px solid var(--outline-variant);
  cursor: pointer;
  transition: background var(--motion-fast);
}
.lanc-d-row:last-child { border-bottom: 0; }
.lanc-d-row:hover { background: var(--surface-container-low); }
.lanc-d-row.focused { background: var(--lanc-accent-bg); }
.lanc-d-row.focused:hover { background: var(--lanc-accent-bg); }
.lanc-d-row.selected:not(.focused) { background: rgba(0,0,0,.025); }
[data-theme="dark"] .lanc-d-row.selected:not(.focused) { background: rgba(255,255,255,.03); }

.lanc-d-row td {
  padding: 12px 12px;
  vertical-align: middle;
}
.lanc-d-row .col-counter { font-weight: 600; color: var(--on-surface); }
.lanc-d-row .col-desc {
  color: var(--on-surface-variant);
  max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lanc-d-row .col-amount {
  text-align: right;
  font: 700 13px 'Inter Tight';
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lanc-d-row .col-amount.kind-receber,
.lanc-d-row .col-amount.kind-recebido { color: var(--success); }
.lanc-d-row .col-amount.kind-pagar,
.lanc-d-row .col-amount.kind-gastos   { color: var(--on-surface); }
.lanc-d-row .col-date {
  white-space: nowrap;
  font: 500 12.5px/1.4 'Inter';
  color: var(--on-surface);
}
.lanc-d-row .col-date.tone-error { color: var(--error); font-weight: 600; }
.lanc-d-row .col-status { white-space: nowrap; }
.lanc-d-row .col-category {
  font: 500 12.5px/1.4 'Inter';
  color: var(--on-surface-variant);
  white-space: nowrap;
}
.lanc-d-row .col-type { white-space: nowrap; }
/* Pill de Tipo (Material de obra / Mão de obra / Geral / Outros). Cores
   discretas pra criar leitura visual rápida sem competir com situação. */
.lanc-type-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font: 500 11px 'Inter';
  white-space: nowrap;
}
/* Cores literais (sem depender dos tokens M3) pra garantir contraste
   alto e diferenciação imediata entre os 4 tipos. Ajustes pra dark mode
   logo abaixo. */
.lanc-type-pill.type-material { background: #FFEDD5; color: #9A3412; } /* amber/laranja  */
.lanc-type-pill.type-labor    { background: #DBEAFE; color: #1E40AF; } /* azul           */
.lanc-type-pill.type-general  { background: #EDE9FE; color: #5B21B6; } /* violeta        */
.lanc-type-pill.type-other    { background: var(--surface-container-high); color: var(--on-surface-variant); }
[data-theme="dark"] .lanc-type-pill.type-material { background: #7C2D12; color: #FFEDD5; }
[data-theme="dark"] .lanc-type-pill.type-labor    { background: #1E3A8A; color: #DBEAFE; }
[data-theme="dark"] .lanc-type-pill.type-general  { background: #4C1D95; color: #EDE9FE; }
.lanc-d-row .col-project {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--on-surface-variant);
}
.lanc-d-row .col-project .swatch {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.lanc-d-row .col-method { color: var(--on-surface-variant); }
.lanc-d-row .col-actions { width: 40px; text-align: center; }
.lanc-d-row-iconbtn {
  background: transparent; border: 0; padding: 4px;
  color: var(--on-surface-variant);
  cursor: pointer;
  display: inline-grid; place-items: center;
  border-radius: 6px;
}
.lanc-d-row-iconbtn:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
}
.lanc-d-row-iconbtn .msym { font-size: 18px; }

/* checkbox quadrado (table) */
.lanc-d-check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--outline);
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
}
.lanc-d-check.on {
  background: var(--primary);
  border-color: var(--primary);
}
.lanc-d-check .msym {
  font-size: 12px; color: var(--on-primary);
  display: none;
}
.lanc-d-check.on .msym { display: block; }

/* footer da tabela */
.lanc-d-tfoot {
  padding: 10px 14px;
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font: 400 12px 'Inter';
  color: var(--on-surface-variant);
}
.lanc-d-tfoot-counts { flex: 0 0 auto; }
.lanc-d-pager {
  display: inline-flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.lanc-d-perpage { display: inline-flex; align-items: center; gap: 6px; }
.lanc-d-perpage select {
  font: inherit;
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
}
.lanc-d-pager-nav { display: inline-flex; align-items: center; gap: 4px; }
.lanc-d-pager-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  color: var(--on-surface-variant);
  border-radius: 6px;
  cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.lanc-d-pager-btn:hover:not(:disabled) {
  background: var(--surface-container);
  color: var(--on-surface);
}
.lanc-d-pager-btn:disabled { cursor: not-allowed; opacity: .4; }
.lanc-d-pager-btn .msym { font-size: 18px; }
.lanc-d-pager-info { font-variant-numeric: tabular-nums; }
/* PR-C Saulo 2026-05-26: "Totais do período" agora tem 3 partes
   (label · período · valor) — estilo Conta Azul. Display flex column
   alinhada à direita. */
.lanc-d-tfoot-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.lanc-d-tfoot-total-label {
  font: 700 14px 'Inter';
  letter-spacing: 0;
  color: var(--on-surface);
}
.lanc-d-tfoot-total-period {
  font: 400 13px 'Inter';
  color: var(--on-surface-variant);
  margin-bottom: 2px;
}
.lanc-d-tfoot-total-value {
  font: 700 16px 'Inter Tight';
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
  color: var(--on-surface);
}
.lanc-d-tfoot-total.kind-receber .lanc-d-tfoot-total-value,
.lanc-d-tfoot-total.kind-recebido .lanc-d-tfoot-total-value { color: var(--success); }
.lanc-d-tfoot-total.kind-gastos .lanc-d-tfoot-total-value   { color: var(--on-surface); }

/* ============================================================
   Painel de detalhe (desktop) + conteúdo de detalhe (compartilhado com sheet mobile)
   ============================================================ */
.lanc-d-panel {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: 14px;
  position: sticky;
  top: 20px;
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}
.lanc-detail-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--outline-variant);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.lanc-detail-head-info { min-width: 0; flex: 1; }
.lanc-detail-eyebrow {
  font: 600 10px/1 'Inter';
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--on-surface-variant);
}
.lanc-detail-counter {
  font: 600 16px/1.2 'Inter Tight';
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin-top: 4px;
}
.lanc-detail-title {
  font: 400 12px/1.4 'Inter';
  color: var(--on-surface-variant);
  margin-top: 4px;
}
.lanc-detail-close {
  width: 28px; height: 28px; border-radius: 999px;
  background: transparent; border: 0; padding: 0;
  color: var(--on-surface-variant); cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.lanc-detail-close:hover { background: var(--surface-container-low); }
.lanc-detail-close .msym { font-size: 18px; }

.lanc-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.lanc-detail-amount {
  font: 700 30px/1.05 'Inter Tight';
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.lanc-detail-amount.kind-receber,
.lanc-detail-amount.kind-recebido { color: var(--success); }
.lanc-detail-amount.kind-pagar,
.lanc-detail-amount.kind-gastos   { color: var(--on-surface); }
.lanc-detail-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.lanc-detail-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  font: 400 12.5px 'Inter';
}
.lanc-detail-meta dt {
  color: var(--on-surface-variant);
  margin: 0;
}
.lanc-detail-meta dd {
  color: var(--on-surface);
  margin: 0;
  word-break: break-word;
}
.lanc-detail-project {
  display: inline-flex; align-items: center; gap: 6px;
}
.lanc-detail-project .swatch {
  width: 8px; height: 8px; border-radius: 2px;
}
.lanc-detail-doc {
  margin-top: 18px;
  padding: 12px;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
}
.lanc-detail-doc-label {
  font: 600 10.5px/1 'Inter';
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--on-surface-variant);
}
.lanc-detail-doc-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.lanc-detail-doc-num {
  flex: 1; min-width: 0;
  font: 400 11.5px 'JetBrains Mono', ui-monospace, monospace;
  color: var(--on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lanc-detail-copy {
  padding: 5px 10px;
  font: 600 11px 'Inter';
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.lanc-detail-copy .msym { font-size: 14px; }
.lanc-detail-copy:hover { background: var(--surface-container-low); }

.lanc-detail-receipt {
  margin-top: 18px;
}
.lanc-detail-receipt-label {
  font: 600 10.5px/1 'Inter';
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 8px;
}
.lanc-detail-receipt-thumb {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  cursor: zoom-in;
  padding: 0;
}
.lanc-detail-receipt-thumb img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  background: #0a0a0a;
}
.lanc-detail-receipt-overlay {
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--motion-fast);
}
.lanc-detail-receipt-thumb:hover .lanc-detail-receipt-overlay { opacity: 1; }
.lanc-detail-receipt-overlay .msym { font-size: 18px; }

.lanc-detail-history-label {
  font: 600 10.5px/1 'Inter';
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-top: 18px;
}
.lanc-detail-history {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
  font: 400 11.5px 'Inter';
}
.lanc-detail-history-item {
  display: flex; gap: 8px;
}
.lanc-detail-history-date {
  width: 38px; flex-shrink: 0;
  color: var(--on-surface-variant);
  font-feature-settings: 'tnum';
}
.lanc-detail-history-by {
  font-size: 10.5px;
  color: var(--on-surface-variant);
}

.lanc-detail-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--outline-variant);
  display: flex; gap: 8px;
  background: var(--surface);
}
.lanc-detail-foot .lanc-btn { flex: 1; }
.lanc-detail-foot .lanc-btn-outline { flex: 0 0 auto; }

/* ============================================================
   Estado vazio
   ============================================================ */
.lanc-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--on-surface-variant);
}
.lanc-empty .msym {
  font-size: 56px;
  color: var(--outline);
  margin-bottom: 8px;
}
.lanc-empty .title {
  font: 600 18px/1.2 'Inter Tight';
  color: var(--on-surface);
  margin: 4px 0;
}
.lanc-empty .sub {
  font: 400 13px 'Inter';
  margin-bottom: 16px;
}

/* ============================================================
   Toast
   ============================================================ */
.lanc-toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom, 0));
  background: var(--m3-neutral-10);
  color: var(--m3-neutral-95);
  padding: 10px 14px;
  border-radius: 12px;
  font: 500 12.5px 'Inter';
  box-shadow: 0 8px 22px rgba(15,23,42,.25);
  z-index: 250;
  display: flex; align-items: center; gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.lanc-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-4px);
}
@media (min-width: 761px) {
  .lanc-toast { bottom: 28px; }
}

/* ============================================================
   Hub — financeiro.html
   ============================================================ */
.fin-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.fin-hub-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-width: 0;
  transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.fin-hub-card .desc {
  overflow-wrap: anywhere;
}
.fin-hub-card:hover {
  background: var(--surface-container);
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}
.fin-hub-card .ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--primary-container);
  color: var(--on-primary-container);
  margin-bottom: 8px;
}
.fin-hub-card .ico.success { background: var(--success-container); color: var(--on-success-container); }
.fin-hub-card .ico .msym { font-size: 22px; }
.fin-hub-card .name {
  font: 600 16px/1.2 'Inter Tight';
  color: var(--on-surface);
}
.fin-hub-card .desc {
  font: 400 12.5px/1.4 'Inter';
  color: var(--on-surface-variant);
}
.fin-hub-card.disabled {
  opacity: .6;
  cursor: default;
}
.fin-hub-card.disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--surface-container-low);
}
.fin-hub-card .badge {
  display: inline-block;
  font: 600 9.5px 'Inter';
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  padding: 2px 7px; border-radius: 999px;
  margin-top: 6px;
  width: fit-content;
}

/* ─── Despesas gerais unificada (#341) ─────────────────────────────
   Header com subtitle descritivo + CTAs Exportar/Nova despesa,
   selo recorrente em linhas geradas por template, chip Tipo, footer
   com link pra gerenciar templates. */
.lanc-d-title-gerais {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lanc-d-title-left { min-width: 0; }
.lanc-d-subtitle {
  font: 400 13px/1.3 'Inter';
  color: var(--on-surface-variant);
  margin-top: 4px;
}
.lanc-d-title-actions {
  display: flex; gap: 8px; align-items: center;
}

/* Botões pílula do header (Exportar + Nova despesa). Não interfere
   com .lanc-btn padrão (retangular) usado em painel de detalhe. */
.lanc-btn-pill-outline,
.lanc-btn-pill-primary {
  border-radius: 999px;
  padding: 10px 18px;
  font: 500 13px/1 'Inter';
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: filter var(--motion-fast), background var(--motion-fast);
}
.lanc-btn-pill-outline {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
}
.lanc-btn-pill-outline:hover { background: var(--surface-container-low); }
.lanc-btn-pill-primary {
  background: var(--primary);
  color: var(--on-primary);
  border: 0;
  box-shadow: var(--elev-1, 0 1px 2px rgba(0,0,0,.08));
}
.lanc-btn-pill-primary:hover { filter: brightness(1.06); }
.lanc-btn-pill-outline .msym,
.lanc-btn-pill-primary .msym { font-size: 16px; }

/* Selo "repeat · mensal" inline na descrição da linha. Tom terracota
   (tertiary-container) — diferenciado dos outros badges sem virar
   ruído. Sempre acompanha o texto "mensal" pra acessibilidade. */
.row-recorrente-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: 500 10px/1 'Inter';
  background: var(--tertiary-container, #ffd9c2);
  color: var(--on-tertiary-container, #432b1d);
  padding: 2px 6px 2px 4px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: 1px;
}
.row-recorrente-badge .msym { font-size: 12px; }

/* PR-C (Saulo 2026-05-26, design Conta Azul): badge "N/Total" inline na
   descrição pra items que vêm de template recorrente. Substitui o
   selo genérico "repeat · mensal" — mostra a posição na série
   ("5/12") direto, sem precisar abrir detalhe. */
.row-parcela-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: 500 10px/1 'JetBrains Mono', monospace;
  background: var(--tertiary-container, #ffd9c2);
  color: var(--on-tertiary-container, #432b1d);
  padding: 2px 6px 2px 4px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: 1px;
}
.row-parcela-badge .msym { font-size: 12px; }

/* PR-C: coluna Pagamento separada da Vencimento. Tom mais sutil
   (placeholder "—" vem do formatDateBr(null) em renderRowDesktop). */
.lanc-d-row .col-paid {
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* Chip "Tipo" (avulsa/recorrente) — estado ativo usa primary container
   pra destacar o filtro aplicado, com ícone à esquerda do label. */
.lanc-d-filterchip.is-tipo {
  display: inline-flex; align-items: center; gap: 4px;
}
.lanc-d-filterchip.is-tipo.on {
  border-color: var(--primary, #1f3a5f);
  background: var(--primary-container, #d5e3ff);
  color: var(--on-primary-container, #001b3d);
}
.lanc-d-filterchip.is-tipo .msym { font-size: 14px; }

/* Rodapé "Gerenciar templates recorrentes" — link discreto abaixo
   da tabela. Não compete com totais — fica fora do .lanc-d-tfoot. */
.lanc-d-templates-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}
.lanc-d-templates-meta {
  font: 400 12px/1 'Inter';
  color: var(--on-surface-variant);
}
.lanc-d-templates-link {
  background: transparent; border: 0;
  color: var(--primary);
  font: 500 12px/1 'Inter';
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.lanc-d-templates-link:hover { text-decoration: underline; }
.lanc-d-templates-link .msym { font-size: 14px; }

/* Modal de delete recorrente (3 radios pra escolher escopo). Reutiliza o
   .lanc-confirm-modal mas com lista de radios mais espaçada. */
.lanc-confirm-rec { max-width: 460px; }
.lanc-rec-scope {
  display: flex; flex-direction: column; gap: 8px;
  margin: 10px 0;
}
.lanc-rec-scope label {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-m, 12px);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.lanc-rec-scope label:hover { background: var(--surface-container-low); }
.lanc-rec-scope label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.lanc-rec-scope input[type="radio"] { margin-top: 2px; }
.lanc-rec-scope label > span {
  display: flex; flex-direction: column; gap: 2px;
  font: 400 13px/1.3 'Inter';
}
.lanc-rec-scope label > span strong { font-weight: 600; }
.lanc-rec-scope-desc {
  font: 400 12px/1.3 'Inter';
  color: var(--on-surface-variant);
}
.lanc-rec-scope label:has(input:checked) .lanc-rec-scope-desc {
  color: var(--on-primary-container);
  opacity: .85;
}

/* ============================================================
   DESPESAS GERAIS — MOBILE REFORMA (handoff Sergio 2026-05-26)
   ============================================================
   Substitui o header colorido + total gigante por:
     • Top app bar M3 (back + título + período + ação)
     • KPI carousel horizontal (5 cards, scroll snap)
     • Section header (contagem + sort)
     • Lista agrupada por dia (sticky day headers)
     • Extended FAB no canto inferior
*/

/* Top app bar */
.lanc-m-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0)) 12px 8px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}
.lanc-m-topbar-icon {
  width: 40px; height: 40px;
  border: 0; background: transparent; color: var(--on-surface);
  display: grid; place-items: center;
  border-radius: 999px; cursor: pointer; padding: 0;
}
.lanc-m-topbar-icon:hover { background: var(--surface-container-low); }
.lanc-m-topbar-icon .msym { font-size: 22px; }
.lanc-m-topbar-titles { flex: 1; min-width: 0; }
.lanc-m-topbar-title {
  font: 600 17px/1.2 'Inter Tight';
  color: var(--on-surface);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lanc-m-topbar-sub {
  font: 400 11px/1 'Inter';
  color: var(--on-surface-variant);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* KPI carousel (5 cards horizontais, scroll snap) */
/* `padding` no container fica VISUAL mas o scroll-snap encosta os cards na
   borda do scroll-container ignorando padding. `scroll-padding-inline` é o
   token correto pra dar respiro lateral mesmo quando o snap alinha o card
   no início — sem isso, "Total mês" encosta na esquerda da viewport. */
.lanc-m-kpi-row {
  display: flex; gap: 8px;
  /* Padding lateral alinhado com .lanc-m-filterbar (12px) pro carousel
     começar no mesmo eixo dos chips abaixo. scroll-padding-inline garante
     o respiro mesmo com scroll-snap. */
  padding: 14px 12px 14px;
  scroll-padding-inline: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex-shrink: 0;
}
.lanc-m-kpi-row::-webkit-scrollbar { display: none; }

/* Saulo 2026-05-28: Financeiro Adm mobile separa em 2 grupos (despesas
   + receitas). Label em cima de cada row, padding lateral igual aos
   chips abaixo. */
.lanc-m-kpi-group { display: flex; flex-direction: column; }
.lanc-m-kpi-group .lanc-m-kpi-row { padding-block: 8px; }
.lanc-m-kpi-group .lanc-m-kpi-row:first-of-type { padding-top: 14px; }
.lanc-m-kpi-group .lanc-m-kpi-row:last-of-type  { padding-bottom: 14px; }
.lanc-m-kpi-grouplabel {
  font: 600 10px/1 'Inter';
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  padding: 4px 12px 0;
}
.lanc-m-kpi {
  min-width: 124px;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--shape-m, 12px);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; text-align: left;
  transition: border-color var(--motion-fast, 120ms), background var(--motion-fast, 120ms);
}
.lanc-m-kpi.is-active {
  background: var(--surface);
  border: 1.5px solid var(--primary);
  padding: 9.5px 11.5px; /* compensa o border extra de 0.5px */
}
.lanc-m-kpi-label {
  font: 600 10px/1 'Inter';
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.lanc-m-kpi-val {
  font: 600 17px/1 'Inter Tight';
  color: var(--on-surface);
  font-feature-settings: 'tnum';
}
.lanc-m-kpi-sub {
  font: 400 10px/1 'Inter';
  color: var(--on-surface-variant);
}
/* Tones — color do label + val variam por kind do KPI */
.lanc-m-kpi-danger  .lanc-m-kpi-label,
.lanc-m-kpi-danger  .lanc-m-kpi-val   { color: var(--error); }
.lanc-m-kpi-warn    .lanc-m-kpi-label,
.lanc-m-kpi-warn    .lanc-m-kpi-val   { color: var(--tertiary); }
.lanc-m-kpi-success .lanc-m-kpi-label,
.lanc-m-kpi-success .lanc-m-kpi-val   { color: var(--success); }

/* Section header (contagem + sort) */
.lanc-m-section-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px 6px;
  flex-shrink: 0;
}
.lanc-m-section-count {
  font: 500 11px/1 'Inter';
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.lanc-m-section-sort {
  background: transparent; border: 0;
  font: 500 12px/1 'Inter';
  color: var(--on-surface-variant);
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; padding: 4px 6px;
  border-radius: 6px;
}
.lanc-m-section-sort:hover { background: var(--surface-container-low); }
.lanc-m-section-sort .msym { font-size: 14px; }

/* Sticky day header (quando state.group === 'day'). Saulo 2026-05-27:
   sem divider abaixo do header — fica só o divider da row, espelhando
   o mockup. Divider duplicado (header + row) poluía visualmente. */
.lanc-m-list .lanc-m-group-head {
  position: sticky; top: 0;
  z-index: 1;
  background: var(--background);
}

/* Extended FAB — Nova despesa */
.lanc-m-fab {
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0));
  height: 56px;
  padding: 0 20px 0 18px;
  border-radius: 999px;
  border: 0;
  background: var(--primary);
  color: var(--on-primary);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font: 500 14px/1 'Inter';
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.1);
  transition: transform var(--motion-fast, 120ms), box-shadow var(--motion-fast, 120ms);
  z-index: 10;
}
.lanc-m-fab:hover { transform: translateY(-1px); }
.lanc-m-fab:active { transform: translateY(0); }
.lanc-m-fab .msym { font-size: 20px; }

/* Selo recorrente — ícone-só, inline com o título da linha */
.lanc-row-recorrente {
  display: inline-flex; align-items: center;
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  padding: 2px 5px;
  margin-left: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  vertical-align: middle;
}
.lanc-row-recorrente .msym { font-size: 12px; }

/* Row mobile pra kind=gerais — 2 colunas (desc à esquerda · valor+status à direita) */
.lanc-row-body-mgerais {
  display: flex; gap: 12px; align-items: flex-start;
  flex: 1; min-width: 0;
}
.lanc-row-m3-left {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.lanc-row-m3-title {
  display: flex; align-items: center; gap: 6px;
  font: 600 14px/1.2 'Inter';
  color: var(--on-surface);
}
.lanc-row-m3-titletext {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.lanc-row-m3-meta {
  font: 400 12px/1.3 'Inter';
  color: var(--on-surface-variant);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lanc-row-m3-right {
  flex-shrink: 0; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.lanc-row-m3-right .lanc-row-amount {
  font: 600 14px/1.2 'Inter Tight';
  font-feature-settings: 'tnum';
}

/* Esconde FAB no desktop (renderizado mas sem display) */
@media (min-width: 761px) {
  .lanc-m-fab { display: none; }
}

/* ─── Detail page (rota dedicada substituindo bottom sheet no mobile) ─── */
/* Saulo 2026-06-15: lancamento.html?id=... usa esse layout em vez do        */
/* drawer desktop ou da bottom sheet mobile. Resolve scroll-leak + tap       */
/* conflict no thumb do comprovante.                                         */
.lanc-detail-page {
  min-height: 100vh;
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow-x: hidden;
  min-width: 0;
}
.lanc-detail-page-shell {
  flex: 1;
  display: flex; flex-direction: column;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* Saulo 2026-06-15: min-width:0 + overflow-x:hidden em cascata pra
     ellipsis do título funcionar — sem isso o nowrap empurra o shell
     pra fora do viewport ao invés de truncar. */
  min-width: 0;
  overflow-x: hidden;
}
.lanc-detail-page-loading {
  padding: 48px 24px;
  text-align: center;
  color: var(--on-surface-variant);
  font: 500 14px 'Inter', sans-serif;
}
.lanc-detail-page-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--outline-variant);
  position: sticky; top: 0;
  background: var(--surface);
  z-index: 10;
  /* topbar é flex container: min-width:0 + overflow-x:hidden garantem
     que o filho flex .lanc-detail-page-titles encolha pro espaço
     disponível em vez de empurrar. */
  min-width: 0;
  overflow-x: hidden;
}
.lanc-detail-page-back {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: var(--on-surface);
  text-decoration: none;
  flex-shrink: 0;
}
.lanc-detail-page-back:hover { background: var(--surface-variant); }
.lanc-detail-page-titles {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.lanc-detail-page-titles > div {
  /* Cada linha trunca com ellipsis. Counter (fornecedor/cliente) longo
     não empurra a topbar — aparece completo no body de qualquer jeito. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lanc-detail-page-heading {
  /* Hero do item no body — sem truncar, deixa quebrar linha pra ler
     a descrição inteira. Saulo 2026-06-15 (Rafa). */
  font: 600 22px/1.3 'Inter Tight', sans-serif;
  color: var(--on-surface);
  margin: 0 0 16px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lanc-detail-page-body {
  flex: 1;
  padding: 16px;
}
.lanc-detail-page-foot {
  border-top: 1px solid var(--outline-variant);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
  display: flex; gap: 8px;
  background: var(--surface);
  position: sticky; bottom: 0;
  z-index: 10;
}