/* Celular e telas estreitas (versão web). O app para Windows abre com no mínimo 1100px de largura,
   então nada daqui vale para ele. Carregado depois de styles.css. */

.menu-btn { display: none; }

/* tablet e celular: o menu lateral vira gaveta */
@media (max-width: 1024px) {
  /* ---------- casca: menu lateral vira gaveta ---------- */
  .app { grid-template-columns: 1fr; height: 100vh; height: 100dvh; }
  html.demo .app { height: calc(100dvh - var(--demo-h)); }
  .rail {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(300px, 86vw);
    transform: translateX(-105%); transition: transform .22s ease-out;
    box-shadow: 12px 0 32px rgba(16, 32, 64, .18);
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  html.menu-aberto .rail { transform: none; }
  html.menu-aberto::after { content: ''; position: fixed; inset: 0; z-index: 55; background: rgba(16, 32, 64, .38); }
  #nav button { padding-top: 11px; padding-bottom: 11px; }

  main { padding: 0 24px 48px; }
  .topbar { position: static; flex-wrap: wrap; }
  .grid2 > *, .grid3 > *, .split > *, .hero > *, .in-grid > * { min-width: 0; }
  .topbar > div:first-of-type { flex: 1; min-width: 0; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; margin: -2px 0 0 -6px; padding: 0;
    border: 0; background: transparent; color: var(--ink); border-radius: var(--r-sm);
  }
  .menu-btn svg { width: 24px; height: 24px; }
  .ia-drawer { max-width: 100vw; }
}

/* celular */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }

  main { padding: 0 14px calc(96px + env(safe-area-inset-bottom)); }

  /* ---------- topo: menu, título e ferramentas em duas linhas ---------- */
  .topbar { position: static; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0 12px; align-items: flex-start; }
  .topbar > div:first-of-type { flex: 1; min-width: 0; }
  .topbar h1 { font-size: 22px; line-height: 1.2; margin-top: 7px; }
  .topbar .sub { font-size: 12.5px; }
  .top-tools { width: 100%; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
  .city-pick { order: 1; padding: 0 4px 0 10px; }
  .city-pick select { padding: 4px 2px; }
  .fx { order: 2; flex: 1; min-width: 0; font-size: 12.5px; white-space: normal; line-height: 1.3; }
  .seg { order: 3; width: 100%; display: flex; }
  .seg button { flex: 1; padding: 7px 6px; text-align: center; justify-content: center; font-size: 13px; min-height: 34px; }

  .subnav { top: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav button { flex: none; }

  /* ---------- blocos em uma coluna ---------- */
  .grid2, .grid3, .split, .in-grid, .in-grid-b, .hero, .bg-grid, .mk-hero { grid-template-columns: 1fr !important; }
  .mk-hero > * { min-width: 0; }
  details.panel { overflow-x: hidden; }

  /* lançar gasto do mês: duas colunas, descrição e botão inteiros */
  .lm-form { grid-template-columns: 1fr 1fr !important; }
  .lm-form > :nth-child(2), .lm-form > :last-child { grid-column: 1 / -1; }
  .grid3 .panel:last-child { grid-column: auto; }
  .grid2 > *, .grid3 > *, .split > *, .hero > * { min-width: 0; }

  /* checklist: título em cima, situação e mês embaixo */
  .chk-group { grid-template-columns: 1fr; gap: 8px; }
  .chk-when { display: flex; gap: 8px; align-items: baseline; }
  .chk-items { min-width: 0; }
  .chk-item { grid-template-columns: 28px 1fr 1fr 34px; row-gap: 4px; padding: 6px 8px; }
  .chk-item .chk-box { grid-column: 1; grid-row: 1; }
  .chk-item .chk-title { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
  .chk-item > button:last-child { grid-column: 4; grid-row: 1; }
  .chk-item .chk-st { grid-column: 2; grid-row: 2; }
  .chk-item .chk-q { grid-column: 3; grid-row: 2; }
  .chk-item > span:empty { display: none; }
  .panel { padding: 14px 14px; }
  .panel.side { position: static; }
  .chart-head { flex-wrap: wrap; gap: 4px 10px; }

  /* barras de ferramentas das tabelas (total + filtros) */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar .btn-row { justify-content: flex-start; }
  .inline-sel { display: flex; justify-content: space-between; width: 100%; }
  .inline-sel select, .inline-sel input { flex: 1; max-width: 62%; }

  /* cartões de rendas, despesas e investimentos */
  .cartoes { grid-template-columns: 1fr !important; }
  .cartao { padding: 14px 14px; }
  .cartao header { flex-wrap: wrap; }
  .cartao header:has(> input.cartao-nome) { display: grid; grid-template-columns: auto minmax(0, 1fr) 32px; column-gap: 8px; row-gap: 2px; }
  .cartao header:has(> input.cartao-nome) > :first-child:not(.cartao-nome) { grid-column: 1; grid-row: 1; }
  .cartao header:has(> input.cartao-nome) .cartao-nome { grid-column: 2; grid-row: 1; min-width: 0; }
  .cartao header:has(> input.cartao-nome) .c-del { grid-column: 3; grid-row: 1; }
  .cartao header:has(> input.cartao-nome) .cartao-tipo { grid-column: 2 / -1; grid-row: 2; justify-self: start; }

  /* números do topo: 2 por linha */
  .strip, .strip4, .strip5 { grid-template-columns: 1fr 1fr !important; }
  .kpi { padding: 12px 12px; border-left: 0 !important; border-top: 1px solid var(--line); }
  .kpi:nth-child(-n+2) { border-top: 0; }
  .kpi:nth-child(odd) { border-right: 1px solid var(--line); }
  .kpi .k-val { font-size: 20px; white-space: normal; }

  .hero-text { padding: 20px 18px; }
  .hero-num { font-size: 52px; }
  .hero-num.longo { font-size: 38px; }
  .hero-lead, .hero-foot { max-width: none; }
  .hero-chart { padding: 14px 12px 10px; }
  .cbox { height: 220px; }
  .cbox.tall { height: 250px; }

  /* tabelas: rolam de lado dentro do cartão, a página não */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .w-name { min-width: 150px; }

  /* campos e botões do tamanho do dedo */
  input, select, textarea { font-size: 16px; }
  button { min-height: 38px; }
  .btn-row { flex-wrap: wrap; }

  /* Atlas: tela inteira */
  .ia-drawer { width: 100vw; border-left: 0; }
  .ia-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 12px; }
  .ia-fab span { display: none; }
  html.demo .ia-fab { bottom: calc(14px + var(--demo-h)); }

  /* diálogos e porta de entrada */
  dialog, .modal { max-width: calc(100vw - 20px); }
}