/* ============================================================
   GeoMappa Financeiro — visual "Modelo 3" (aprovado 09/ago/2026)

   Direção escolhida pelo Cledio comparando três protótipos:
     · menu numa coluna lateral escura, não em barra superior
     · painel com UM número grande mandando, o resto de apoio
     · lista com a descrição no alto ocupando a linha inteira e
       categoria/pagador numa segunda linha — data e valor ficam
       ancorados no topo, em coluna, para os valores alinharem
     · faixa de dia com subtotal separando os lançamentos
     · lançar despesa em gaveta lateral; comprovante em janela
       centralizada escura com Baixar / Baixar e fechar

   Lembrete: o CDN da Hostinger segura css/img por 7 dias —
   mudou este arquivo, incremente VERSAO_ASSETS no lib/layout.php.
   ============================================================ */

:root {
  --lar: #E86A00;          /* laranja da marca */
  --lar-esc: #C25400;
  --lar-fraco: #FDF1E6;
  --tinta: #17150F;        /* preto levemente quente, casa com o laranja */
  --tinta-2: #6B6862;
  --tinta-3: #948F87;
  --linha: #E6E3DE;
  --claro: #FAF9F7;
  --bom: #0F7B3D;
  --ruim: #C0392B;
  --ruim-fraco: #FDECEA;
  --bom-fraco: #EAF5EE;

  /* Cores de gráfico — validadas para daltonismo e contraste.
     Ordem fixa: nunca reordenar nem gerar tons novos. */
  --s1: #E86A00; --s2: #2a78d6; --s3: #1baf7a;
  --s4: #4a3aa7; --s5: #e87ba4; --s6: #eda100;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta);
  background: #FFF;
}

a { color: var(--lar-esc); }

/* ============================================================
   Esqueleto: menu lateral + área de trabalho
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: 208px 1fr;
  min-height: 100vh;
}

.lado {
  background: var(--tinta);
  color: #C9C4BA;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* "GeoMappa" é uma palavra só — nada de gap entre as duas partes */
.lado-marca {
  display: flex;
  align-items: baseline;
  padding: 0 8px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: #FFF;
  text-decoration: none;
}
.lado-marca span { color: var(--lar); }

.lado-grupo { display: flex; flex-direction: column; gap: 2px; }

.lado-rot {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6E685E;
  padding: 0 8px;
  margin-bottom: 6px;
}

.lado a.item-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 6px;
  color: #C9C4BA;
  text-decoration: none;
  font-size: 13.5px;
  transition: background .14s, color .14s;
}
.lado a.item-menu:hover { background: #23201A; color: #FFF; }
.lado a.item-menu.on { background: var(--lar); color: #FFF; font-weight: 600; }
.lado a.item-menu svg { width: 16px; height: 16px; flex: none; }

.lado-pe {
  margin-top: auto;
  border-top: 1px solid #2A261F;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
}
.lado-pe .av {
  width: 27px; height: 27px; border-radius: 6px;
  background: var(--lar); color: #FFF;
  display: grid; place-items: center;
  font-weight: 700; font-size: 11.5px; flex: none;
}
.lado-pe small { display: block; color: #6E685E; font-size: 10.5px; }
.lado-pe a { color: #6E685E; text-decoration: none; font-size: 11px; }
.lado-pe a:hover { color: #FFF; }

.obra { padding: 22px 24px 48px; background: #FFF; min-width: 0; }

/* ============================================================
   Cabeçalho de página
   ============================================================ */

.obra-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.obra-topo h1 { margin: 0; font-size: 21px; letter-spacing: -0.02em; }
.obra-topo .sub { color: var(--tinta-2); font-size: 13px; margin: 2px 0 0; }

.mudo { color: var(--tinta-2); }
.peq { font-size: 12px; }
.dir { text-align: right; }
.nowrap { white-space: nowrap; }
.forte { font-weight: 650; }
.positivo { color: var(--bom); }
.negativo { color: var(--ruim); }

/* ============================================================
   Botões
   ============================================================ */

.bt {
  border: 0;
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--lar);
  color: #FFF;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .15s, transform .07s;
  line-height: 1.2;
}
.bt:hover { background: var(--lar-esc); color: #FFF; }
.bt:active { transform: translateY(1px); }
.bt:focus-visible { outline: 3px solid rgba(232,106,0,.35); outline-offset: 1px; }

.bt-2 {
  background: #FFF; color: var(--tinta);
  border: 1px solid var(--linha); font-weight: 500;
}
.bt-2:hover { background: var(--claro); border-color: #CFCAC2; color: var(--tinta); }

.bt-3 { background: transparent; color: var(--tinta-2); padding: 6px 9px; font-weight: 500; }
.bt-3:hover { background: var(--claro); color: var(--tinta); }

.bt-perigo { background: #FFF; color: var(--ruim); border: 1px solid #E8C4BE; font-weight: 500; }
.bt-perigo:hover { background: var(--ruim); border-color: var(--ruim); color: #FFF; }

.bt-sm { padding: 6px 10px; font-size: 12.5px; }
.bt-cheio { width: 100%; justify-content: center; }

.acao-linha { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acao-linha form { display: inline; margin: 0; }

/* ============================================================
   Painel: número herói, gráficos
   ============================================================ */

.heroi {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 26px;
  align-items: center;
  margin-bottom: 22px;
}
.heroi-rot {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta-3);
}
.heroi-num {
  font-size: 42px; font-weight: 750; letter-spacing: -0.035em; line-height: 1;
  margin: 6px 0 8px; font-variant-numeric: tabular-nums;
}
.heroi-pe { font-size: 12.5px; color: var(--tinta-2); }

.tag-delta {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 650;
  border-radius: 4px; padding: 2px 7px; font-size: 12px;
}
.tag-delta.sobe { background: var(--ruim-fraco); color: var(--ruim); }
.tag-delta.desce { background: var(--bom-fraco); color: var(--bom); }

.mini-linhas { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.mini-l { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.mini-l span:last-child { font-weight: 650; font-variant-numeric: tabular-nums; }

.cartao {
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 14px 16px;
  background: #FFF;
}
.cartao h2, .cartao h3 { margin: 0 0 1px; font-size: 13.5px; font-weight: 650; }
.cartao .nota { margin: 0 0 10px; font-size: 11.5px; color: var(--tinta-3); }

.leg { display: flex; gap: 14px; font-size: 11.5px; color: var(--tinta-2); margin-bottom: 6px; flex-wrap: wrap; }
.leg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }

.ponto-lbl { font-size: 10px; fill: var(--tinta-2); font-variant-numeric: tabular-nums; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

/* barra horizontal de categoria */
.cat-l { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin-bottom: 11px; }
.cat-l:last-child { margin-bottom: 0; }
.cat-nome { font-size: 12.5px; }
.cat-val { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.trilho { grid-column: 1 / -1; height: 7px; background: #F0EEEB; border-radius: 4px; overflow: hidden; }
.trilho i { display: block; height: 100%; border-radius: 4px; }

/* ============================================================
   Barra de busca e filtros — uma linha só
   ============================================================ */

.barra-topo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.procura {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 170px;
  border: 1px solid var(--linha); border-radius: 6px; padding: 7px 10px; background: var(--claro);
}
.procura input {
  border: 0; background: transparent; outline: none; font-size: 13.5px;
  width: 100%; font-family: inherit; color: var(--tinta);
}
.procura svg { flex: none; }

.seg { display: flex; border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; }
.seg a {
  background: #FFF; padding: 7px 12px; font-size: 12.5px; text-decoration: none;
  color: var(--tinta-2); border-right: 1px solid var(--linha); white-space: nowrap;
}
.seg a:last-child { border-right: 0; }
.seg a.on { background: var(--tinta); color: #FFF; font-weight: 600; }
.seg a:not(.on):hover { background: var(--claro); }

.chip-f {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--linha); background: #FFF; border-radius: 6px;
  padding: 7px 11px; font-size: 12.5px; color: var(--tinta-2); cursor: pointer;
  font-family: inherit; text-decoration: none; transition: all .14s;
}
.chip-f:hover { border-color: var(--lar); color: var(--lar); }
.chip-f.ativa {
  background: var(--lar-fraco); border-color: #F0C79C; color: var(--lar-esc); font-weight: 600;
}
.chip-f .x { font-weight: 700; opacity: .7; }

/* ============================================================
   Lista de lançamentos
   ============================================================ */

.lista-caixa { border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }

.lista-cab, .item {
  display: grid;
  grid-template-columns: 58px 1fr 120px 78px;
  gap: 0 12px;
}
.lista-cab {
  padding: 10px 14px; background: var(--claro); border-bottom: 1px solid var(--linha);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-3); font-weight: 700;
}

.dia-faixa {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: #F7F5F2; padding: 7px 14px; border-bottom: 1px solid var(--linha);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--tinta-2);
}
.dia-faixa .sub { letter-spacing: 0; font-variant-numeric: tabular-nums; }

.item {
  grid-template-areas:
    "data desc valor acoes"
    ".    meta meta  acoes";
  gap: 4px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #F2F0ED;
  transition: background .12s;
}
.item:hover { background: #FDFCFB; }

.i-data {
  grid-area: data; color: var(--tinta-2); font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px;
}
.i-desc { grid-area: desc; font-weight: 600; font-size: 14px; line-height: 1.35; word-break: break-word; }
.i-valor {
  grid-area: valor; text-align: right; font-weight: 700; font-size: 14.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.i-meta { grid-area: meta; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.i-acoes { grid-area: acoes; display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.i-editar { opacity: 0; transition: opacity .12s; }
.item:hover .i-editar, .i-editar:focus-visible { opacity: 1; }

.marca-cat { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-2); }
.marca-cat b { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }

.quem { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tinta-2); }
.quem i {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; color: #FFF; font-style: normal; flex: none;
}

.anexo-bt {
  border: 1px solid var(--linha); background: #FFF; border-radius: 6px;
  width: 30px; height: 28px; display: inline-grid; place-items: center;
  cursor: pointer; transition: all .14s; padding: 0;
}
.anexo-bt:hover { border-color: var(--lar); background: var(--lar-fraco); }
.anexo-bt svg { width: 14px; height: 14px; }
.anexo-bt .n {
  position: absolute; margin: -18px 0 0 20px; background: var(--lar); color: #FFF;
  border-radius: 8px; font-size: 9px; font-weight: 700; padding: 0 4px; line-height: 13px;
}

.sem { color: #CFCAC2; display: inline-grid; place-items: center; width: 30px; height: 28px; }

.rodape-tab {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--tinta); color: #FFF; font-size: 13px; flex-wrap: wrap;
}
.rodape-tab .r { color: #ADA79D; }
.rodape-tab .tot { font-weight: 720; font-size: 17px; font-variant-numeric: tabular-nums; }

.vazio { text-align: center; padding: 44px 20px; color: var(--tinta-2); }
.vazio p { margin: 0 0 16px; }

/* ============================================================
   Tabelas simples (usuários, categorias, histórico)
   ============================================================ */

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--tinta-3); font-weight: 700; padding: 10px 12px;
  background: var(--claro); border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.tabela td { padding: 10px 12px; border-bottom: 1px solid #F2F0ED; vertical-align: middle; }
.tabela tbody tr:hover td { background: #FDFCFB; }
.tabela tfoot td { border-top: 2px solid var(--linha); border-bottom: 0; font-weight: 700; }

/* ============================================================
   Formulários
   ============================================================ */

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp { display: flex; flex-direction: column; gap: 5px; }
.cp.largo { grid-column: 1 / -1; }
.cp label, label.cp-rot { font-size: 12px; font-weight: 650; color: #52504B; }

.cp input, .cp select, .cp textarea,
input[type="text"], input[type="password"], input[type="date"],
input[type="month"], input[type="number"], select, textarea {
  border: 1px solid var(--linha); border-radius: 6px; padding: 9px 11px;
  font-size: 14px; font-family: inherit; background: #FFF; color: var(--tinta);
  outline: none; transition: border-color .14s, box-shadow .14s; width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--lar); box-shadow: 0 0 0 3px rgba(232,106,0,.13);
}
input:disabled, select:disabled { background: var(--claro); color: var(--tinta-3); }

.valor-grande input {
  font-size: 26px; font-weight: 700; padding: 8px 11px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}

.arraste {
  grid-column: 1 / -1; border: 1.5px dashed #DAD6CF; border-radius: 8px; padding: 16px;
  text-align: center; font-size: 13px; color: var(--tinta-2); background: var(--claro);
  cursor: pointer; transition: all .14s; display: block;
}
.arraste:hover { border-color: var(--lar); background: var(--lar-fraco); color: var(--lar-esc); }
.arraste b { display: block; color: var(--tinta); font-size: 13.5px; margin-bottom: 2px; }
.arraste input[type="file"] { display: none; }

.escolhidos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; grid-column: 1 / -1; }
.escolhido {
  display: flex; align-items: center; gap: 7px; background: #FFF;
  border: 1px solid var(--linha); border-radius: 6px; padding: 5px 10px; font-size: 12px;
}
.escolhido .tp {
  background: var(--lar-fraco); color: var(--lar-esc); border-radius: 3px;
  font-size: 9.5px; font-weight: 700; padding: 2px 5px; letter-spacing: .04em;
}

.ajuda { font-size: 11.5px; color: var(--tinta-3); }

/* ============================================================
   Avisos
   ============================================================ */

.flash {
  padding: 11px 14px; border-radius: 7px; margin-bottom: 12px; font-size: 13.5px;
  border: 1px solid transparent;
}
.flash-ok { background: var(--bom-fraco); color: #14532D; border-color: #C8E6C9; }
.flash-erro { background: var(--ruim-fraco); color: #611A15; border-color: #F5C6C0; }
.flash-aviso { background: #FFF8E6; color: #6B5200; border-color: #F0DCA0; }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600;
}
.tag-inativo { background: var(--claro); border: 1px solid var(--linha); color: var(--tinta-3); font-weight: 500; }

/* ============================================================
   Gaveta lateral (lançar despesa / medição)
   ============================================================ */

.gaveta-fundo {
  position: fixed; inset: 0; background: rgba(23,21,15,.5);
  backdrop-filter: blur(2px); display: none; z-index: 90;
}
.gaveta-fundo.aberta { display: block; animation: fade .16s ease-out; }

.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100%);
  background: #FFF; z-index: 95; display: none; flex-direction: column;
  box-shadow: -14px 0 44px rgba(0,0,0,.24);
}
.gaveta.aberta { display: flex; animation: desliza .22s cubic-bezier(.22,.7,.3,1); }

.gaveta-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--linha);
}
.gaveta-topo h2 { margin: 0; font-size: 15.5px; flex: 1; letter-spacing: -0.01em; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 18px; }
.gaveta-pe {
  display: flex; gap: 8px; padding: 13px 18px;
  border-top: 1px solid var(--linha); background: var(--claro);
}
.gaveta-pe .esp { flex: 1; }

.x-bt {
  border: 0; background: transparent; font-size: 20px; color: var(--tinta-3);
  cursor: pointer; padding: 4px 8px; border-radius: 5px; font-family: inherit; line-height: 1;
}
.x-bt:hover { background: #F1EFEB; color: var(--tinta); }

/* ============================================================
   Janela do comprovante
   ============================================================ */

.cortina {
  position: fixed; inset: 0; background: rgba(20,18,16,.58); backdrop-filter: blur(3px);
  display: none; z-index: 95; align-items: center; justify-content: center; padding: 18px;
}
.cortina.aberta { display: flex; animation: fade .16s ease-out; }

.visor {
  background: #16150F; border-radius: 12px; width: 100%; max-width: 900px;
  display: flex; flex-direction: column; max-height: 92vh;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: sobe .18s ease-out;
}
.visor-topo {
  display: flex; align-items: center; gap: 10px; padding: 12px 15px;
  border-bottom: 1px solid #2E2C26; color: #EDEAE4; flex-wrap: wrap;
}
.visor-topo .nome {
  font-size: 13px; font-weight: 600; flex: 1; min-width: 120px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.visor-topo .meta { font-size: 11.5px; color: #96918A; }

.visor-bt {
  border: 1px solid #3A3830; background: #232119; color: #EDEAE4; border-radius: 6px;
  padding: 7px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit;
  font-weight: 550; text-decoration: none; display: inline-flex; align-items: center;
  gap: 6px; transition: all .15s;
}
.visor-bt:hover { background: #2E2C22; border-color: #55524A; color: #FFF; }
.visor-bt.principal { background: var(--lar); border-color: var(--lar); color: #FFF; }
.visor-bt.principal:hover { background: var(--lar-esc); }

.visor-palco {
  flex: 1; display: grid; place-items: center; padding: 16px; overflow: auto;
  background: repeating-conic-gradient(#1C1A14 0% 25%, #1F1D16 0% 50%) 50% / 22px 22px;
  min-height: 260px;
}
.visor-palco img { max-width: 100%; max-height: 68vh; border-radius: 4px; box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.visor-palco iframe { width: 100%; height: 68vh; border: 0; border-radius: 4px; background: #FFF; }
.visor-palco .carregando { color: #96918A; font-size: 13px; }

.visor-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 15px; border-top: 1px solid #2E2C26; color: #96918A; font-size: 12px; flex-wrap: wrap;
}
.abas-anexo { display: flex; gap: 6px; flex-wrap: wrap; }
.aba-a {
  border: 1px solid #3A3830; background: #232119; color: #C9C4BA; border-radius: 5px;
  padding: 4px 9px; font-size: 11.5px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.aba-a:hover { background: #2E2C22; }
.aba-a.on { border-color: var(--lar); background: #3A2410; color: #FFB877; font-weight: 600; }
.aba-a .tp { font-size: 9px; font-weight: 700; letter-spacing: .04em; opacity: .75; }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sobe { from { opacity: 0; transform: translateY(10px) scale(.99) } to { opacity: 1; transform: none } }
@keyframes desliza { from { transform: translateX(100%) } to { transform: none } }

/* ============================================================
   Login (sem menu lateral)
   ============================================================ */

.login-tela {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: var(--claro);
}
.login-caixa {
  width: 100%; max-width: 370px; background: #FFF; border: 1px solid var(--linha);
  border-radius: 12px; padding: 30px 26px; box-shadow: 0 10px 34px rgba(0,0,0,.06);
}
.login-caixa img { height: 62px; display: block; margin: 0 auto 14px; }
.login-caixa h1 { font-size: 18px; margin: 0 0 2px; text-align: center; letter-spacing: -0.01em; }
.login-caixa .sub { font-size: 12.5px; color: var(--tinta-2); text-align: center; margin: 0 0 20px; }
.login-caixa .cp { margin-bottom: 13px; }

.rodape-app {
  text-align: center; color: var(--tinta-3); font-size: 11.5px;
  padding: 18px 16px 0; margin-top: 30px; border-top: 1px solid #F2F0ED;
}

/* ============================================================
   Celular — a informação nunca some, só se reorganiza
   ============================================================ */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lado {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 8px; padding: 9px 12px; overflow-x: auto;
  }
  .lado-grupo { flex-direction: row; }
  .lado-rot, .lado-pe { display: none; }
  .lado a.item-menu { padding: 9px 10px; white-space: nowrap; }
  .obra { padding: 16px 14px 40px; }

  .heroi, .campos, .grade-2 { grid-template-columns: 1fr; }
  .heroi { gap: 16px; }
  .heroi-num { font-size: 36px; }

  /* A data sobe para junto do valor e a descrição fica com a linha
     inteira; categoria e pagador continuam visíveis logo abaixo. */
  .lista-cab { display: none; }
  .item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "data  valor"
      "desc  desc"
      "meta  acoes";
    gap: 5px 10px;
  }
  .i-acoes { align-items: center; }
  .i-editar { opacity: 1; }

  .obra-topo .bt { width: 100%; justify-content: center; }
  .esconde-mob { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}