/* ============================================================
   Paula Vicente - Camada responsiva Mobile/Tablet
   2026-08-07
   Objetivo: melhorar uso em 360/390/414/768/1024px sem alterar desktop.
   ============================================================ */

:root {
  --mobile-safe-x: max(14px, env(safe-area-inset-left));
  --mobile-safe-right: max(14px, env(safe-area-inset-right));
  --mobile-safe-bottom: max(12px, env(safe-area-inset-bottom));
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

img, svg, video, canvas {
  max-width: 100%;
}

/* Evita grids/flex filhos estourando a viewport. */
.layout,
.content,
.point-content,
.rh-content,
.finance-main,
.central-v2,
.central-v2-shell,
.central-v2-main,
.fin-final-page,
.fin-page,
.fin-company-page,
[class*="-grid"],
[class*="-panel"],
[class*="-card"] {
  min-width: 0;
}

/* Tabelas: fallback seguro em tablet/celular. */
.table-responsive,
.mobile-table-scroll,
.fin-table-card,
.table-card,
.table-wrap {
  max-width: 100%;
}

.mobile-table-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.mobile-table-scroll > table {
  margin-bottom: 0;
}

/* Não deixa textos longos/IDs/arquivos forçarem a tela. */
td, th, p, small, label, .card, .panel, .module-topbar, .fin-section-head {
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  /* Mais área útil em tablets. */
  .content,
  .point-content,
  .rh-content,
  .finance-main {
    min-width: 0;
  }

  .module-topbar {
    gap: 12px;
  }

  .module-topbar-brand,
  .module-topbar-status {
    min-width: 0;
  }

  .central-v2-shell {
    gap: 18px;
  }

  .fin-final-shortcuts,
  .central-v2-modules,
  .central-v2-overview {
    gap: 12px;
  }
}

@media (max-width: 900px) {
  /* ---------------- Menu Ponto / RH ---------------- */
  body.mobile-nav-open,
  body.finance-nav-open {
    overflow: hidden;
    touch-action: none;
  }

  .layout.point-layout,
  .layout.rh-layout {
    display: block;
    width: 100%;
    min-height: 100dvh;
  }

  .point-layout .content,
  .rh-layout .content,
  .point-content,
  .rh-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0;
  }

  .mobile-menu-toggle {
    position: fixed !important;
    z-index: 1202 !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: var(--mobile-safe-x) !important;
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
  }

  .mobile-menu-toggle span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
  }

  .point-layout .sidebar,
  .rh-layout .sidebar {
    position: fixed !important;
    z-index: 1201 !important;
    inset: 0 auto 0 0 !important;
    width: min(86vw, 330px) !important;
    max-width: 330px !important;
    height: 100dvh !important;
    transform: translateX(-104%) !important;
    transition: transform .22s ease !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .layout.mobile-nav-open .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-backdrop {
    position: fixed !important;
    z-index: 1200 !important;
    inset: 0 !important;
    display: block !important;
    background: rgba(2, 6, 23, .52) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    backdrop-filter: blur(2px);
  }

  .layout.mobile-nav-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .sidebar-toggle {
    display: none !important;
  }

  .module-topbar {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: calc(12px + env(safe-area-inset-top)) var(--mobile-safe-right) 14px calc(74px + env(safe-area-inset-left)) !important;
    min-height: 72px;
  }

  .module-topbar-brand {
    width: 100%;
  }

  .module-topbar-brand img {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
    object-fit: contain;
  }

  .module-topbar-brand strong {
    font-size: 15px !important;
    line-height: 1.2;
  }

  .module-topbar-brand span {
    font-size: 11px !important;
    line-height: 1.35;
  }

  .module-topbar-status {
    width: 100%;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }

  .topbar-clock-card {
    display: none !important;
  }

  .module-topbar-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .module-topbar-actions::-webkit-scrollbar { display: none; }
  .module-topbar-actions > a,
  .module-topbar-actions > button {
    min-height: 40px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ---------------- Financeiro ---------------- */
  .finance-shell {
    display: block !important;
    width: 100%;
    min-height: 100dvh;
  }

  .finance-main {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .finance-menu-toggle {
    position: fixed !important;
    z-index: 1302 !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: var(--mobile-safe-x) !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .2);
  }

  .finance-sidebar {
    z-index: 1301 !important;
    width: min(88vw, 340px) !important;
    max-width: 340px !important;
    height: 100dvh !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .finance-nav-backdrop {
    z-index: 1300 !important;
    backdrop-filter: blur(2px);
  }

  body.finance-nav-open .finance-nav-backdrop {
    pointer-events: auto;
  }

  /* Cabeçalhos de páginas financeiras deixam espaço para o botão do menu. */
  .finance-main > .fin-page,
  .finance-main > .fin-company-page,
  .finance-main > .fin-final-page,
  .finance-main > main,
  .finance-main > section {
    min-width: 0;
  }

  .fin-company-header,
  .fin-final-header,
  .fin-page-header,
  .cashflow-hero {
    padding-left: max(74px, calc(74px + env(safe-area-inset-left))) !important;
  }
}

@media (max-width: 768px) {
  /* ---------------- Base mobile ---------------- */
  body {
    font-size: 14px;
  }

  main,
  .page,
  .page-shell,
  .content > section,
  .point-content > section,
  .rh-content > section,
  .finance-main > section,
  .fin-page,
  .fin-final-page,
  .fin-company-page {
    max-width: 100%;
  }

  /* Inputs em 16px evitam zoom automático do iPhone. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    max-width: 100%;
    min-height: 46px;
    font-size: 16px !important;
  }

  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  a.button,
  input[type="submit"] {
    min-height: 44px;
  }

  /* Formulários e filtros deixam de ficar espremidos. */
  .form-grid,
  .form-row,
  .filters,
  .filter-grid,
  .fin-filters,
  .fin-filter,
  .reemb-filter,
  .obra-filter,
  .fin-structure-grid,
  .approval-rules-preview,
  .reconciliation-grid,
  .obra-detail-grid,
  .cashflow-grid {
    grid-template-columns: 1fr !important;
  }

  .fin-filters > *,
  .filters > *,
  .filter-grid > * {
    min-width: 0 !important;
    width: 100%;
  }

  .actions,
  .form-actions,
  .page-actions,
  .header-actions,
  .fin-header-actions-wrap,
  .fin-hero-buttons,
  .fin-section-actions,
  .reemb-workflow,
  .fin-approval-actions {
    display: flex !important;
    width: 100%;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .form-actions > *,
  .page-actions > *,
  .fin-header-actions-wrap > *,
  .fin-hero-buttons > * {
    flex: 1 1 150px;
    justify-content: center;
  }

  /* Cards/KPIs. Regras conhecidas + fallback de grids usuais. */
  .central-v2-overview,
  .central-v2-modules,
  .central-v2-mini-grid,
  .fin-final-kpis,
  .fin-final-shortcuts,
  .fin-final-grid,
  .fin-kpis,
  .finance-kpis,
  .cashflow-kpis,
  .cashflow-summary-grid,
  .obra-fin-grid,
  .period-summary-grid,
  .dashboard-grid,
  .stats-grid,
  .summary-grid {
    grid-template-columns: 1fr !important;
  }

  /* Central de operações */
  .central-v2 {
    min-height: 100dvh;
  }

  .central-v2-topbar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: calc(10px + env(safe-area-inset-top)) var(--mobile-safe-right) 10px var(--mobile-safe-x) !important;
  }

  .central-v2-brand {
    min-width: 0;
  }

  .central-v2-brand img {
    width: 42px !important;
    height: 42px !important;
  }

  .central-v2-brand div {
    min-width: 0;
  }

  .central-v2-brand strong {
    font-size: 14px !important;
  }

  .central-v2-brand span {
    display: none !important;
  }

  .central-v2-live {
    grid-column: 1 / -1;
    width: 100%;
    order: 3;
  }

  .central-v2-actions {
    display: flex !important;
    gap: 6px !important;
  }

  .central-v2-install {
    display: none !important;
  }

  .central-v2-exit {
    min-height: 40px;
    padding: 0 12px !important;
  }

  .central-v2-shell {
    display: block !important;
    padding: 12px var(--mobile-safe-right) calc(20px + env(safe-area-inset-bottom)) var(--mobile-safe-x) !important;
  }

  .central-v2-hero,
  .central-v2-main {
    width: 100% !important;
    max-width: none !important;
  }

  .central-v2-hero {
    padding: 18px !important;
    margin-bottom: 14px;
  }

  .central-v2-logo-card {
    max-width: 150px;
  }

  .central-v2-hero h1 {
    font-size: clamp(24px, 8vw, 34px) !important;
  }

  .central-v2-module,
  .interactive-card,
  .central-v2-director-entry {
    min-height: 0 !important;
    padding: 17px !important;
  }

  .central-v2-module h2 {
    font-size: 19px !important;
  }

  /* Cards e cabeçalhos financeiros */
  .fin-company-header,
  .fin-final-header,
  .fin-page-header,
  .cashflow-hero {
    padding: 18px 14px 18px 72px !important;
    border-radius: 0 0 22px 22px !important;
  }

  .fin-company-header.premium,
  .fin-company-header.premium.inner,
  .fin-final-header,
  .fin-page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .fin-hero-panel {
    min-width: 0 !important;
    width: 100%;
  }

  .fin-header-chips {
    gap: 6px !important;
  }

  .fin-header-chips span {
    padding: 6px 9px !important;
    font-size: 10px !important;
  }

  .fin-final-kpis article,
  .fin-final-panel,
  .fin-form-card,
  .fin-table-card,
  .obra-fin-card,
  .cashflow-summary-grid article {
    padding: 15px !important;
    border-radius: 16px !important;
  }

  .fin-final-shortcuts > a {
    padding: 14px !important;
  }

  /* Gráficos feitos em CSS ganham scroll quando necessário. */
  .chart-bars,
  .obra-bars,
  .fin-final-chart,
  .cashflow-chart {
    max-width: 100%;
  }

  .chart-bars,
  .obra-bars {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabelas mobile em cartões quando JS marcar a tabela como elegível. */
  table.mobile-card-table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
  }

  table.mobile-card-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  table.mobile-card-table tbody,
  table.mobile-card-table tr,
  table.mobile-card-table td {
    display: block !important;
    width: 100% !important;
  }

  table.mobile-card-table tr {
    border: 1px solid #dbe5f1 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .045);
    overflow: hidden;
    margin-bottom: 10px !important;
  }

  table.mobile-card-table td {
    display: grid !important;
    grid-template-columns: minmax(104px, 38%) 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    text-align: left !important;
    min-height: 40px;
  }

  table.mobile-card-table td:last-child {
    border-bottom: 0 !important;
  }

  table.mobile-card-table td::before {
    content: attr(data-mobile-label);
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .035em;
  }

  table.mobile-card-table td[colspan] {
    display: block !important;
    text-align: center !important;
  }

  table.mobile-card-table td[colspan]::before {
    display: none;
  }

  table.mobile-card-table td .fin-actions,
  table.mobile-card-table td.fin-actions,
  table.mobile-card-table td .actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  table.mobile-card-table td form {
    max-width: 100%;
  }

  /* Tabelas grandes/complexas ficam com rolagem agradável em vez de cortar. */
  table.mobile-scroll-table {
    min-width: 720px;
  }

  /* Modais/dialogs */
  .modal,
  .modal-card,
  .dialog,
  dialog,
  [role="dialog"] {
    max-width: calc(100vw - 20px) !important;
  }

  .modal-content,
  .modal-card,
  dialog > div,
  [role="dialog"] > div {
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Rodapés/ações não espremem. */
  .fin-final-footer,
  .page-footer {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-bottom: var(--mobile-safe-bottom) !important;
  }
}

@media (max-width: 480px) {
  :root {
    --mobile-safe-x: max(10px, env(safe-area-inset-left));
    --mobile-safe-right: max(10px, env(safe-area-inset-right));
  }

  .mobile-menu-toggle,
  .finance-menu-toggle {
    width: 42px !important;
    height: 42px !important;
    top: max(9px, env(safe-area-inset-top)) !important;
  }

  .module-topbar {
    padding-left: calc(62px + env(safe-area-inset-left)) !important;
    padding-right: 10px !important;
  }

  .module-topbar-brand img {
    display: none !important;
  }

  .module-topbar-brand span {
    display: none !important;
  }

  .central-v2-topbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .central-v2-brand img {
    width: 38px !important;
    height: 38px !important;
  }

  .central-v2-live > span {
    display: none !important;
  }

  .central-v2-shell {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .central-v2-hero,
  .central-v2-module,
  .interactive-card,
  .central-v2-director-entry,
  .fin-final-kpis article,
  .fin-final-panel,
  .fin-form-card,
  .fin-table-card,
  .obra-fin-card {
    border-radius: 14px !important;
  }

  .fin-company-header,
  .fin-final-header,
  .fin-page-header,
  .cashflow-hero {
    padding: 16px 10px 16px 62px !important;
  }

  .page-nav-bar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  table.mobile-card-table td {
    grid-template-columns: 92px 1fr !important;
    padding: 9px 10px !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .form-actions > *,
  .page-actions > * {
    font-size: 13px;
  }
}

/* Respeita usuários que preferem menos animação. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ============================================================
   Refinamento mobile 2026-08-07 v2
   Baseado em revisão visual do fluxo completo em viewport móvel.
   Mantém regras de negócio e desktop inalterados.
   ============================================================ */

@media (max-width: 900px) {
  /* O conteúdo começa exatamente no topo útil; o próprio topbar reserva
     espaço para o acionador do menu. Evita a sensação de cabeçalho cortado. */
  .point-layout .content,
  .rh-layout .content,
  .point-content,
  .rh-content {
    padding: 0 12px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .point-layout .module-topbar,
  .rh-layout .module-topbar {
    margin: 0 -12px 14px !important;
    width: calc(100% + 24px) !important;
    border-radius: 0 0 18px 18px !important;
    overflow: visible !important;
  }

  /* Botão de navegação mais evidente: deixa de parecer um bloco preto. */
  .point-layout > .mobile-menu-toggle,
  .rh-layout > .mobile-menu-toggle {
    border: 1px solid rgba(255,255,255,.28) !important;
    color: #fff !important;
    background: #1769d2 !important;
    box-shadow: 0 8px 20px rgba(23,105,210,.28) !important;
  }

  .rh-layout > .mobile-menu-toggle {
    background: #087f5b !important;
    box-shadow: 0 8px 20px rgba(8,127,91,.26) !important;
  }

  .point-layout > .mobile-menu-toggle span,
  .rh-layout > .mobile-menu-toggle span {
    display: block !important;
    margin: 0 !important;
    background: #fff !important;
    opacity: 1;
  }

  /* Ao abrir, vira um X claro e discreto sobre o drawer. */
  .point-layout.mobile-nav-open > .mobile-menu-toggle,
  .rh-layout.mobile-nav-open > .mobile-menu-toggle {
    background: #fff !important;
    border-color: #dbe5f1 !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.18) !important;
  }

  .point-layout.mobile-nav-open > .mobile-menu-toggle span,
  .rh-layout.mobile-nav-open > .mobile-menu-toggle span {
    background: #0f2747 !important;
  }

  /* O drawer inicia abaixo da safe area e não corta marca/primeiro item. */
  .point-layout .sidebar,
  .rh-layout .sidebar {
    padding-top: max(14px, env(safe-area-inset-top)) !important;
  }

  /* Cabeçalhos: uma linha limpa no topo e ações abaixo quando necessário. */
  .module-topbar {
    padding-top: max(11px, env(safe-area-inset-top)) !important;
    padding-bottom: 12px !important;
  }

  .module-topbar-brand {
    min-height: 46px;
    align-items: center !important;
  }

  .module-topbar-actions {
    max-width: 100%;
    padding-top: 2px;
  }

  /* Financeiro: a folha financeiro-nav.css também possui regras mobile.
     Esta camada é carregada por último e consolida o comportamento. */
  .finance-menu-toggle {
    display: grid !important;
    place-items: center !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    left: var(--mobile-safe-x) !important;
    color: #fff !important;
    background: #1769d2 !important;
    border: 1px solid rgba(255,255,255,.25) !important;
  }

  .finance-menu-toggle svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
  }

  body.finance-nav-open .finance-menu-toggle {
    background: #fff !important;
    color: #0f2747 !important;
    border-color: #dbe5f1 !important;
  }

  .finance-main,
  .finance-shell .fin-final-main {
    padding-top: 0 !important;
  }

  .fin-company-header,
  .fin-final-header,
  .fin-page-header,
  .cashflow-hero {
    margin-top: 0 !important;
  }

  /* Evita que títulos, badges e ações 'encostem' ou escapem pela direita. */
  .module-topbar *,
  .fin-company-header *,
  .fin-final-header *,
  .fin-page-header *,
  .cashflow-hero * {
    min-width: 0;
  }

  .module-topbar h1,
  .module-topbar h2,
  .fin-company-header h1,
  .fin-final-header h1,
  .fin-page-header h1,
  .cashflow-hero h1 {
    overflow-wrap: anywhere;
  }

  /* Se uma tela usa âncora/foco, não deixa o topo parar sob o botão. */
  [id] {
    scroll-margin-top: 74px;
  }
}

@media (max-width: 768px) {
  /* Ritmo visual mais próximo de app: menos margens mortas, mais conteúdo. */
  .point-layout .content,
  .rh-layout .content,
  .point-content,
  .rh-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .point-layout .module-topbar,
  .rh-layout .module-topbar {
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: calc(100% + 20px) !important;
  }

  /* Cards de ações e listas passam a respirar melhor em toque. */
  .card,
  .panel,
  .interactive-card,
  .central-v2-module,
  .fin-final-panel,
  .fin-table-card,
  .fin-form-card {
    max-width: 100%;
  }

  .module-topbar-actions > a,
  .module-topbar-actions > button,
  .page-actions > a,
  .page-actions > button,
  .form-actions > button,
  .form-actions > a {
    min-height: 44px !important;
  }
}

@media (max-width: 480px) {
  .point-layout .content,
  .rh-layout .content,
  .point-content,
  .rh-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .point-layout .module-topbar,
  .rh-layout .module-topbar {
    margin-left: -8px !important;
    margin-right: -8px !important;
    width: calc(100% + 16px) !important;
    border-radius: 0 0 16px 16px !important;
  }

  .point-layout > .mobile-menu-toggle,
  .rh-layout > .mobile-menu-toggle,
  .finance-menu-toggle {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  /* Em telefone estreito, os cabeçalhos não desperdiçam altura. */
  .module-topbar {
    min-height: 64px !important;
  }

  .module-topbar-brand strong {
    font-size: 14px !important;
  }

  .module-topbar-actions > a,
  .module-topbar-actions > button {
    min-height: 40px !important;
    padding-inline: 10px !important;
  }

  table.mobile-card-table td {
    grid-template-columns: minmax(86px, 34%) 1fr !important;
    gap: 8px !important;
  }
}


/* ============================================================
   Polimento mobile 2026-08-07 v3
   Foco: usabilidade de toque, teclado virtual, ações de formulário,
   estados vazios e consistência visual. Desktop permanece inalterado.
   ============================================================ */

@media (max-width: 900px) {
  :root {
    --mobile-action-bg: rgba(255,255,255,.94);
    --mobile-action-border: #dbe5f1;
    --mobile-focus: #2563eb;
  }

  /* Melhor resposta ao toque sem introduzir atraso/zoom acidental. */
  a,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  summary,
  select,
  .interactive-card,
  .central-v2-module,
  .finance-nav-link {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(37, 99, 235, .10);
  }

  button,
  a,
  summary {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Foco claro para teclado/acessibilidade, sem poluir cliques comuns. */
  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mobile-focus) 32%, transparent) !important;
    outline-offset: 2px !important;
  }

  /* Campos ficam mais confortáveis e previsíveis no celular. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    border-radius: 10px;
  }

  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    min-width: 0 !important;
    width: 100%;
  }

  textarea {
    min-height: 104px;
    resize: vertical;
  }

  /* Estados vazios: mesma linguagem visual entre RH/Ponto/Financeiro. */
  .empty,
  .soft-empty,
  .empty-state {
    border: 1px dashed #cbd5e1 !important;
    background: #f8fafc !important;
    color: #64748b !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;
    text-align: center !important;
    line-height: 1.45;
  }

  /* Ações críticas dos formulários ficam acessíveis ao rolar páginas longas.
     O JS só aplica .mobile-sticky-actions a grupos ligados a um formulário. */
  .mobile-sticky-actions {
    position: sticky !important;
    z-index: 80;
    bottom: 0;
    margin: 14px -8px -8px !important;
    padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    background: var(--mobile-action-bg) !important;
    border-top: 1px solid var(--mobile-action-border) !important;
    box-shadow: 0 -10px 30px rgba(15,23,42,.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mobile-sticky-actions > :is(button, a, .btn, .btn-primary, .btn-secondary, .btn-ghost) {
    min-height: 46px !important;
  }

  /* Ações dentro de cartões de tabela ganham largura útil. */
  table.mobile-card-table td.fin-actions,
  table.mobile-card-table td:has(.fin-actions),
  table.mobile-card-table td:has(.actions) {
    grid-template-columns: 1fr !important;
  }

  table.mobile-card-table td.fin-actions::before,
  table.mobile-card-table td:has(.fin-actions)::before,
  table.mobile-card-table td:has(.actions)::before {
    margin-bottom: 2px;
  }

  table.mobile-card-table td.fin-actions > *,
  table.mobile-card-table td .fin-actions > *,
  table.mobile-card-table td .actions > * {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Cabeçalhos muito longos não roubam a primeira dobra. */
  .module-topbar-brand strong,
  .fin-company-header h1,
  .fin-final-header h1,
  .fin-page-header h1,
  .cashflow-hero h1 {
    text-wrap: balance;
  }

  .fin-company-header p,
  .fin-final-header p,
  .fin-page-header p,
  .cashflow-hero p {
    max-width: 68ch;
    line-height: 1.45;
  }

  /* Conteúdo com hash/validação não fica escondido atrás do topo. */
  input, select, textarea, button, [tabindex] {
    scroll-margin-top: 82px;
    scroll-margin-bottom: 110px;
  }

  /* Quando o teclado virtual abre, liberar espaço e esconder elementos fixos. */
  body.mobile-keyboard-open .mobile-menu-toggle,
  body.mobile-keyboard-open .finance-menu-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.92) !important;
  }

  body.mobile-keyboard-open .mobile-sticky-actions {
    position: static !important;
    box-shadow: none !important;
    border-top: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
  }
}

@media (max-width: 768px) {
  /* Mais legibilidade para títulos sem aumentar demais a altura. */
  .fin-company-header h1,
  .fin-final-header h1,
  .fin-page-header h1,
  .cashflow-hero h1,
  .page-title,
  .section-title h1 {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.12 !important;
  }

  /* Botões de ação passam a ocupar bem a largura em telefone. */
  .mobile-sticky-actions > :is(button, a, .btn, .btn-primary, .btn-secondary, .btn-ghost) {
    flex: 1 1 132px !important;
    justify-content: center !important;
    text-align: center;
  }

  /* Filtros com um botão ficam mais fáceis de operar com uma mão. */
  .fin-filters > button,
  .filters > button,
  .filter-grid > button,
  .reemb-filter > button {
    width: 100%;
  }

  /* Detalhes/accordions: área de toque maior. */
  details > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}

@media (max-width: 480px) {
  .mobile-sticky-actions {
    margin-left: -4px !important;
    margin-right: -4px !important;
  }

  table.mobile-card-table td {
    grid-template-columns: minmax(84px, 34%) 1fr !important;
  }

  /* Links/botões curtos não ficam minúsculos em listas densas. */
  .fin-actions a,
  .fin-actions button,
  .mini-btn,
  .link-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 900px) {
  .mobile-touch-active {
    transform: scale(.985);
    opacity: .88;
  }
}