/* ==========================================================================
   Gestão Financeira — design system base
   Tema controlado via [data-tema="claro"|"escuro"] no <html>.
   ========================================================================== */

/* Cores de texto do tema claro ajustadas para contraste minimo de 4,5:1 (WCAG AA) sobre branco e sobre o fundo cinza */
:root[data-tema="claro"] {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #16181d;
  --muted: #5b6370;
  --border: #e5e7eb;
  --nav-bg: #0b0d12;
  --nav-text: #e8eaed;
  --nav-text-muted: #9aa0aa;
  --primary: #111827;
  --primary-text: #ffffff;
  --green: #15803d;
  --green-bg: #e7f7ee;
  --red: #c81e1e;
  --red-bg: #fdecec;
  --on-accent: #ffffff;
  --blue: #2563eb;
  --pendente: #b45309;
  color-scheme: light;
  /* Sombra em 2 camadas (contato + ambiente) - da mais "elevacao"/profundidade
     aos .card do que uma sombra unica e apertada, sem ficar pesada. */
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px rgba(16, 24, 40, .07);
}

:root[data-tema="escuro"] {
  --bg: #0e1015;
  --card: #171a21;
  --text: #e7e9ee;
  --muted: #9aa0aa;
  --border: #2a2e37;
  --nav-bg: #000000;
  --nav-text: #e7e9ee;
  --nav-text-muted: #8b909b;
  --primary: #e7e9ee;
  --primary-text: #14161b;
  --green: #34d399;
  --green-bg: #113127;
  --red: #f87171;
  --red-bg: #3a1618;
  --on-accent: #052e1f;
  --blue: #60a5fa;
  --pendente: #fbbf24;
  color-scheme: dark;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  overflow-x: hidden;
  width: 100%;
}

a { color: inherit; }

h1, h2, h3 { margin: 0 0 .25em; }

.muted { color: var(--muted); }

/* Navbar ------------------------------------------------------------- */

.navbar {
  background: var(--nav-bg);
  color: var(--nav-text);
}

.navbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
}

.navbar__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
  color: var(--nav-text);
  white-space: nowrap;
}

.navbar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1;
  justify-content: flex-start;
  margin-left: 20px;
}

.navbar__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px;
  text-decoration: none;
  color: var(--nav-text-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.navbar__link:hover { color: var(--nav-text); }

.navbar__link.is-active {
  color: var(--nav-text);
  font-weight: 700;
  border-bottom-color: #fff;
}

.navbar__icon { font-size: 20px; }

.navbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.navbar__user-nome { font-size: 13.5px; color: var(--nav-text-muted); }

/* Layout --------------------------------------------------------------- */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.page-header { margin-bottom: 20px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px;
  max-width: 100%;
  overflow: hidden;
}

/* Botões ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary { background: var(--primary); color: var(--primary-text); }
.btn-primary:hover { opacity: .9; }

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover { background: var(--bg); }

.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* Formulários -------------------------------------------------------- */

.form-group { margin-bottom: 16px; }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }

label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }

.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.input:disabled { opacity: .6; cursor: not-allowed; }

.form-help { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Campo de valor em destaque (topo do modal de lançamento) --------------- */
.form-group--valor .input { font-size: 26px; font-weight: 700; padding: 12px 14px; }

/* Alertas -------------------------------------------------------------- */

.alert {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13.5px;
}

.alert-sucesso { background: var(--green-bg); color: var(--green); }
.alert-erro { background: var(--red-bg); color: var(--red); }
.alert-aviso { background: var(--bg); color: var(--muted); border: 1px solid var(--border); margin-top: 12px; }

/* Badges / pills ------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.badge-neutro { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* Autenticação ----------------------------------------------------------- */

.auth-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.auth-wrapper { width: 100%; max-width: 400px; padding: 20px; }
.auth-card { text-align: left; }
.auth-title { font-size: 20px; }
.auth-footer { margin-top: 16px; font-size: 13.5px; text-align: center; }

/* Configurações ---------------------------------------------------------- */

.settings-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-menu { padding: 8px; height: fit-content; }

.settings-menu__item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
}

.settings-menu__item:hover { background: var(--bg); color: var(--text); }

.settings-menu__item.is-active {
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
}

.settings-menu__item--futuro { opacity: .45; cursor: not-allowed; }
.settings-menu__item--futuro:hover { background: none; color: var(--muted); }

.tema-opcoes { display: flex; gap: 12px; }

.tema-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.tema-opcao__amostra {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-block;
}

.tema-opcao--claro .tema-opcao__amostra { background: #ffffff; }
.tema-opcao--escuro .tema-opcao__amostra { background: #14161b; }

/* Cabeçalho de página com ação ------------------------------------------- */

.page-header--acoes {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Abas (tabs) ------------------------------------------------------------ */

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }

/* .tabs__item e usado tanto em links (<a>, navegacao real entre paginas/
   abas via URL) quanto em botoes (<button>, abas 100% client-side, ex.: o
   card lateral do Painel) - background/font-family/cursor sao redundantes
   num <a> (ja vem assim por padrao) mas necessarios pra um <button> nao
   herdar o "chrome" padrao do navegador e destoar visualmente do resto. */
.tabs__item {
  padding: 8px 14px;
  border-radius: 9px;
  text-decoration: none;
  background: none;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
}

.tabs__item.is-active {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

.contas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}

/* Valores positivos/negativos ------------------------------------------ */

.valor-positivo { color: var(--green); }
.valor-negativo { color: var(--red); }

/* Grid de contas ----------------------------------------------------------- */

.contas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.conta-card { --conta-cor: #2563eb; display: flex; flex-direction: column; gap: 8px; }

.conta-card__topo { display: flex; align-items: center; gap: 8px; }

.conta-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--conta-cor);
  flex-shrink: 0;
}

.conta-card__topo h3 { font-size: 15px; }

.conta-card__saldo-linha { font-size: 13px; }

.conta-card__saldo { font-size: 22px; font-weight: 700; margin-bottom: 4px; }

.conta-card__acoes { display: flex; gap: 8px; margin-top: 6px; }
.conta-card__acoes .btn, .conta-card__acoes form { flex: 1; }
.conta-card__acoes form { display: flex; }

/* Checkbox linha ------------------------------------------------------- */

.checkbox-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  margin: 4px 0 16px;
  cursor: pointer;
}

/* Seletor de cor ------------------------------------------------------- */

.cor-opcoes { display: flex; gap: 8px; flex-wrap: wrap; }

.cor-opcao {
  --cor: #2563eb;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cor);
  display: inline-flex;
  cursor: pointer;
  border: 2px solid transparent;
}

.cor-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.cor-opcao:has(input:checked) { border-color: var(--text); }

/* Toggle switch (on/off) ------------------------------------------------- */
/* Mesmo padrao :has(input:checked) usado em .cor-opcao, so que aplicado a
   um switch deslizante em vez de uma amostra de cor. --toggle-cor define a
   cor do estado "ligado" (default var(--primary), sobrescrita conforme o
   sentido do toggle - ex. vermelho para "nao foi paga"). */

.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 4px 0 16px;
}

.toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__track {
  --toggle-cor: var(--primary);
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background .15s ease;
}

.toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: left .15s ease;
}

.toggle:has(input:checked) .toggle__track { background: var(--toggle-cor); }
.toggle:has(input:checked) .toggle__thumb { left: 19px; }

.toggle--negativo .toggle__track { --toggle-cor: var(--red); }

.toggle__texto { font-size: 13.5px; font-weight: 500; }
.toggle__ajuda { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }

/* Modais ----------------------------------------------------------------- */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-backdrop.is-open { display: flex; }

.modal { width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.modal__header h2 { font-size: 17px; }

.modal__fechar {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
}

.modal__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* Link "voltar" ------------------------------------------------------- */

.link-voltar {
  text-decoration: none;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.link-voltar:hover { color: var(--text); }

/* Tabelas (ex.: extrato de conta) --------------------------------------- */

.tabela-wrapper, .tabela-container {
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }

.tabela th, .tabela td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.tabela th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }

.tabela tbody tr:last-child td { border-bottom: none; }

.tabela__num { text-align: right; font-weight: 600; }

/* Filtros de listagem (categorias) --------------------------------------- */

.categorias-filtros {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.categorias-filtros .input { max-width: 260px; }

.checkbox-linha--inline { margin: 0; white-space: nowrap; }

/* Lista de categorias (accordion) ---------------------------------------- */

.categorias-lista { padding: 8px; }

.categoria-item { border-bottom: 1px solid var(--border); }
.categoria-item:last-of-type { border-bottom: none; }

.categoria-item > summary { list-style: none; cursor: pointer; }
.categoria-item > summary::-webkit-details-marker { display: none; }

.categoria-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
}

.categoria-linha--sub { padding-left: 34px; }
.categoria-linha--sistema { opacity: .75; }

.categoria-linha__principal {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.categoria-linha__principal strong,
.categoria-linha__principal { font-size: 14px; }

.categoria-dot {
  --cor: #2563eb;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cor);
  flex-shrink: 0;
}

.categoria-linha__limite { font-size: 13px; min-width: 110px; text-align: right; }

.categoria-linha__acoes { display: flex; align-items: center; gap: 4px; }
.categoria-linha__acoes form { display: flex; }

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 6px;
  border-radius: 7px;
  line-height: 1;
}
.icon-btn:hover { background: var(--bg); }

.categorias-sistema-titulo {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  padding: 16px 10px 4px;
}

/* Painel Inicial (dashboard) ---------------------------------------------- */

.painel-acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }

.periodo-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 12px 20px;
  margin: 20px 0;
}

.periodo-nav__seta {
  text-decoration: none;
  color: var(--muted);
  font-size: 18px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
}
.periodo-nav__seta:hover { background: var(--bg); color: var(--text); }

.periodo-nav__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  text-align: center;
}

.periodo-nav__hoje {
  text-decoration: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}
.periodo-nav__hoje:hover { background: var(--bg); }

.resumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.resumo-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; }

.resumo-card__label { font-size: 13px; color: var(--muted); font-weight: 600; }
.resumo-card__valor { font-size: 20px; font-weight: 700; }
.resumo-card__sub { font-size: 13px; }

.lancamentos-lista { padding: 4px; }

.lancamento-linha {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.lancamento-linha:last-child { border-bottom: none; }

.lancamento-linha__data { font-size: 13px; min-width: 78px; }

.lancamento-linha__principal { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }

.lancamento-linha__descricao { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lancamento-linha__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Pill colorida: usa a cor da categoria (custom property --cor, declarada
   inline no proprio .lancamento-tag - ver views/dashboard/index.php e
   views/relatorios/index.php) num fundo bem suave (18% de opacidade) com o
   texto na cor cheia por cima - mesma formula ja usada e validada em
   --green/--green-bg e --red/--red-bg (badges de status). A tag "conta"
   (sem categoria, classe .muted, sem --cor proprio) cai no fallback
   var(--muted) tanto pra cor quanto pro fundo, entao continua neutra mas
   ganha a mesma forma de pilula. Paleta de cores de categoria (10 tons,
   ver views/categorias/_modal_nova.php) e toda de tons medios/saturados -
   nunca pastel/claro - entao o texto em cor cheia sobre o fundo a 18% se
   mantem legivel nos dois temas. */
.lancamento-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--cor, var(--muted));
  background: color-mix(in srgb, var(--cor, var(--muted)) 18%, transparent);
}

.lancamento-linha__valor { font-size: 14.5px; font-weight: 700; min-width: 110px; text-align: right; }

.lancamento-linha__acoes { display: flex; align-items: center; gap: 2px; }
.lancamento-linha__acoes form { display: flex; }

.badge-sucesso { background: var(--green-bg); color: var(--green); }
.badge-pendente { background: var(--red-bg); color: var(--red); }

/* Faixa de meses (janela de 11 meses ao redor do periodo navegado) ------- */

.meses-tira {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px;
  margin-bottom: 20px;
}

.meses-tira__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  min-width: 82px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
}

.meses-tira__item:hover { background: var(--bg); }

.meses-tira__nome {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
}

.meses-tira__valor { font-size: 13px; font-weight: 700; }

.meses-tira__item.is-atual {
  background: var(--primary);
  border-color: var(--primary);
}
.meses-tira__item.is-atual .meses-tira__nome,
.meses-tira__item.is-atual .meses-tira__valor {
  color: var(--primary-text);
}

/* Ordenacao (Data/Valor) - reaproveita o toggle .grafico-toggle, empurrado
   pra ponta direita da linha de filtros via margin-left:auto. */
.painel-ordenacao { margin-left: auto; }

/* Layout de 2 colunas do Painel: lista de lancamentos + card lateral
   compacto com o mini grafico. Mesmo espirito de .settings-layout (menu +
   conteudo), so que aqui a coluna secundaria (o grafico) e que tem largura
   fixa, e a coluna principal (a lista) que cresce. */
.painel-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.painel-layout__principal { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.painel-lateral { display: flex; flex-direction: column; gap: 14px; }

/* .tabs dentro de um .card ja tem o mesmo fundo (var(--card)) do proprio
   card - sem este ajuste a aba ativa (que usa var(--card) como fundo, ver
   regra base de .tabs__item.is-active) ficaria invisivel por cima do
   proprio card. Mesma solucao ja usada em .settings-menu__item.is-active. */
.painel-lateral__tabs .tabs__item.is-active {
  background: var(--bg);
  border-color: var(--border);
}

/* Rodape de paginacao ------------------------------------------------- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  margin-top: 16px;
}

.paginacao__info { font-size: 13px; }

.paginacao__nav { display: flex; gap: 8px; }

@media (max-width: 960px) {
  .painel-layout { grid-template-columns: 1fr; }
}

/* Relatórios --------------------------------------------------------- */

.graficos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.grafico-card__titulo { font-size: 15px; }

.grafico-card__corpo {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.grafico-card__canvas-wrap { width: 190px; height: 190px; flex-shrink: 0; position: relative; margin: 0 auto; }

.grafico-legenda { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 10px; }

.grafico-legenda__item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

.grafico-legenda__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grafico-legenda__valor { font-weight: 700; white-space: nowrap; }

.grafico-legenda__pct { color: var(--muted); font-size: 13px; min-width: 42px; text-align: right; }

.grafico-freq-card__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.grafico-freq-card__canvas-wrap { height: 280px; position: relative; margin-top: 14px; }

.grafico-toggle { display: flex; gap: 4px; }
.grafico-toggle .btn.is-active { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }

/* Demonstrativo Financeiro ------------------------------------------- */

.relatorios-resumo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.relatorios-dre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.relatorios-dre-lista { display: flex; flex-direction: column; margin-top: 12px; }

.relatorios-dre-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.relatorios-dre-linha:last-child { border-bottom: none; }

.relatorios-dre-linha__nome { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }

.relatorios-dre-linha__valor { font-weight: 600; white-space: nowrap; }

.relatorios-dre-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 2px 2px;
  margin-top: 8px;
  border-top: 2px solid var(--border);
  font-weight: 700;
}

/* Demonstrativo Anual (categoria x mes) -----------------------------------
   Tabela real (dentro do .tabela-wrapper/.tabela ja usados no extrato de
   contas, que ja resolve o overflow-x). Subcategorias comecam ocultas
   (atributo hidden) e sao reveladas via JS (data-anual-toggle/data-anual-pai
   em app.js), evitando <details> dentro de <tr>/<td> (invalido em HTML). */

.tabela-anual { min-width: 920px; }

.tabela-anual__secao td {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
}

.tabela-anual__nome { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.tabela-anual__linha--sub .tabela-anual__nome { padding-left: 22px; }

.tabela-anual__linha--expansivel { cursor: pointer; }
.tabela-anual__linha--expansivel:hover { background: var(--bg); }

.tabela-anual__seta { display: inline-block; font-size: 11px; color: var(--muted); transition: transform .15s ease; }
.tabela-anual__linha--expansivel.is-expandido .tabela-anual__seta { transform: rotate(90deg); }

.tabela-anual__subtotal td { font-weight: 700; border-top: 2px solid var(--border); background: var(--bg); }

.tabela-anual__saldo td { font-weight: 700; border-top: 2px solid var(--border); }

/* Placeholder de página futura ------------------------------------------- */

.placeholder-card { text-align: center; padding: 48px 24px; }
.placeholder-emoji { font-size: 40px; margin: 0 0 8px; }

/* Responsivo Mobile Master Rules ----------------------------------------- */
img, svg, canvas { max-width: 100%; height: auto; }

/* Regras para telas Mobile (< 769px) */
@media (max-width: 768px) {
  /* Layout e Container com recuo inferior para o Bottom Nav */
  .container { padding: 14px 12px 96px; }
  .card { padding: 16px; border-radius: 14px; }
  .page-header { margin-bottom: 14px; }
  .page-header--acoes { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .page-header--acoes .btn { width: 100%; justify-content: center; min-height: 44px; }

  /* Botões e Inputs com área de toque mínima confortável (44px) */
  .btn { min-height: 44px; font-size: 14px; }
  .btn-sm { min-height: 38px; }
  .input, select.input { min-height: 44px; font-size: 16px; }

  /* Navbar superior compacta: so icones (igual a referencia) */
  .navbar__inner { flex-wrap: nowrap; padding: 6px 10px; gap: 6px; min-height: 46px; }
  .navbar__brand span { display: none; }
  .navbar__brand { flex-direction: row; flex-shrink: 0; padding: 0 4px; }
  .navbar__links {
    display: flex !important;
    flex-wrap: nowrap;
    flex: 1;
    margin: 0;
    gap: 0;
    justify-content: space-around;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .navbar__links::-webkit-scrollbar { display: none; }
  .navbar__link { padding: 8px 10px; flex-shrink: 0; min-width: 40px; min-height: 40px; justify-content: center; }
  .navbar__label { display: none; }
  .navbar__icon { font-size: 20px; line-height: 1; }
  .navbar__user-nome { display: none; }
  .navbar__user { flex-shrink: 0; }

  /* Controles Superiores do Painel */
  .myfinance-top-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .myfinance-top-controls > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .myfinance-top-controls .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Dashboard: Layout em 1 coluna */
  .painel-layout { grid-template-columns: 1fr; }
  .resumo-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Lançamentos no Mobile (Formato Card) */
  .lancamentos-lista { padding: 0; }
  .lancamento-linha {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    margin-bottom: 10px;
  }
  .lancamento-linha__data { font-size: 13px; color: var(--muted); min-width: auto; }
  .lancamento-linha__principal { width: 100%; min-width: 0; }
  .lancamento-linha__descricao { font-size: 15px; justify-content: space-between; width: 100%; }
  .lancamento-linha__valor { font-size: 16px; width: 100%; text-align: left; min-width: auto; margin-top: 2px; }
  .lancamento-linha__acoes {
    width: 100%;
    justify-content: flex-end;
    border-top: 1px dashed var(--border);
    padding-top: 8px;
    margin-top: 4px;
  }
  .lancamento-linha__acoes .icon-btn { padding: 8px 12px; min-height: 40px; font-size: 16px; }

  /* Paginação Mobile Touch */
  .paginacao { flex-direction: column; align-items: center; gap: 10px; }
  .paginacao__nav { width: 100%; justify-content: center; }
  .paginacao__nav .btn { flex: 1; min-height: 44px; }

  /* Modais estilo Bottom Sheet */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 20px 16px 28px;
    animation: gfSlideUp 0.22s ease-out;
  }
  @keyframes gfSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .modal__header h2 { font-size: 18px; }
  .modal__acoes { flex-direction: column-reverse; gap: 8px; }
  .modal__acoes .btn { width: 100%; min-height: 44px; }

  /* Contas Bancárias */
  .contas-grid { grid-template-columns: 1fr; }
  .conta-card__acoes { flex-direction: column; gap: 8px; }
  .conta-card__acoes .btn { width: 100%; min-height: 44px; }

  /* Categorias */
  .categoria-linha { flex-wrap: wrap; gap: 8px; }
  .categoria-linha__limite { width: 100%; text-align: left; min-width: auto; }
  .categoria-linha__acoes { width: 100%; justify-content: flex-end; border-top: 1px dashed var(--border); padding-top: 6px; }

  /* Relatórios & Gráficos */
  .graficos-grid { grid-template-columns: 1fr; }
  .relatorios-resumo-grid { grid-template-columns: 1fr; }
  .relatorios-dre-grid { grid-template-columns: 1fr; }

  /* Tabela de Demonstrativo Financeiro Sticky */
  .tabela-anual { min-width: 750px; }
  .tabela-anual th:first-child,
  .tabela-anual td:first-child {
    position: sticky;
    left: 0;
    background: var(--card);
    z-index: 5;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08);
  }
  .tabela-anual__secao td:first-child,
  .tabela-anual__subtotal td:first-child {
    background: var(--bg);
  }

  /* Tabelas de lancamentos -> cards (sem rolagem horizontal) */
  .tabela-lanc, .tabela-extrato, .tabela-pend { white-space: normal; min-width: 0; }
  .tabela-lanc thead, .tabela-extrato thead, .tabela-pend thead { display: none; }
  .tabela-lanc, .tabela-lanc tbody, .tabela-extrato, .tabela-extrato tbody, .tabela-pend, .tabela-pend tbody { display: block; width: 100%; }
  .tabela-lanc tr, .tabela-extrato tr, .tabela-pend tr {
    display: grid; gap: 4px 10px; align-items: center;
    padding: 12px 14px; margin-bottom: 10px;
    border: 1px solid var(--border); border-left: 4px solid var(--border);
    border-radius: 12px; background: var(--card);
  }
  .tabela-lanc td, .tabela-extrato td, .tabela-pend td { display: block; padding: 0; border: none; min-width: 0; }
  .tabela-lanc td[colspan], .tabela-extrato td[colspan], .tabela-pend td[colspan] { grid-column: 1 / -1; text-align: center; }
  .tabela-container { overflow-x: visible; }

  /* Painel: [descricao | valor] / [categoria conta] / [data status | acoes] */
  .tabela-lanc tr:not(:has(td[colspan])) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "desc valor" "cat cat" "conta conta" "data acoes" "status acoes";
  }
  .tabela-lanc td:nth-child(1) { grid-area: desc; font-size: 14.5px; overflow-wrap: anywhere; }
  .tabela-lanc td:nth-child(2) { grid-area: cat; }
  .tabela-lanc td:nth-child(3) { grid-area: conta; color: var(--muted); font-size: 13px; }
  .tabela-lanc td:nth-child(4) { grid-area: data; color: var(--muted); font-size: 13px; }
  .tabela-lanc td:nth-child(5) { grid-area: valor; text-align: right; font-size: 15px; }
  .tabela-lanc td:nth-child(6) { grid-area: status; }
  .tabela-lanc td:nth-child(7) { grid-area: acoes; justify-self: end; }

  /* Extrato: [descricao | valor] / [data tipo] / [status | acoes] */
  .tabela-extrato tr:not(:has(td[colspan])) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "desc valor" "data data" "status acoes";
  }
  .tabela-extrato td:nth-child(1) { grid-area: data; color: var(--muted); font-size: 13px; }
  .tabela-extrato td:nth-child(2) { grid-area: desc; overflow-wrap: anywhere; }
  .tabela-extrato td:nth-child(3) { display: none; }
  .tabela-extrato td:nth-child(4) { grid-area: valor; text-align: right; }
  .tabela-extrato td:nth-child(5) { grid-area: status; }
  .tabela-extrato td:nth-child(6) { grid-area: acoes; justify-self: end; }

  /* Pendentes: [descricao | valor] / [data | acoes] */
  .tabela-pend tr:not(:has(td[colspan])) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "desc valor" "data acoes";
  }
  .tabela-pend td:nth-child(1) { grid-area: desc; }
  .tabela-pend td:nth-child(1) strong, .tabela-pend td:nth-child(1) div { max-width: none !important; }
  .tabela-pend td:nth-child(2) { grid-area: data; color: var(--muted); }
  .tabela-pend td:nth-child(3) { grid-area: valor; text-align: right; }
  .tabela-pend td:nth-child(4) { grid-area: acoes; justify-self: end; }
  .tabela-pend .btn-sm { min-height: 36px !important; padding: 6px 12px !important; font-size: 13px !important; }

  /* Telas de Autenticação */
  .auth-wrapper { padding: 12px; max-width: 100%; }
  .auth-card { padding: 22px 16px; }
}

/* Mobile Toggle Button & Drawer Menu ------------------------------------ */


.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 2000;
  display: none !important;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.drawer-backdrop.is-open {
  display: block !important;
  opacity: 1;
}

.drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--card);
  color: var(--text);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.drawer-backdrop.is-open .drawer-panel {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.drawer-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 4px;
}

.drawer-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.drawer-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.drawer-links {
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  flex: 1;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease;
}

.drawer-link i {
  font-size: 20px;
  color: var(--muted);
}

.drawer-link:hover, .drawer-link.is-active {
  background: var(--bg);
  font-weight: 700;
}

.drawer-link.is-active i {
  color: var(--green);
}

.drawer-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}


.navbar__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green); color: var(--on-accent); border: none;
  font-weight: 700; font-size: 14px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* KPIs do painel ------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; min-width: 0; }
.kpi-card__label { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi-card__valor { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.kpi-card__sub { font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card { padding: 12px; }
  .kpi-card--full { grid-column: 1 / -1; }
  .kpi-card__valor { font-size: 15px; }
}

@media (max-width: 768px) {
  /* Abas em uma unica linha rolavel */
  .tabs { flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs__item { white-space: nowrap; flex-shrink: 0; }

  /* Cartoes de conta: acoes em grade de 3 colunas (igual a referencia) */
  .conta-card__footer { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; }
  .conta-card__footer .btn, .conta-card__footer form, .conta-card__footer form .btn { width: 100%; }
  .conta-card__footer .btn { justify-content: center; padding-left: 4px; padding-right: 4px; font-size: 13px; }

  .page-header h1 { font-size: 22px; }
  .contas-toolbar { flex-direction: column; align-items: stretch !important; gap: 10px; }
  .contas-resumo-topo { justify-content: space-between; }
}

/* Saldo por conta (Painel e Relatorios) ------------------------------- */
.saldos-contas { padding: 12px 14px; border-radius: 16px; margin-bottom: 16px; }
.saldos-contas__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.saldos-contas__titulo { font-size: 13px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.saldos-contas__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.saldos-contas__item { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.saldos-contas__nome { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saldos-contas__linha { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.saldos-contas__valor { font-size: 15px; font-weight: 800; white-space: nowrap; }
.saldos-contas__olho { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 6px; line-height: 1; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 768px) {
  .saldos-contas__lista { grid-template-columns: 1fr 1fr; }
  .saldos-contas__valor { font-size: 14px; }
  /* Nenhuma tabela (exceto o demonstrativo anual) pode exigir rolagem lateral */
  .tabela:not(.tabela-anual) { white-space: normal; min-width: 0; }
  .tabela:not(.tabela-anual) th, .tabela:not(.tabela-anual) td { padding-left: 6px; padding-right: 6px; }
}

/* Graficos modernos (charts.js) ----------------------------------------- */
.grafico-card { border-radius: 18px; padding: 18px 20px; min-width: 0; }
.grafico-card__titulo { font-size: 14px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.grafico-card__marca { width: 4px; height: 16px; border-radius: 4px; display: inline-block; }
.graficos-grid--duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-top: 20px; }
.grafico-card__corpo--rosca { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 0; }
.grafico-card__corpo--rosca .grafico-card__canvas-wrap { width: 180px; height: 180px; margin: 0 auto; }
.grafico-freq-card__canvas-wrap { height: 260px; position: relative; }
.grafico-vazio { margin: 8px 0 0; font-size: 13px; }

.gf-leg { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.gf-leg__item { display: flex; flex-direction: column; gap: 5px; }
.gf-leg__linha { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.gf-leg__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gf-leg__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.gf-leg__valor { font-weight: 700; white-space: nowrap; color: var(--text); }
.gf-leg__pct { color: var(--muted); font-size: 12.5px; min-width: 40px; text-align: right; }
.gf-leg__barra { height: 4px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.gf-leg__barra > span { display: block; height: 100%; border-radius: 4px; }

@media (max-width: 768px) {
  .graficos-grid--duplo { grid-template-columns: 1fr; gap: 14px; }
  .grafico-card { padding: 16px; }
  .grafico-card__corpo--rosca { flex-direction: column; align-items: stretch; gap: 14px; }
  .gf-leg { max-height: none; min-width: 0; }
  .grafico-freq-card__canvas-wrap { height: 230px; }
}

/* Acoes da linha: Pagar + menu ⋮ ------------------------------------------ */
.acoes-linha { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.acoes-linha form { display: inline-flex; margin: 0; }
.btn-pagar {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: var(--green-bg); color: var(--green); border: 1px solid transparent;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; min-height: 34px;
}
.btn-pagar i { font-size: 16px; }
.btn-pagar:hover { border-color: var(--green); }
.menu-acoes { position: relative; }
.menu-acoes > summary {
  list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 20px;
}
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-acoes > summary:hover, .menu-acoes[open] > summary { background: var(--bg); color: var(--text); }
.menu-acoes__lista {
  position: fixed; z-index: 1500; min-width: 190px; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.menu-acoes__lista form { display: block; }
.menu-acoes__lista button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; color: var(--text); font-size: 14px; font-weight: 500;
  padding: 10px 12px; border-radius: 8px; min-height: 40px;
}
.menu-acoes__lista button:hover { background: var(--bg); }
.menu-acoes__lista button.perigo { color: var(--red); }
.menu-acoes__lista i { font-size: 17px; }

/* Carregando (envio) e toast --------------------------------------------- */
button.is-loading { position: relative; opacity: .65; pointer-events: none; }
button.is-loading::after {
  content: ""; width: 12px; height: 12px; margin-left: 8px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: gfSpin .7s linear infinite;
}
@keyframes gfSpin { to { transform: rotate(360deg); } }
.gf-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 3000;
  max-width: min(92vw, 460px); padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
  background: #16181d; color: #fff; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; transition: all .25s ease;
}
.gf-toast--erro { background: #b91c1c; }
.gf-toast.is-visivel { opacity: 1; transform: translate(-50%, 0); }

/* Botao flutuante "+" (celular) ------------------------------------------- */
.fab { display: none; }
@media (max-width: 768px) {
  .myfinance-action-buttons { display: none !important; }
  .fab { display: block; position: fixed; right: 16px; bottom: 20px; z-index: 1200; }
  .fab__botao {
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; font-size: 26px;
    background: var(--primary); color: var(--primary-text); box-shadow: 0 8px 22px rgba(0,0,0,.28);
    display: flex; align-items: center; justify-content: center; transition: transform .2s ease;
  }
  .fab.is-open .fab__botao { transform: rotate(45deg); }
  .fab__menu { position: absolute; right: 0; bottom: 68px; display: none; flex-direction: column; gap: 10px; align-items: flex-end; }
  .fab.is-open .fab__menu { display: flex; }
  .fab__item {
    display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; color: var(--on-accent);
    padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.25); white-space: nowrap;
  }
  .fab__item--receita { background: var(--green); }
  .fab__item--despesa { background: var(--red); }
  .fab-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1100; display: none; }
  .fab.is-open ~ .fab-fundo, .fab-fundo.is-open { display: block; }
  .gf-toast { bottom: 90px; }

  /* Acoes em card: Pagar visivel + ⋮ */
  .td-acoes .acoes-linha { justify-content: flex-end; }
  .btn-pagar { min-height: 38px; }
}

/* Nome da pagina ativa ao lado dos icones (celular) ------------------------ */
@media (max-width: 768px) {
  .navbar__link.is-active .navbar__label { display: inline; font-size: 13px; margin-left: 6px; }
  .navbar__link.is-active { flex-direction: row; gap: 0; }
}

/* Pendencias do dia (painel) ---------------------------------------------- */
.pendencias { border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; border-left: 4px solid var(--pendente); }
.pendencias__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.pendencias__titulo { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pendencias__lista { display: flex; flex-direction: column; }
.pendencias__item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.pendencias__info { flex: 1; min-width: 0; }
.pendencias__desc { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pendencias__meta { font-size: 13px; color: var(--muted); }
.pendencias__meta .atraso { color: var(--red); font-weight: 700; }
.pendencias__valor { font-weight: 800; font-size: 14px; white-space: nowrap; }
.pendencias form { margin: 0; }

/* Estados vazios e barra de busca ----------------------------------------- */
.vazio { text-align: center; padding: 28px 12px; color: var(--muted); }
.vazio i { font-size: 34px; display: block; margin-bottom: 6px; opacity: .6; }
.vazio strong { display: block; color: var(--text); margin-bottom: 4px; }
.busca-linha { display: flex; gap: 8px; margin-bottom: 12px; }
.busca-linha .input { flex: 1; min-width: 0; }

/* Relatorios: navegador de mes, periodo personalizado e exportar ----------- */
.mes-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin-bottom: 12px; }
.mes-nav__centro { text-align: center; display: flex; flex-direction: column; line-height: 1.25; }
.mes-nav__centro strong { font-size: 15px; }
.mes-nav__centro span { font-size: 12.5px; }
.periodo-custom { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.periodo-custom > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.periodo-custom > summary::-webkit-details-marker { display: none; }
.exportar-link { display: inline-flex; align-items: center; gap: 6px; float: right; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.exportar-link:hover { color: var(--text); }
@media (max-width: 768px) { .exportar-link { float: none; margin-top: 10px; } }

.aviso-exclusao { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--red-bg); color: var(--text); font-size: 13px; line-height: 1.45; }
.aviso-exclusao i { color: var(--red); font-size: 20px; flex-shrink: 0; margin-top: 1px; }

.filtro-ativo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--primary); font-size: 13px; }
.filtro-ativo i { margin-right: 4px; }
.filtro-ativo a { font-weight: 700; color: var(--red); text-decoration: none; }

.badge-alerta { background: #fef3c7; color: #b45309; }
:root[data-tema="escuro"] .badge-alerta { background: #3b2a08; color: #fbbf24; }

.boas-vindas { text-align: left; padding: 24px; }
.boas-vindas h2 { margin: 0 0 6px; font-size: 20px; }
.boas-vindas ol { margin: 14px 0 18px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.boas-vindas li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.boas-vindas li b { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--primary-text); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }

/* Login / cadastro: marca e promessa ------------------------------------ */
.auth-marca { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 18px; }
.auth-marca__logo { width: 52px; height: 52px; border-radius: 16px; background: var(--nav-bg); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; }
.auth-marca__nome { font-size: 20px; letter-spacing: .01em; margin-top: 6px; }
.auth-marca__promessa { font-size: 13.5px; color: var(--muted); max-width: 260px; }
.auth-card h1 { font-size: 22px; }

/* Icones nos titulos e abas (substituem emojis) --------------------------- */
h1 > .ph, .page-header h1 .ph { vertical-align: -0.12em; margin-right: 6px; color: var(--muted); }
.tabs__item .ph { vertical-align: -0.12em; margin-right: 4px; font-size: 1.1em; }
.settings-menu__item .ph, .settings-menu a .ph, .settings-menu button .ph { vertical-align: -0.12em; margin-right: 6px; }
.btn .ph { vertical-align: -0.12em; margin-right: 4px; }

/* Abas de tipo (Todos / Despesas / Receitas) ------------------------------ */
.tipo-tabs a { text-decoration: none; color: var(--muted); padding: 6px 2px; border-bottom: 2px solid transparent; }
.tipo-tabs a.is-active { color: var(--text); border-bottom-color: var(--text); }
@media (max-width: 768px) {
  .tipo-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0 !important; background: var(--bg); border-radius: 12px; padding: 4px; }
  .tipo-tabs a { text-align: center; padding: 9px 4px !important; border-radius: 9px; border-bottom: none !important; }
  .tipo-tabs a.is-active { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12); color: var(--text) !important; }
}

/* Painel no desktop: KPIs a esquerda, rosca a direita ---------------------- */
@media (min-width: 1024px) {
  .painel-resumo:has(.grafico-card) { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: stretch; margin-bottom: 16px; }
  /* Os cartoes da esquerda crescem para ter a mesma altura da rosca da direita (linhas iguais, conteudo centralizado). */
  .painel-resumo:has(.grafico-card) .kpi-grid { grid-template-columns: 1fr 1fr; margin-bottom: 0; align-content: stretch; grid-auto-rows: 1fr; }
  .painel-resumo:has(.grafico-card) .kpi-card { justify-content: center; gap: 6px; padding: 18px 20px; }
  .painel-resumo:has(.grafico-card) .kpi-card__valor { font-size: 20px; }
  .painel-resumo:has(.grafico-card) .kpi-card--full { grid-column: 1 / -1; }
  .painel-resumo:has(.grafico-card) .grafico-card { margin-bottom: 0 !important; }
  .painel-resumo:has(.grafico-card) .grafico-card__corpo--rosca { flex-wrap: nowrap; }
}
@media (min-width: 769px) { .painel-resumo .kpi-card--full { grid-column: auto; } }

.sub-dica { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.sub-dica a { color: var(--text); font-weight: 600; }

/* O botao flutuante some enquanto um formulario (modal) esta aberto */
body:has(.modal-backdrop.is-open) .fab,
body:has(.modal-backdrop.is-open) .fab-fundo { display: none !important; }

/* ---- Assinatura, planos, admin e paginas legais ------------------------ */
.assinatura-atual { margin-bottom: 20px; }
.planos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 16px; }
.plano-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: 16px; }
.plano-card h3 { margin: 0; font-size: 17px; }
.plano-card--atual { border: 2px solid var(--green); }
.plano-card--destaque { border: 2px solid var(--blue); }
.plano-card__selo { position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--green); color: var(--on-accent); }
.plano-card__selo--destaque { background: var(--blue); color: var(--on-accent); }
.plano-card__preco { font-size: 26px; font-weight: 800; }
.plano-card__preco small { font-size: 13px; font-weight: 600; color: var(--muted); }
.plano-card__sub { font-size: 13px; }
.plano-card__lista { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; flex: 1; }
.plano-card__lista li { display: flex; gap: 8px; align-items: flex-start; }
.plano-card__lista i { color: var(--green); margin-top: 3px; flex-shrink: 0; }
.plano-card__acoes { display: flex; flex-direction: column; gap: 8px; }
.faixa-conta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.faixa-conta span { flex: 1; min-width: 180px; }
.legal-doc h3 { margin: 18px 0 4px; font-size: 15px; }
.legal-doc p { margin: 0; line-height: 1.6; font-size: 14px; }
.admin-kpis { margin-bottom: 12px; }
.admin-acoes { min-width: 230px; display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.admin-form { display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.admin-form:last-child { border-bottom: none; padding-bottom: 0; }
.admin-form .input { padding: 6px 8px; font-size: 13px; }

/* ---- Comunidade ---- */
.comunidade-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.comunidade-titulo { font-size: 24px; font-weight: 800; margin: 0; }
.comunidade-subtitulo { margin: 4px 0 0; font-size: 14px; }

.comunidade-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
@media (max-width: 768px) {
  .comunidade-layout { grid-template-columns: 1fr; }
}

.comunidade-filtros-card { padding: 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.comunidade-filtros-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.comunidade-orden-group { display: flex; background: var(--bg); padding: 4px; border-radius: 10px; gap: 4px; border: 1px solid var(--border); }
.comunidade-orden-btn { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; transition: all 0.2s; min-height: 44px; }
.comunidade-orden-btn.is-active, .comunidade-orden-btn:hover { background: var(--card); color: var(--text); box-shadow: var(--shadow); }

.comunidade-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); color: var(--muted); text-decoration: none; transition: all 0.2s; min-height: 44px; }
.comunidade-chip.is-active { background: var(--green-bg); color: var(--green); border-color: var(--green); }

.comunidade-filtros-bottom { display: flex; gap: 10px; }
.comunidade-busca-form { display: flex; gap: 10px; width: 100%; flex-wrap: wrap; }
.comunidade-search-input { position: relative; flex: 1; min-width: 200px; }
.comunidade-search-input i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; }
.comunidade-search-input input { padding-left: 38px; min-height: 44px; }

.comunidade-lista-posts { display: flex; flex-direction: column; gap: 12px; }
.comunidade-card { padding: 16px; display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; border-radius: 14px; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid var(--border); }
.comunidade-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.comunidade-card__main { flex: 1; min-width: 0; }
.comunidade-card__header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.comunidade-card__titulo { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.comunidade-link-detalhe { color: var(--text); text-decoration: none; }
.comunidade-link-detalhe:hover { color: var(--blue); }
.comunidade-card__resumo { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; word-break: break-word; }
.comunidade-card__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.comunidade-card__dot { opacity: 0.5; }

.comunidade-card__voto { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.comunidade-voto-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 48px; height: 56px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-weight: 700; cursor: pointer; transition: all 0.2s; min-height: 44px; }
.comunidade-voto-btn:hover { border-color: var(--green); color: var(--green); }
.comunidade-voto-btn.is-votado { background: var(--green); color: var(--on-accent); border-color: var(--green); }

.comunidade-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.comunidade-badge--novo { background: var(--border); color: var(--text); }
.comunidade-badge--em_analise { background: var(--blue); color: var(--on-accent); }
.comunidade-badge--planejado { background: color-mix(in srgb, var(--blue) 70%, purple); color: var(--on-accent); }
.comunidade-badge--em_andamento { background: var(--pendente); color: #000; }
.comunidade-badge--resolvido { background: var(--green); color: var(--on-accent); }
.comunidade-badge--recusado { background: var(--red); color: var(--on-accent); }
.comunidade-badge--oculto { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); }

.comunidade-categoria-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.comunidad-tag--bug { color: var(--red); border-color: var(--red-bg); background: var(--red-bg); }
.comunidad-tag--sugestao { color: var(--blue); }

.comunidade-selo-equipe { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 800; background: var(--blue); color: var(--on-accent); text-transform: uppercase; }

.comunidade-sidebar-card { padding: 16px; margin-bottom: 16px; border-radius: 14px; }
.comunidade-sidebar-titulo { font-size: 14px; font-weight: 700; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.comunidade-minhas-lista { display: flex; flex-direction: column; gap: 8px; }
.comunidade-minha-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--border); min-height: 44px; }
.comunidade-minha-item:last-child { border-bottom: none; }
.comunidade-minha-titulo { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.comunidade-cat-list { display: flex; flex-direction: column; gap: 6px; }
.comunidade-cat-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 600; background: var(--bg); transition: background 0.2s; min-height: 44px; }
.comunidade-cat-item:hover { background: var(--border); }
.comunidade-cat-item .badge { background: var(--card); padding: 2px 8px; border-radius: 999px; font-size: 12px; color: var(--muted); }

.comunidade-paginacao { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }

/* Modais de Comunidade */
.comunidade-modal-post { max-width: 650px; width: 100%; border-radius: 16px; }
.comunidade-step-categoria { padding: 10px 0; }
.comunidade-cat-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 600px) { .comunidade-cat-options { grid-template-columns: 1fr; } }
.comunidade-cat-card { display: flex; gap: 14px; padding: 16px; border-radius: 12px; border: 2px solid var(--border); background: var(--bg); cursor: pointer; transition: all 0.2s; min-height: 44px; }
.comunidade-cat-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.comunidade-cat-card i { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
.comunidade-cat-card strong { font-size: 14px; display: block; margin-bottom: 4px; color: var(--text); }
.comunidade-cat-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.4; }

.comunidade-upload-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; border: 2px dashed var(--border); border-radius: 12px; background: var(--bg); cursor: pointer; text-align: center; color: var(--muted); transition: border-color 0.2s; min-height: 44px; }
.comunidade-upload-area:hover { border-color: var(--blue); color: var(--text); }

.comunidade-thumbs-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.comunidade-thumb-item { position: relative; width: 70px; height: 70px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.comunidade-thumb-item img { width: 100%; height: 100%; object-fit: cover; }

.comunidade-similares-box { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.comunidade-similares-box ul { margin: 6px 0 0; padding-left: 18px; }
.comunidade-similares-box a { color: var(--blue); font-weight: 600; text-decoration: none; }

.comunidade-modal-detalhe { max-width: 900px; width: 100%; border-radius: 16px; max-height: 90vh; overflow-y: auto; }

/* Detalhes da Postagem */
.comunidade-detalhe-container { padding: 20px; }
.comunidade-detalhe-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; }
@media (max-width: 768px) {
  .comunidade-detalhe-grid { grid-template-columns: 1fr; }
  .comunidade-modal-post, .comunidade-modal-detalhe { width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; margin: 0; position: fixed; bottom: 0; left: 0; }
}

.comunidade-detalhe-badges { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.comunidade-detalhe-titulo { font-size: 22px; font-weight: 800; margin: 0 0 14px; line-height: 1.3; }
.comunidade-detalhe-autor-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.comunidade-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.comunidade-detalhe-descricao { font-size: 14.5px; line-height: 1.6; color: var(--text); margin-bottom: 20px; word-break: break-word; }
.comunidade-detalhe-esperado { background: var(--bg); border-left: 3px solid var(--red); padding: 12px 14px; border-radius: 0 8px 8px 0; margin-bottom: 20px; font-size: 13.5px; }

.comunidade-galeria-secao { margin-bottom: 20px; }
.comunidade-galeria { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.comunidade-galeria__item { width: 100px; height: 100px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); display: block; }
.comunidade-galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.comunidade-galeria__item img:hover { transform: scale(1.05); }

.comunidade-importancia-box { padding: 16px; margin-bottom: 24px; border-radius: 12px; }
.comunidade-importancia-box h4 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.comunidade-importancia-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }

.comunidade-abas-container { margin-top: 20px; }
.comunidade-abas { display: flex; border-bottom: 2px solid var(--border); gap: 16px; margin-bottom: 16px; }
.comunidade-aba-btn { background: none; border: none; padding: 10px 0; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; display: flex; align-items: center; gap: 6px; min-height: 44px; }
.comunidade-aba-btn.is-active { color: var(--text); border-bottom-color: var(--green); }
.comunidade-aba-painel { display: none; }
.comunidade-aba-painel.is-active { display: block; }

.comunidade-form-comentario { margin-bottom: 20px; background: var(--bg); padding: 14px; border-radius: 12px; border: 1px solid var(--border); }
.comunidade-form-comentario__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; gap: 10px; }
.comunidade-file-input-wrapper { display: flex; align-items: center; gap: 8px; }

.comunidade-lista-comentarios { display: flex; flex-direction: column; gap: 14px; }
.comunidade-comentario { padding: 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.comunidade-comentario__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.comunidade-comentario__autor { display: flex; align-items: center; gap: 8px; }
.comunidade-autor-nome { font-size: 13.5px; display: block; }
.comunidade-comentario__data { font-size: 12px; color: var(--muted); display: block; }
.comunidade-comentario__corpo { font-size: 13.5px; line-height: 1.5; color: var(--text); word-break: break-word; }

.comunidade-timeline { display: flex; flex-direction: column; gap: 14px; padding-left: 10px; }
.comunidade-timeline-item { position: relative; padding-left: 20px; border-left: 2px solid var(--border); }
.comunidade-timeline-dot { position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.comunidade-timeline-meta { font-size: 13px; color: var(--muted); }
.comunidade-timeline-text { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; }

.comunidade-sidebar-card { display: flex; flex-direction: column; gap: 8px; }
.comunidade-info-item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.comunidade-info-item:last-child { border-bottom: none; }


/* Comunidade: campos de formulario (mesmo visual do .input) */
.form-control { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; line-height: 1.4; }
.form-control::placeholder { color: var(--muted); }
.form-control:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
textarea.form-control { resize: vertical; min-height: 110px; line-height: 1.5; }
select.form-control { min-height: 44px; }
.form-label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.comunidade-modal-post { padding: 24px; }
.comunidade-modal-post .form-group { margin-bottom: 18px; }

/* Criacao rapida de categoria/subcategoria nos modais de lancamento */
.cat-rapida-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--primary); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.cat-rapida-btn:hover { border-color: var(--primary); }
.cat-rapida-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.cat-rapida-cores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cat-rapida-cor { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.cat-rapida-cor.is-active { box-shadow: 0 0 0 2px var(--text); }
.cat-rapida-picker { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.cat-rapida-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.cat-rapida-erro { display: block; color: var(--red); }
.cat-rapida-erro:empty { display: none; }

/* ---- Chat IA ---- */
.ia-app { display: grid; grid-template-columns: 270px 1fr; gap: 16px; height: calc(100vh - 190px); min-height: 520px; }
.ia-lateral { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow: hidden; }
.ia-novo { width: 100%; justify-content: center; }
.ia-recentes-titulo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 6px 0; }
.ia-lista { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.ia-conversa { display: flex; align-items: center; border-radius: 10px; }
.ia-conversa:hover, .ia-conversa.is-active { background: var(--bg); }
.ia-conversa.is-active { box-shadow: inset 0 0 0 1px var(--border); }
.ia-conversa__abrir { flex: 1; min-width: 0; text-align: left; padding: 10px; border: 0; background: none; color: var(--text); font-size: 13.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-conversa__excluir { border: 0; background: none; color: var(--muted); padding: 8px; cursor: pointer; opacity: 0; min-width: 36px; min-height: 36px; }
.ia-conversa:hover .ia-conversa__excluir, .ia-conversa__excluir:focus-visible { opacity: 1; }
.ia-conversa__excluir:hover { color: var(--red); }
.ia-vazio { padding: 8px; font-size: 13px; }
.ia-chat { display: flex; flex-direction: column; padding: 16px; min-width: 0; }
.ia-mensagens { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 12px; }
.ia-boasvindas { margin: auto; text-align: center; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ia-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.ia-sugestao { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 9px 14px; font-size: 13px; cursor: pointer; min-height: 40px; }
.ia-sugestao:hover { border-color: var(--primary); color: var(--primary); }
.ia-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.ia-msg--user { align-items: flex-end; }
.ia-msg--assistant { align-items: flex-start; }
.ia-bolha { max-width: min(760px, 92%); padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; word-break: break-word; }
.ia-msg--user .ia-bolha { background: var(--primary); color: var(--primary-text); border-bottom-right-radius: 4px; }
.ia-msg--assistant .ia-bolha { background: var(--bg); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.ia-bolha p { margin: 0 0 8px; }
.ia-bolha p:last-child, .ia-bolha ul:last-child, .ia-bolha ol:last-child { margin-bottom: 0; }
.ia-bolha ul, .ia-bolha ol { margin: 0 0 8px; padding-left: 20px; }
.ia-bolha h4 { margin: 4px 0 6px; font-size: 14px; }
.ia-bolha code { background: var(--card); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.ia-tabela { overflow-x: auto; margin: 4px 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.ia-tabela table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ia-tabela th, .ia-tabela td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ia-tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ia-tabela tr:last-child td { border-bottom: 0; }
.ia-pensando { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ia-pontos { display: inline-flex; gap: 3px; }
.ia-pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ia-pulsa 1.1s infinite ease-in-out; }
.ia-pontos i:nth-child(2) { animation-delay: .15s; } .ia-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ia-pulsa { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.ia-cartao { width: min(420px, 92%); border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: 12px; background: var(--card); padding: 12px 14px; }
.ia-cartao.is-receita { border-left-color: var(--green); }
.ia-cartao__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted); }
.ia-cartao__topo strong { font-size: 18px; color: var(--text); }
.ia-cartao__desc { font-weight: 600; margin: 4px 0 8px; }
.ia-cartao__det { margin: 0 0 10px; display: grid; gap: 4px; font-size: 13px; }
.ia-cartao__det div { display: flex; justify-content: space-between; gap: 12px; }
.ia-cartao__det dt { color: var(--muted); } .ia-cartao__det dd { margin: 0; text-align: right; }
.ia-cartao__acoes { display: flex; justify-content: flex-end; gap: 8px; }
.ia-cartao__estado { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ia-cartao__estado.ia-ok { color: var(--green); font-weight: 600; }
.ia-form { border: 1px solid var(--border); border-radius: 16px; background: var(--bg); padding: 10px 12px; }
.ia-form:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.ia-form textarea { width: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; resize: none; outline: none; }
.ia-form__rodape { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.ia-aviso { text-align: center; font-size: 12.5px; margin: 8px 0 0; }
@media (max-width: 800px) {
  .ia-app { grid-template-columns: 1fr; height: auto; }
  .ia-lateral { max-height: 180px; }
  .ia-chat { height: calc(100vh - 340px); min-height: 600px; }
}

/* Admin: acoes em massa */
.massa-col { width: 36px; text-align: center; }
.massa-col input { width: 18px; height: 18px; cursor: pointer; }
.massa-barra { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--primary); border-radius: 12px; background: var(--card); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.massa-barra[hidden] { display: none; }
.massa-barra select { width: auto; min-width: 210px; }
.massa-dias { width: 90px !important; }

/* Chat IA nivel 2: cartao de plano */
.ia-plano { border-left-color: var(--primary); width: min(560px, 94%); }
.ia-plano__lista { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ia-op { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.ia-op.is-falha { border-color: var(--red); }
.ia-plano__n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--primary-text); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.ia-op > i { flex-shrink: 0; font-size: 22px; }
.ia-op__corpo { min-width: 0; flex: 1; font-size: 13px; }
.ia-op__titulo { font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ia-op__det { color: var(--muted); margin-top: 2px; word-break: break-word; }
.ia-op__itens { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ia-op__itens li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ia-plano__campo { color: var(--muted); min-width: 74px; display: inline-block; }
.ia-de { text-decoration: line-through; color: var(--muted); }
.ia-op__escopo { margin-top: 6px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ia-op__erro { margin-top: 4px; color: var(--red); font-size: 13px; }
.ia-falha { color: var(--red); }
.ia-cartao__estado.ia-parcial { color: var(--pendente, #d97706); font-weight: 600; }
.ia-op .ia-ok { color: var(--green); }

/* Seletor de idioma das telas publicas */
.auth-idiomas { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 4px auto 14px; }
.auth-idiomas a { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--muted); text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; }
.auth-idiomas a:hover { border-color: var(--primary); color: var(--text); }
.auth-idiomas a.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: 600; }

/* Admin: consumo da IA */
.tabela th.num, .tabela td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iac-h { font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.iac-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 14px 0 8px; }
.iac-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; flex: 1; min-width: 130px; }
.iac-lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.iac-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 13px; }
.iac-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px; min-width: 36px; min-height: 36px; }
.iac-x:hover { color: var(--red); }
.iac-aviso { font-size: 13px; margin: 12px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.iac-abas { margin: 18px 0 12px; }
.iac-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.iac-barra-col { width: 28%; min-width: 90px; }
.iac-barra { display: block; height: 8px; border-radius: 4px; background: var(--primary); min-width: 2px; }
.iac-zero { opacity: .55; }
.iac-zero .iac-barra { visibility: hidden; }

/* Chat IA: anexos (foto/audio) */
.ia-ferramentas { display: flex; align-items: center; gap: 4px; }
.ia-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 40px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 21px; cursor: pointer; }
.ia-ico:hover { background: var(--card); color: var(--text); }
.ia-ico[hidden] { display: none; }
.ia-ico.is-gravando { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); animation: ia-gravando 1.2s infinite; }
.ia-ico__tempo { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes ia-gravando { 50% { opacity: .55; } }
.ia-anexos { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 8px; }
.ia-anexos[hidden] { display: none; }
.ia-anexo { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; font-size: 13px; }
.ia-anexo img { display: block; width: 64px; height: 64px; object-fit: cover; }
.ia-anexo--audio { padding: 6px 30px 6px 10px; }
.ia-anexo--audio audio { height: 30px; max-width: 190px; }
.ia-anexo button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.ia-miniaturas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ia-miniaturas img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; }
.ia-chip-audio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px; opacity: .9; }
.ia-transcricao { margin: 8px 0 0; font-size: 13px; opacity: .85; display: flex; gap: 6px; align-items: flex-start; }

/* ---- Ajustes de celular (auditoria) ---- */
.tabs--grade { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-header__botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.tabela-dica { display: none; font-size: 13px; margin: 10px 0 0; align-items: center; gap: 6px; }
@media (max-width: 768px) {
  /* As 4 abas dos Informes ficam sempre visiveis, em grade 2x2 */
  .tabs.tabs--grade { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; overflow: visible; }
  .tabs--grade .tabs__item { white-space: normal; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 10px; line-height: 1.2; border: 1px solid var(--border); border-radius: 12px; }
  .tabs--grade .tabs__item.is-active { border-color: var(--primary); }
  .page-header__botoes { width: 100%; }
  .page-header__botoes .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  /* Botoes de icone com area de toque confortavel */
  .icon-btn, .btn-olho-toggle { min-width: 40px; min-height: 40px; }
  .navbar__links.tem-mais { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  /* Demonstrativo anual: nome da categoria fixo enquanto os meses rolam */
  .tabela-dica { display: flex; }
  .tabela-anual th:first-child, .tabela-anual td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
}

.tabela tfoot td { border-top: 1px solid var(--border); padding-top: 10px; padding-bottom: 10px; }
.tabela tfoot .demonstrativo-resultado td { border-top: 2px solid var(--border); font-size: 15px; }

/* ---- PWA & Safe Area Styles ---- */
:root {
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --sar: env(safe-area-inset-right);
}

.navbar {
    padding-top: max(0px, var(--sat));
    padding-left: max(16px, var(--sal));
    padding-right: max(16px, var(--sar));
}

.drawer-panel {
    padding-bottom: max(16px, var(--sab));
}

.pwa-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin-left: 8px;
    transition: all 0.2s ease;
}
.pwa-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green, #10b981);
}
.pwa-status-badge.is-offline {
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--red, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}
.pwa-status-badge.is-offline .pwa-status-dot {
    background: var(--red, #ef4444);
}
.pwa-banner {
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--shadow);
}


/* ---- Uso sem internet: contador e lista de alteracoes aguardando envio ---- */
.pwa-fila-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--card); color: var(--text); border: 1px solid var(--border); min-height: 28px; }
.pwa-fila-btn[hidden] { display: none; }
.pwa-fila-btn.tem-problema { border-color: var(--red); color: var(--red); }
.fila-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.fila-item:last-child { border-bottom: 0; }
.fila-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.fila-item__info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-item--erro .fila-item__info span { color: var(--red); }
.gf-pendente-envio { opacity: .55; }

/* ---- Sem conexao: modulos que precisam de internet ficam esmaecidos ---- */
a.requer-internet-bloqueado { opacity: .45; cursor: not-allowed; }
a.requer-internet-bloqueado::after { content: ''; }

/* ---- Celular: botao de menu a esquerda abre a lista completa de modulos; a faixa de icones some ---- */
.navbar__hamb { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 22px; cursor: pointer; padding: 0; flex-shrink: 0; }
@media (max-width: 768px) {
  .navbar__hamb { display: inline-flex; }
  .navbar__inner > nav.navbar__links { display: none !important; }
  .navbar__inner { justify-content: space-between; }
}
.fila-historico__titulo { font-size: 13px; font-weight: 700; margin: 18px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fila-historico__item { font-size: 13px; padding: 4px 0; color: var(--muted); }

/* ---- Foto de perfil e menu do icone da direita ---- */
.navbar__perfil { position: relative; display: inline-flex; }
.navbar__avatar { overflow: hidden; }
.navbar__avatar img, .menu-perfil__avatar img, .drawer-user-avatar img, .perfil-foto__img img, .foto-previa img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.menu-perfil { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; min-width: 250px; background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.28); padding: 8px; }
.menu-perfil[hidden] { display: none; }
.menu-perfil__topo { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu-perfil__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: var(--on-accent); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.menu-perfil__dados { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.menu-perfil__dados strong, .menu-perfil__dados span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-perfil__dados span { color: var(--muted); font-size: 13px; }
.menu-perfil__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--text); font-size: 14px; cursor: pointer; text-decoration: none; text-align: left; }
.menu-perfil__item:hover, .menu-perfil__item:focus-visible { background: var(--bg-soft, rgba(127,127,127,.12)); }
.drawer-user-avatar { overflow: hidden; }
.perfil-foto { display: flex; align-items: center; gap: 16px; margin: 16px 0 20px; }
.perfil-foto__img { width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: var(--on-accent); font-size: 28px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.foto-previa { width: 160px; height: 160px; border-radius: 50%; margin: 6px auto 0; background: var(--green); color: var(--on-accent); font-size: 64px; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.foto-erro { color: var(--red); font-size: 13px; margin: 0 0 10px; }
.foto-erro[hidden] { display: none; }
@media (max-width: 768px) { .menu-perfil { right: -4px; min-width: 240px; } }

/* ---- Lancamentos feitos sem internet que aguardam envio ---- */
tr.gf-prov-row { background: rgba(245, 158, 11, .08); }
tr.gf-prov-row td { border-bottom: 1px dashed var(--border); }
.gf-prov-etiqueta { font-size: 11px; margin-left: 6px; white-space: nowrap; }

/* ---- Painel do admin ---- */
.admin-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-abas .tabs__item { display: inline-flex; align-items: center; gap: 6px; }
.adm-atualizado { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.adm-secao { margin-top: 16px; padding: 18px; border-radius: 16px; }
.adm-secao__titulo { font-size: 15px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.adm-nota { font-size: 13px; margin: 10px 0 0; }
.adm-tabela td.num, .adm-tabela th.num { text-align: right; white-space: nowrap; }
.adm-tabela td:first-child { white-space: nowrap; }
.adm-tabela td:first-child i { color: var(--muted); margin-right: 6px; }
.adm-delta { display: block; font-size: 11.5px; font-weight: 700; }
.adm-delta--up { color: var(--green); } .adm-delta--down { color: var(--red); } .adm-delta--eq { color: var(--muted); }
.kpi-card--alerta { border-color: var(--orange, #f59e0b); }
.kpi-card__label i { margin-right: 4px; }
.admin-kpis { grid-template-columns: repeat(3, 1fr); }
.adm-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.adm-grafico { padding: 14px 16px; border-radius: 16px; }
.adm-grafico__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.adm-grafico__svg { width: 100%; height: 110px; color: var(--text); display: block; }
.adm-grafico__pico { font-size: 12px; text-align: right; margin-top: 2px; }
.adm-duas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.adm-duas--2 { grid-template-columns: 1fr 1fr; }
.adm-lista { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.adm-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.adm-lista li:last-child { border-bottom: 0; }
.adm-lista__sub { padding-left: 14px !important; color: var(--muted); font-size: 13px; }
.adm-ativos th:first-child, .adm-ativos td:first-child { width: 1%; }
.adm-ativos td { vertical-align: middle; }
@media (max-width: 768px) {
  .adm-ativos .iac-barra-col { display: none; }
  /* Lista de usuarios: busca e lupa na primeira linha; os filtros (vencimento, ordem) embaixo, cada um na largura toda */
  .admin-filtros { flex-wrap: wrap; }
  .admin-filtros input[type="search"] { order: 1; }
  .admin-filtros button { order: 2; }
  .admin-filtros select.input { order: 3; flex: 1 1 100%; max-width: none !important; }
}
.adm-previa__lista { display: grid; gap: 8px; margin-top: 10px; }
.adm-previa__msg { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--green-bg, rgba(16,185,129,.1)); font-size: 14px; font-weight: 600; }
@media (max-width: 900px) { .adm-duas, .adm-duas--2, .adm-graficos { grid-template-columns: 1fr; } .admin-kpis { grid-template-columns: 1fr 1fr; } }

/* ---- Comparativo de planos (Basico / Premium / Pro) ---- */
.planos__topo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.planos__topo h2 { margin: 0; }
.planos__topo p { margin: 0; font-size: 13px; }
.planos__ciclo { display: inline-flex; align-self: flex-start; margin-top: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.planos__ciclo button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: none; color: var(--muted); padding: 8px 16px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.planos__ciclo button small { font-weight: 700; color: var(--green); margin-left: 4px; }
.planos__ciclo button.is-ativo { background: var(--primary); color: var(--primary-text); }
.planos__ciclo button.is-ativo small { color: inherit; opacity: .85; }
.planos__abas { display: none; gap: 6px; margin-bottom: 14px; }
.planos__abas button { flex: 1; font: inherit; font-weight: 600; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; min-height: 44px; }
.planos__abas button.is-ativo { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.planos-grid { grid-template-columns: 1fr; align-items: start; }
.plano-card { gap: 10px; }
.plano-card__cobranca { min-height: 18px; margin-top: -6px; }
.plano-card__grupo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.plano-card__na { text-transform: none; letter-spacing: 0; padding: 2px 9px; border-radius: 999px; background: var(--red-bg); color: var(--red); }
.plano-card__lista { margin: 0; flex: none; }
.plano-card__lista li.is-off { color: var(--muted); }
.plano-card__lista li.is-off i { color: var(--red); }
.plano-card__acoes .btn { width: 100%; justify-content: center; }
.plano-card--pro { background: var(--nav-bg); color: var(--nav-text); border-color: var(--nav-bg); --muted: var(--nav-text-muted); --border: #2a2e37; }
.btn-pro { background: #e7e9ee; color: #14161b; border: 1px solid #e7e9ee; }
.btn-pro:hover { opacity: .9; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) { .planos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 899px) {
  .planos__abas { display: flex; }
  .planos-grid .plano-card { display: none; }
  .planos-grid .plano-card.is-sel { display: flex; }
}

/* ---- Destaques: Premium (mais vendido) e Pro (mais completo, dourado neon) ---- */
.plano-card { overflow: visible; }
.plano-card__faixa { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; z-index: 1; }
.plano-card__faixa--vendido { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, .45); }
.plano-card__faixa--ouro { background: linear-gradient(135deg, #fff1b8, #f5c542 45%, #d99a1e); color: #3a2800; box-shadow: 0 0 16px rgba(245, 197, 66, .65); }
.plano-card__selo--atual { right: 16px; }
.plano-card--atual .plano-card__faixa { top: -14px; }

.plano-card--destaque { border: 2px solid var(--blue); background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 12%, var(--card)), var(--card) 42%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent), 0 14px 38px color-mix(in srgb, var(--blue) 30%, transparent); }
.plano-card--destaque .plano-card__preco { color: var(--blue); }

.plano-card--pro { position: relative; border: 2px solid transparent; background: linear-gradient(var(--nav-bg), var(--nav-bg)) padding-box, linear-gradient(135deg, #fff1b8, #f5c542 30%, #b8801a 60%, #ffe28a) border-box; box-shadow: 0 0 14px rgba(245, 197, 66, .5), 0 0 46px rgba(245, 197, 66, .22); }
.plano-card--pro h3 { color: #f8dd8a; }
.plano-card--pro .plano-card__preco { background: linear-gradient(135deg, #fff1b8, #f5c542 55%, #e0a21e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plano-card--pro .plano-card__preco small { -webkit-text-fill-color: var(--nav-text-muted); }
.plano-card--pro .btn-pro { background: linear-gradient(135deg, #fff1b8, #f5c542 50%, #d99a1e); border-color: #f5c542; color: #2f2000; font-weight: 800; box-shadow: 0 0 16px rgba(245, 197, 66, .45); }
.plano-card--pro .plano-card__lista li:not(.is-off) i { color: #f5c542; }

@media (min-width: 900px) {
  .plano-card--destaque { transform: translateY(-8px); }
  .plano-card--pro { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .plano-card--pro { animation: planoOuro 3.2s ease-in-out infinite; }
  @keyframes planoOuro {
    0%, 100% { box-shadow: 0 0 12px rgba(245, 197, 66, .4), 0 0 38px rgba(245, 197, 66, .16); }
    50% { box-shadow: 0 0 20px rgba(245, 197, 66, .7), 0 0 60px rgba(245, 197, 66, .3); }
  }
}

/* Painel e extrato em telas medias/grandes: a tabela se ajusta a largura disponivel (nunca corta "Acoes" nem exige rolagem lateral).
   Descricao e categoria quebram linha; data, valor e status ficam em uma linha; abaixo de 1180px o botao Pagar vira so icone. */
@media (min-width: 769px) {
  .tabela-lanc, .tabela-extrato { white-space: normal; table-layout: auto; }
  .tabela-lanc th, .tabela-lanc td, .tabela-extrato th, .tabela-extrato td { padding: 10px 8px; vertical-align: middle; }
  .tabela-lanc td:nth-child(1), .tabela-extrato td:nth-child(2) { min-width: 130px; overflow-wrap: anywhere; }
  .tabela-lanc td:nth-child(2) span, .tabela-lanc td:nth-child(2) div { white-space: normal !important; }
  .tabela-lanc td:nth-child(3) { overflow-wrap: anywhere; }
  .tabela-lanc td:nth-child(4), .tabela-lanc td:nth-child(5), .tabela-lanc td:nth-child(6),
  .tabela-extrato td:nth-child(1), .tabela-extrato td:nth-child(4), .tabela-extrato td:nth-child(5) { white-space: nowrap; }
  .tabela-lanc th:last-child, .tabela-lanc td.td-acoes, .tabela-extrato th:last-child, .tabela-extrato td:last-child { width: 1%; white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .tabela-lanc .btn-pagar span, .tabela-extrato .btn-pagar span { display: none; }
  .tabela-lanc .btn-pagar, .tabela-extrato .btn-pagar { padding: 6px 9px; }
}

/* Pendentes (Relatorios): tabela em largura total que se ajusta ao espaco, sem cortar Acoes. */
@media (min-width: 769px) {
  .tabela-pend { white-space: normal; table-layout: auto; }
  .tabela-pend th, .tabela-pend td { padding: 10px 8px; vertical-align: middle; }
  .tabela-pend td:nth-child(1) { min-width: 160px; }
  .tabela-pend td:nth-child(1) strong, .tabela-pend td:nth-child(1) div { max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
  .tabela-pend td:nth-child(2), .tabela-pend td:nth-child(3) { white-space: nowrap; }
  .tabela-pend th:last-child, .tabela-pend td:last-child { width: 1%; white-space: nowrap; }
}

.btn-editar-linha { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; font-size: 16px; line-height: 1; }
.btn-editar-linha:hover { color: var(--text); background: var(--bg); }

/* Grupos recolhiveis (Painel e Pendentes): a seta gira ao abrir */
details[data-grupo] > summary > div:first-child > .ph-caret-right { transition: transform 0.2s; }
details[data-grupo][open] > summary > div:first-child > .ph-caret-right { transform: rotate(90deg); }

/* Graficos de analise (Relatorios > Graficos): cards de rosca por categoria/subcategoria, reordenaveis ------------------- */
.gf-analise__cab h2 { margin: 0 0 2px; font-size: 18px; }
.gf-analise__cab p { margin: 0 0 14px; font-size: 13px; }
.gf-analise__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; } /* 2 em cima (por categoria) e 2 embaixo (por subcategoria) */
.gf-card { position: relative; border-radius: 16px; padding: 22px 26px 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: box-shadow .15s ease, opacity .15s ease; }
.gf-card.is-arrastando { opacity: .55; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.gf-card__alca { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--muted); cursor: grab; padding: 4px; border-radius: 8px; font-size: 18px; line-height: 1; }
.gf-card__alca:hover { color: var(--text); background: var(--bg); }
.gf-card__alca:active { cursor: grabbing; }
.gf-card__titulo { margin: 0; padding-right: 28px; font-size: 15px; font-weight: 600; }
.gf-chip { display: inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 700; }
.gf-chip--verde { background: var(--green-bg); color: var(--green); }
.gf-chip--vermelho { background: var(--red-bg); color: var(--red); }
.gf-card__periodo { font-size: 13px; color: #2a78d6; }
.gf-card__filtro { align-self: flex-start; padding: 6px 12px; font-size: 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
.gf-card__corpo { display: flex; flex-direction: column; gap: 14px; min-height: 120px; flex: 1; }
.gf-card__rosca { width: 100%; max-width: 340px; margin: 6px auto 0; }
.gf-card .gf-leg { max-height: 210px; min-width: 0; padding-right: 8px; gap: 12px; }
.gf-leg__link { display: flex; flex-direction: column; gap: 5px; color: inherit; text-decoration: none; border-radius: 8px; }
.gf-leg__link:hover .gf-leg__nome { text-decoration: underline; }
.gf-leg__nome { display: flex; flex-direction: column; }
.gf-leg__sub { font-size: 12px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.gf-card__rodape { margin: 8px -26px 0; padding: 14px 26px; border-top: 1px solid var(--border); text-align: center; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gf-card__rodape:hover { background: var(--bg); }
@media (max-width: 900px) { .gf-analise__grid { grid-template-columns: minmax(0, 1fr); } .gf-card__alca { display: none; } }

/* Estado financeiro: resultado do periodo + tabela por categoria (realizado, pendente, total, peso, vs anterior, orcado) ---- */
.estado-resumo { border-radius: 16px; padding: 20px 24px; margin-top: 20px; }
.estado-resumo__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.estado-resumo__cab h3 { margin: 0; font-size: 16px; }
.estado-resumo__cab .muted { font-size: 13px; }
.estado-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); }
.estado-linha:first-of-type { border-top: none; }
.estado-linha__rot { font-size: 14px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.estado-linha__rot small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.estado-linha__rot small b { color: var(--text); font-weight: 600; }
.estado-linha__val { font-size: 17px; font-weight: 800; text-align: right; white-space: nowrap; }
.estado-linha--rec .estado-linha__val { color: var(--green); }
.estado-linha--des .estado-linha__val { color: var(--red); }
.estado-linha--res { border-top: 2px solid var(--border); background: var(--bg); margin: 4px -24px; padding: 14px 24px; }
.estado-linha--res .estado-linha__val { font-size: 21px; }
.estado-linha--proj .estado-linha__val { color: var(--text); }
.estado-delta { display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 700; }
.estado-delta--bom { color: var(--green); }
.estado-delta--ruim { color: var(--red); }

.estado-tabela__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.estado-tabela__cab h3 { margin: 0; font-size: 16px; }
.estado-t th.num, .estado-t td.num { text-align: right; white-space: nowrap; }
.estado-t td { vertical-align: middle; }
.estado-t tfoot td { border-top: 2px solid var(--border); border-bottom: none; }
.estado-nome { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; }
.estado-nome:hover { text-decoration: underline; }
.estado-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.estado-sub td { font-size: 13px; color: var(--muted); }
.estado-sub .estado-nome { font-weight: 500; padding-left: 21px; }
.estado-sub--solo .estado-nome { padding-left: 0; }
.estado-sub td.num strong { font-weight: 600; color: var(--text); }
.orc { min-width: 120px; }
.orc__txt { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 3px; }
.orc__barra { height: 5px; border-radius: 5px; background: var(--bg); overflow: hidden; }
.orc__barra > span { display: block; height: 100%; border-radius: 5px; }
.orc__barra > .orc--ok, b.orc--ok { background: var(--green); }
.orc__barra > .orc--alerta { background: var(--pendente, #f5a524); }
.orc__barra > .orc--estouro { background: var(--red); }
b.orc--ok { background: none; color: var(--green); } b.orc--alerta { color: var(--pendente, #f5a524); } b.orc--estouro { color: var(--red); }
@media (max-width: 768px) {
  .estado-t .opc { display: none; }
  .estado-resumo { padding: 16px; }
  .estado-linha--res { margin: 4px -16px; padding: 12px 16px; }
  .estado-linha__val { font-size: 15px; }
}
.estado-linha--real .estado-linha__val { font-size: 14px; font-weight: 700; color: var(--muted); }
.estado-linha--proj { border-top: 2px solid var(--border); }

/* Comparativo periodo anterior x atual (Painel) */
.comp-card { padding: 16px 18px; border-radius: 16px; margin-bottom: 16px; display: flex; flex-direction: column; justify-content: center; }
.comp-card__titulo { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.comp-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.5fr; gap: 8px; align-items: center; }
.comp-grid--cab { font-size: 12px; color: var(--muted); font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.comp-linha { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.comp-linha:last-child { border-bottom: 0; }
.comp-linha--total { font-weight: 800; }
.comp-rotulo { font-weight: 600; min-width: 0; }
.comp-col { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.comp-col--atual { font-weight: 700; }
.comp-col--var { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-weight: 700; }
.comp-col--var small { font-weight: 600; opacity: .85; }
@media (min-width: 769px) {
  .painel-resumo:has(.grafico-card) .comp-card { margin-bottom: 0; }
}
@media (max-width: 768px) {
  .comp-grid { grid-template-columns: 1.1fr 1fr 1fr; }
  .comp-linha { font-size: 13px; }
  .comp-col--var { grid-column: 1 / -1; justify-content: flex-end; font-size: 12.5px; padding-bottom: 2px; }
  .comp-grid--cab .comp-col--var { display: none; }
}

/* Estado financeiro: comparacao, exportar, abas internas, comparativo, fluxo de caixa e por conta ---------------- */
.estado-barra { border-radius: 16px; padding: 14px 18px; margin-top: 20px; display: flex; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; align-items: flex-start; }
.estado-barra__chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.estado-barra .rot { font-size: 13px; font-weight: 600; margin-right: 2px; }
.estado-barra__cmp details { margin-top: 10px; }
.estado-barra__form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.estado-barra__form .input { width: 150px; padding: 4px 8px; font-size: 13px; border-radius: 8px; }
.estado-barra__exp { display: flex; gap: 6px; flex-wrap: wrap; }
.estado-vistas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 16px; border-bottom: 1px solid var(--border); }
.estado-vistas__item { padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.estado-vistas__item:hover { color: var(--text); }
.estado-vistas__item.is-ativo { color: var(--text); border-bottom-color: var(--text); }
.cmp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.cmp-kpi { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--card); }
.cmp-kpi small { color: var(--muted); font-size: 12.5px; display: block; }
.cmp-kpi strong { font-size: 19px; display: block; margin: 2px 0 6px; }
.cmp-kpi__linha { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.cmp-kpi__linha b { color: var(--text); font-weight: 600; text-align: right; }
.barra2 { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.barra2 i { display: block; height: 6px; border-radius: 4px; }
.barra2 .barra2--cmp { background: var(--muted); opacity: .5; }
.cmp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.cmp-lista { border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; background: var(--card); }
.cmp-lista h4 { margin: 0 0 8px; font-size: 13px; }
.cmp-lista .it { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--border); }
.cmp-lista .it:first-of-type { border-top: none; }
.cmp-lista p { margin: 0; font-size: 13px; }
.fluxo-svg { display: block; max-height: 340px; }
.fluxo-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 4px; }
.fluxo-alertas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.fluxo-alertas .badge { font-size: 13px; padding: 6px 10px; }
@media (max-width: 800px) { .cmp-kpis, .cmp-duo { grid-template-columns: 1fr; } .estado-vistas__item { padding: 8px 10px; font-size: 13px; } }
.estado-contas th, .estado-contas td { padding: 10px 8px; }

/* ==========================================================================
   Revisao de usabilidade (computador e celular)
   ========================================================================== */

/* Foco visivel para quem navega pelo teclado */
.btn:focus-visible, .tabs__item:focus-visible, .navbar__link:focus-visible, .icon-btn:focus-visible,
.drawer-link:focus-visible, .settings-menu__item:focus-visible, summary:focus-visible, .btn-pagar:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* ---- Telas de entrada (login, cadastro, recuperar senha, aceitar termos): o cartao nao estica na pagina inteira ---- */
.auth-card { max-width: 440px; margin-left: auto; margin-right: auto; }

/* ---- Modais: classes usadas nas telas que estavam sem estilo (.modal__close, .modal__actions, .modal__body) ---- */
.modal { overscroll-behavior: contain; } /* chegar ao fim do formulario nao sai rolando a pagina de tras */
@supports (height: 100dvh) { .modal { max-height: 90dvh; } }
.modal__header h3 { margin: 0; font-size: 17px; }
.modal__close, .modal__fechar {
  background: none; border: none; cursor: pointer; color: var(--muted); padding: 0;
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal__close { font-size: 24px; line-height: 1; margin: -6px -8px -6px 8px; }
.modal__fechar { font-size: 18px; margin: -6px -8px -6px 8px; }
.modal__close:hover, .modal__fechar:hover { background: var(--bg); color: var(--text); }
.modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.modal__actions form { display: inline-flex; margin: 0; }
.btn-danger { background: var(--red); color: var(--on-accent); border-color: var(--red); }
.btn-danger:hover { opacity: .9; }
.badge-padrao { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.badge-erro { background: var(--red-bg); color: var(--red); }
.btn-olho { background: none; border: none; padding: 4px; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; display: inline-flex; border-radius: 8px; }
.btn-olho:hover { color: var(--text); background: var(--bg); }

/* ---- Painel: botoes de nova receita / nova despesa ---- */
.myfinance-action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.btn-acao { min-height: 48px; padding: 12px; border: none; border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--on-accent); gap: 8px; }
.btn-acao .ph { font-size: 20px; margin-right: 0; }
.btn-acao--receita { background: var(--green); }
.btn-acao--despesa { background: var(--red); }
.btn-acao:hover { opacity: .92; }

/* ---- Formulario de receita/despesa e de transferencia (partials/modal_lancamento.ejs) ---- */
.modal-backdrop--lanc { background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px); }
.modal--lanc { max-width: 520px; max-height: 92vh; border-radius: 20px; padding: 24px 24px 0; box-shadow: 0 20px 40px rgba(0, 0, 0, .15); }
@supports (height: 100dvh) { .modal--lanc { max-height: 92dvh; } }
.modal--lanc .modal__header { margin-bottom: 16px; }
.modal__titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.modal__titulo h2 { font-size: 18px; font-weight: 700; margin: 0; }
.modal__icone {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
}
.modal--receita .modal__icone { background: var(--green-bg); color: var(--green); border-color: transparent; }
.modal--despesa .modal__icone { background: var(--red-bg); color: var(--red); border-color: transparent; }

.lanc-form { display: flex; flex-direction: column; gap: 12px; }
.lanc-form .form-group { margin: 0; }
.lanc-form label { font-size: 13px; }
.lanc-form .input { border-radius: 12px; padding: 10px 14px; }
.lanc-form__secao { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 6px 0 0; }
.lanc-form .lanc-form__valor { font-size: 18px; font-weight: 700; }
.lanc-campo { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--bg); }
.lanc-campo--linha { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.lanc-campo[hidden], .lanc-grupo[hidden] { display: none; }
.lanc-campo__rotulo { display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0; font-weight: 400; }
.lanc-campo__rotulo strong { display: block; font-size: 13px; font-weight: 600; }
.lanc-campo__rotulo small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 1px; }
.lanc-campo__ico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--muted); border: 1px solid var(--border);
}
/* Situacao: relogio ambar enquanto esta pendente, visto verde quando foi pago/recebido */
.lanc-campo__ico--status { background: color-mix(in srgb, var(--pendente) 16%, transparent); color: var(--pendente); border-color: transparent; }
.lanc-campo__ico--status.is-pago { background: var(--green-bg); color: var(--green); }
.lanc-campo .input { background: var(--card); border-radius: 10px; padding: 8px 12px; }
.lanc-campo .toggle { margin: 0; flex-shrink: 0; }
.lanc-campo .toggle:has(input[data-gf-status-toggle]:checked) .toggle__track { background: var(--green); }
.lanc-grupo { display: flex; flex-direction: column; gap: 12px; }
.lanc-serie__titulo { font-weight: 600; font-size: 13px; margin: 0; }
.lanc-serie__dica { font-size: 12.5px; margin: 0; }
.lanc-form .lanc-serie__opcao { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; margin: 0; min-height: 30px; cursor: pointer; }

/* Rodape do formulario sempre a vista: Cancelar e Salvar nao ficam escondidos no fim da rolagem */
.modal-rodape {
  position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px;
  margin: 6px -24px 0; padding: 14px 24px 20px;
  background: var(--card); border-top: 1px solid var(--border);
}
.modal-rodape .btn { flex: 1; min-height: 46px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.modal-rodape .btn-salvar { flex: 2; background: var(--primary); color: var(--primary-text); border: none; }
.modal--receita .btn-salvar { background: var(--green); color: var(--on-accent); }
.modal--despesa .btn-salvar { background: var(--red); color: var(--on-accent); }
.modal-rodape .btn-salvar:hover { opacity: .92; }

/* ---- Listas de lancamentos (Painel, Pendentes, Estado financeiro por categoria, Extrato) ---- */
.lista-card { border-radius: 16px; padding: 20px; }
.lista-grupo { border-radius: 12px; padding: 0; border: 1px solid var(--border); overflow: hidden; }
.lista-grupo__corpo { padding: 12px 18px; border-top: 1px solid var(--border); }

/* ---- Categorias: busca ---- */
.categorias-filtros { padding: 14px; margin-bottom: 20px; }
.categorias-filtros .input { flex: 1; }

/* ---- Estado financeiro: o nome da categoria/conta pode quebrar linha (a tabela nao precisa rolar no computador) ---- */
.estado-t td:first-child { white-space: normal; min-width: 130px; }

/* ---- Tablet e notebook pequeno: a barra do topo cabe em UMA linha (antes os atalhos quebravam em 2 ou 3 linhas
   e a barra ocupava ate um quarto da tela). Sai o nome do usuario, o indicador de conexao vira so a bolinha
   (o texto volta quando esta sem conexao) e, abaixo de 900px, so o atalho da tela atual mostra o nome. ---- */
@media (min-width: 769px) and (max-width: 1150px) {
  .navbar__inner { gap: 12px; }
  .navbar__links { flex-wrap: nowrap; gap: 2px; margin-left: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .navbar__links::-webkit-scrollbar { display: none; }
  .navbar__link { padding: 12px 8px; flex-shrink: 0; }
  .navbar__user-nome { display: none; }
  .pwa-status-badge:not(.is-offline) { padding: 6px; margin-left: 2px; }
  .pwa-status-badge:not(.is-offline) .pwa-status-text { display: none; }
}
@media (min-width: 769px) and (max-width: 900px) {
  .navbar__link { padding: 12px 11px; }
  .navbar__link:not(.is-active) .navbar__label { display: none; }
  .navbar__link:not(.is-active) .navbar__icon { font-size: 22px; }
}

@media (max-width: 768px) {
  /* Faixas da conta (teste gratis, confirmar e-mail, somente leitura): uma linha so, com o botao ao lado */
  .faixa-conta { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; font-size: 13px; margin-top: 0; margin-bottom: 10px; }
  .faixa-conta span { min-width: 0; }
  .faixa-conta form { flex-shrink: 0; }
  .faixa-conta .btn { min-height: 34px; padding: 6px 10px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* Modais: com um formulario aberto, a pagina de tras nao rola junto com o dedo */
  html:has(.modal-backdrop.is-open) { overflow: hidden; }
  .modal__actions { flex-direction: column-reverse; gap: 8px; }
  .modal__actions .btn, .modal__actions form { width: 100%; }
  .modal__actions .btn { min-height: 44px; }
  .modal--lanc { padding: 20px 16px 0; }
  .modal-rodape { margin: 6px -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .lanc-form .input, .lanc-campo .input { font-size: 16px; } /* abaixo de 16px o iPhone aproxima a tela ao focar */
  .btn-olho { min-width: 36px; min-height: 36px; align-items: center; justify-content: center; }

  /* Lista de lancamentos: sem a moldura de fora, cada lancamento ja e um cartao e usa a largura toda da tela */
  .lista-card { padding: 0; background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .lista-grupo { background: var(--card); }
  .lista-grupo__corpo { padding: 8px; }
  .lista-grupo > summary { flex-wrap: wrap; gap: 6px 10px; padding: 12px 14px !important; }
  .lista-grupo > summary > div { flex-wrap: wrap; }
  .tabela-lanc tr.lanc-linha--receita, .tabela-extrato tr.lanc-linha--receita { border-left-color: var(--green); }
  .tabela-lanc tr.lanc-linha--despesa, .tabela-extrato tr.lanc-linha--despesa { border-left-color: var(--red); }

  /* Cartao do lancamento em 3 linhas: [descricao | valor] / [categoria | conta] / [data situacao | acoes] */
  .tabela-lanc tr:not(:has(td[colspan])) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "desc desc valor" "cat cat conta" "data status acoes";
    gap: 6px 10px;
  }
  .tabela-lanc td:nth-child(1) { overflow-wrap: break-word; }
  .tabela-lanc td:nth-child(3) { grid-area: conta; align-self: start; text-align: right; max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabela-lanc td:nth-child(4) { grid-area: data; white-space: nowrap; }
  .tabela-lanc td:nth-child(6) { grid-area: status; justify-self: start; }
  .tabela-extrato td:nth-child(2) { overflow-wrap: break-word; }

  /* A terceira linha (data, situacao, Pagar e menu) precisa caber tambem dentro de um grupo, onde ha menos largura:
     margens menores no grupo, etiqueta e botao um pouco mais compactos e, em telas muito estreitas, o botao so com o icone */
  .lista-grupo__corpo { padding: 8px 4px; }
  .lista-grupo .tabela-lanc tr { padding: 12px 10px; }
  .tabela-lanc tr:not(:has(td[colspan])) { column-gap: 8px; }
  .tabela-lanc td:nth-child(6) .badge { padding: 3px 8px; white-space: nowrap; }
  .tabela-lanc .btn-pagar { padding: 6px 10px; }
  .tabela-lanc .acoes-linha { gap: 4px; }
}
@media (max-width: 345px) {
  .tabela-lanc .btn-pagar span { display: none; }
  .tabela-lanc .btn-pagar { padding: 6px 11px; }
}
@media (max-width: 768px) {

  /* Pendencias do dia: valor em cima do botao, deixando a descricao respirar */
  .pendencias__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info valor" "info botao"; gap: 4px 10px; }
  .pendencias__info { grid-area: info; }
  .pendencias__valor { grid-area: valor; text-align: right; }
  .pendencias__item form { grid-area: botao; justify-self: end; }
  .pendencias__desc { white-space: normal; overflow-wrap: break-word; }

  /* Categorias: busca em linha propria e acoes ao lado do nome (metade da altura de antes) */
  .categorias-filtros { flex-wrap: wrap; gap: 10px; }
  .categorias-filtros .input { flex: 1 1 100%; max-width: none; }
  .categoria-linha { flex-wrap: nowrap; }
  .categoria-linha__principal { flex-wrap: wrap; row-gap: 4px; }
  .categoria-linha__acoes { width: auto; border-top: none; padding-top: 0; flex-shrink: 0; gap: 0 !important; }

  /* Nenhuma tabela pode ficar com colunas cortadas: as que nao viram cartoes rolam para o lado dentro do proprio cartao */
  .tabela-container { overflow-x: auto; }
  .tabela-container:has(> .tabela-lanc), .tabela-container:has(> .tabela-extrato), .tabela-container:has(> .tabela-pend), .tabela-container:has(> .tabela-disp) { overflow: visible; }

  /* Tabelas do Estado financeiro (categorias, comparativo, fluxo de caixa, por conta): rolam para o lado com a
     primeira coluna fixa; a sombra na borda avisa que ha mais colunas */
  .tabela-container--rola {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to left, var(--card) 40%, transparent) right center / 34px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), transparent) right center / 12px 100% no-repeat scroll;
  }
  .tabela-container--rola .estado-t { white-space: nowrap; min-width: max-content; }
  .tabela-container--rola .estado-t th:first-child,
  .tabela-container--rola .estado-t td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--card);
    white-space: normal; min-width: 108px; max-width: 150px;
  }

  /* Dispositivos conectados: cada aparelho vira um bloco, com o botao "Revogar" sempre ao alcance */
  .tabela-disp thead { display: none; }
  .tabela-disp, .tabela-disp tbody { display: block; width: 100%; }
  .tabela-disp tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome status" "plat plat" "uso acoes"; gap: 6px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .tabela-disp tbody tr:last-child { border-bottom: none; }
  .tabela.tabela-disp td { display: block; padding: 0; border: none; }
  .tabela-disp td:nth-child(1) { grid-area: nome; }
  .tabela-disp td:nth-child(2) { grid-area: plat; }
  .tabela-disp td:nth-child(3) { grid-area: uso; color: var(--muted); font-size: 13px; }
  .tabela-disp td:nth-child(4) { grid-area: status; justify-self: end; }
  .tabela-disp td:nth-child(5) { grid-area: acoes; justify-self: end; }
}

/* ---- Pedido de plano: telefone de contato, aviso de IVA e tela de pedidos do admin ---- */
.plano-card__iva { font-size: 12.5px; margin: -4px 0 10px; }
.pedido-resumo { padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.pedido-resumo__preco { font-size: 18px; font-weight: 800; }
.pedido-tel { display: flex; gap: 8px; }
.pedido-tel select { flex: 0 0 auto; width: auto; max-width: 52%; }
.pedido-tel input { flex: 1 1 0; min-width: 0; }
.pedidos-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.tabela-pedidos td { vertical-align: middle; }
@media (max-width: 768px) {
  .pedido-tel { flex-direction: column; }
  .pedido-tel select { max-width: none; width: 100%; }
}

@media (max-width: 768px) {
  /* Pedidos de plano no celular: cada pedido vira um cartao (contato e o botao Ativar sempre a vista) */
  .tabela-container:has(> .tabela-pedidos) { overflow: visible; }
  .tabela-pedidos thead { display: none; }
  .tabela-pedidos, .tabela-pedidos tbody { display: block; width: 100%; }
  .tabela-pedidos tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .tabela-pedidos tbody tr:last-child { border-bottom: none; }
  .tabela.tabela-pedidos td { display: block; padding: 0; border: none; min-width: 0; }
  .tabela-pedidos td:nth-child(1) { grid-column: 1 / -1; }
  .tabela-pedidos td:nth-child(2) { grid-column: 1 / -1; }
  .tabela-pedidos td:nth-child(3) { grid-column: 1; }
  .tabela-pedidos td:nth-child(4) { grid-column: 2; justify-self: end; }
  .tabela-pedidos td:nth-child(5) { grid-column: 1; text-align: left; }
  .tabela-pedidos td:nth-child(6) { grid-column: 2; justify-self: end; }
  .tabela-pedidos td:nth-child(7) { grid-column: 1 / -1; display: flex !important; gap: 8px; }
  .tabela-pedidos td:nth-child(7) .btn { min-height: 40px; }
  .tabela-pedidos td:nth-child(7) a.btn { flex: 1; justify-content: center; }
}

/* ---- Comunidade > Novidades ---- */
.comunidade-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.comunidade-abas .tabs__item { display: inline-flex; align-items: center; gap: 6px; }
.selo-novidade { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; vertical-align: middle; }
.selo-novidade--aba { margin-left: 2px; }
.novidades-lista { display: flex; flex-direction: column; gap: 14px; }
.novidade { padding: 18px 20px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.novidade__topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.novidade__data { margin-left: auto; font-size: 13px; }
.novidade__tipo { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; background: var(--bg); color: var(--muted); }
.novidade__tipo--modulo { background: #ede9fe; color: #6d28d9; }
.novidade__tipo--novidade { background: var(--green-bg); color: var(--green); }
.novidade__tipo--melhoria { background: #dbeafe; color: #1d4ed8; }
:root[data-tema="escuro"] .novidade__tipo--modulo { background: #2e1f5e; color: #c4b5fd; }
:root[data-tema="escuro"] .novidade__tipo--melhoria { background: #172554; color: #93c5fd; }
.novidade__nova { padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--red); color: #fff; }
.novidade__titulo { margin: 0; font-size: 18px; }
.novidade__texto { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-line; }
.novidade__origem { margin: 0; font-size: 13px; }
.novidade__reacoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.novidade__reacao { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.novidade__reacao:hover { border-color: var(--text); }
.novidade__reacao.is-ativa { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.novidade__reacao[data-reagir="nao_gostei"].is-ativa { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.novidade__reacao i { font-size: 17px; }
.nov-adm { list-style: none; margin: 0; padding: 0; }
.nov-adm__item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.nov-adm__item:last-child { border-bottom: 0; }
.nov-adm__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 280px; }
.nov-adm__titulo { overflow-wrap: anywhere; }
.nov-adm__acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nov-adm__acoes form { margin: 0; }
.nov-form { display: flex; flex-direction: column; gap: 16px; }
.nov-form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nov-form__campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.nov-form__campo small { font-weight: 400; }
.nov-form__idioma { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; }
.nov-form__idioma legend { padding: 0 6px; font-weight: 800; font-size: 13px; }
.nov-form__idioma textarea { resize: vertical; }
.nov-form__acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 768px) {
  .nov-form__linha { grid-template-columns: 1fr; }
  .nov-form__acoes .btn { flex: 1 1 100%; min-height: 44px; justify-content: center; }
  .novidade { padding: 16px; }
  .nov-adm__acoes { width: 100%; }
}

/* Selinho de novidades no menu do topo: fica sobre o icone (nao aumenta a altura da barra) */
.navbar__link { position: relative; }
.navbar__link .selo-novidade { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; font-size: 11px; box-shadow: 0 0 0 2px var(--nav-bg, #0b0b0f); }
.nov-form textarea.input { font-family: inherit; line-height: 1.5; }
.navbar__hamb { position: relative; }
.selo-novidade--ponto { position: absolute; top: 6px; right: 6px; min-width: 10px; width: 10px; height: 10px; padding: 0; margin: 0; box-shadow: 0 0 0 2px #fff; }

/* ==========================================================================
   Niveis de plano: selo do plano, apresentacao de recurso de outro plano,
   teste gratis (escolher plano / teste encerrado) e cota de foto e audio da IA
   ========================================================================== */

/* Selo pequeno do plano que inclui o recurso (abas, botoes, itens de menu) */
.selo-plano { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.selo-plano .ph-fill { font-size: 12px; margin: 0; }
.selo-plano--premium { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
:root[data-tema="escuro"] .selo-plano { background: #3b2f0b; color: #fcd34d; border-color: #6b5310; }
:root[data-tema="escuro"] .selo-plano--premium { background: #172554; color: #93c5fd; border-color: #1e3a8a; }
.chip-bloqueado { color: var(--muted); }
.navbar__coroa { position: absolute; top: 6px; left: calc(50% + 7px); font-size: 12px; line-height: 1; color: #fcd34d; }
.drawer-link .selo-plano { margin-left: auto; }

/* Apresentacao de um recurso que faz parte de um plano acima (no lugar de uma mensagem de erro) */
.bloq { max-width: 640px; margin: 20px auto; padding: 28px 26px; border-radius: 18px; }
.bloq__topo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bloq__icone { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: #dbeafe; color: #1e40af; }
.bloq--pro .bloq__icone { background: #fef3c7; color: #92400e; }
:root[data-tema="escuro"] .bloq__icone { background: #172554; color: #93c5fd; }
:root[data-tema="escuro"] .bloq--pro .bloq__icone { background: #3b2f0b; color: #fcd34d; }
.bloq__titulo { font-size: 20px; margin: 0 0 4px; }
.bloq__texto { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; }
.bloq__lista { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bloq__lista li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.bloq__lista .ph-bold { color: var(--green); margin-top: 2px; flex-shrink: 0; }
.bloq__acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bloq__acoes form { margin: 0; }
.bloq__dica { font-size: 13px; margin: 12px 0 0; }

/* Teste gratis: escolher o plano */
.planos--teste .planos__topo { align-items: center; text-align: center; margin: 8px 0 20px; }
.planos--teste .planos__topo h1 { font-size: 26px; margin: 0; }
.planos--teste .planos__topo p { max-width: 640px; font-size: 14.5px; }
.teste-selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.teste-nota { font-size: 13px; text-align: center; margin: 4px 0 24px; }
.plano-card__testar { margin: 0; }
.plano-card__testar .btn { width: 100%; justify-content: center; }
.plano-card--pro .plano-card__testar .btn { color: var(--nav-text); border-color: #3a3f4a; background: transparent; }

/* Teste encerrado: aviso no topo da tela de assinatura (a unica tela aberta) */
.teste-fim { display: flex; gap: 14px; align-items: flex-start; border-left: 4px solid var(--pendente); border-radius: 16px; margin-bottom: 18px; }
.teste-fim h1 { font-size: 20px; margin: 0 0 6px; }
.teste-fim p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.teste-fim__icone { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: color-mix(in srgb, var(--pendente) 16%, transparent); color: var(--pendente); }

/* Barra do topo de quem esta sem acesso: so o nome e o botao de sair */
.navbar__user--bloqueado { margin-left: auto; }
.navbar__sair { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; min-height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: none; color: var(--nav-text); cursor: pointer; }
.navbar__sair:hover { background: rgba(255, 255, 255, .08); }

/* Chat IA: cota de registros por foto e audio do mes */
.ia-cota { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.ia-cota[hidden] { display: none; }
.ia-cota.is-alerta { color: var(--pendente); }
.ia-cota.is-esgotada { color: var(--red); }
.ia-ico.is-bloqueado { opacity: .55; }
.ia-ico.is-bloqueado::after { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--pendente); box-shadow: 0 0 0 2px var(--bg); }
.ia-cota-aviso { border-left-color: var(--pendente); }
.ia-cota-aviso .ia-cartao__topo span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ia-cota-aviso p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; }
.ia-cota-aviso .ia-cartao__acoes { margin-top: 10px; }

@media (max-width: 768px) {
  .bloq { padding: 20px 16px; margin: 12px 0; }
  .bloq__acoes .btn, .bloq__acoes form { width: 100%; }
  .bloq__acoes .btn { justify-content: center; }
  .planos--teste .planos__topo h1 { font-size: 21px; }
  .teste-fim { padding: 16px; }
  .teste-fim h1 { font-size: 18px; }
  .navbar__sair span { display: inline; }
}

/* ==========================================================================
   Navegacao e painel: barra inferior (celular), painel em duas colunas, blocos recolhiveis,
   faixa unica do topo, abas de Informes numa linha e menu das contas
   ========================================================================== */

/* Painel: no computador, saldo + resumo + botoes a esquerda e as pendencias a direita */
.painel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: start; }
.painel-grid__esq, .painel-grid__dir { min-width: 0; }
@media (min-width: 900px) {
  .painel-grid:not(.painel-grid--uma) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .painel-grid:not(.painel-grid--uma) .pendencias { margin-top: 0; }
}
.painel-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.painel-tres > div { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 10px 12px; min-width: 0; }
.painel-tres small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.painel-tres b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.painel-tres .verde { color: var(--green); } .painel-tres .vermelho { color: var(--red); }
@media (max-width: 400px) { .painel-tres b { font-size: 13px; } .painel-tres > div { padding: 8px; } }

/* Blocos recolhiveis (comparativo e grafico do painel) */
.recolhivel > summary { list-style: none; cursor: pointer; }
.recolhivel > summary::-webkit-details-marker { display: none; }
.recolhivel__titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; min-height: 28px; }
.recolhivel__titulo small { font-weight: 600; color: var(--muted); }
.recolhivel__titulo small::after { content: " ▾"; }
.recolhivel[open] > .recolhivel__titulo { margin-bottom: 12px; }
.recolhivel[open] > .recolhivel__titulo small::after { content: " ▴"; }
.comp-card.recolhivel { display: block; }

/* Faixa unica (teste + e-mail por confirmar) */
.faixa-conta__link { display: inline; margin: 0; }
.faixa-conta__link button { font: inherit; background: none; border: 0; padding: 0; color: var(--pendente); text-decoration: underline; cursor: pointer; }

/* Abas de Informes: uma linha que rola para o lado (celular) */
@media (max-width: 768px) {
  .tabs.tabs--grade { display: flex !important; flex-wrap: nowrap; gap: 6px !important; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); padding-right: 20px; }
  .tabs.tabs--grade::-webkit-scrollbar { display: none; }
  .tabs--grade .tabs__item { white-space: nowrap; flex-shrink: 0; min-height: 40px; padding: 8px 14px; border-radius: 999px; }
  .contas-toolbar { min-width: 0; }
  .contas-toolbar > .tabs--grade { flex: 1 1 0; min-width: 0; max-width: 100%; }
  .tabs--grade .tabs__item.is-active { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
}

/* Contas: Extrato e Transferir a vista, o resto no menu */
.conta-card__footer .menu-acoes > summary { border: 1px solid var(--border); width: 38px; height: 38px; }
@media (max-width: 768px) {
  .conta-card__footer .btn { flex: 1 1 auto; justify-content: center; }
  .conta-card__footer .menu-acoes { margin-left: 0 !important; flex: 0 0 auto; }
  .page-header__botoes { display: grid; grid-template-columns: 1fr 1fr; }
  .page-header__botoes .btn-primary { grid-column: 1 / -1; }
}

/* ---- Barra inferior (so no celular) ---- */
.barra-inf, .folha, .folha-fundo { display: none; }
@media (max-width: 768px) {
  .fab, .fab-fundo { display: none !important; }
  .navbar__hamb { display: none !important; }
  .container { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .gf-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .barra-inf { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--border); }
  .barra-inf > a, .barra-inf > button:not(.barra-inf__novo) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; height: 100%;
    font: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; min-width: 0; }
  .barra-inf > a i, .barra-inf > button i { font-size: 23px; line-height: 1; }
  .barra-inf > a span, .barra-inf > button span:not(.barra-inf__ponto) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-inf .is-active { color: var(--text); font-weight: 800; }
  .barra-inf .is-active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--text); }
  .barra-inf__novo { justify-self: center; width: 48px; height: 48px; margin-top: -18px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    background: var(--primary); color: var(--primary-text); font-size: 24px; box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
  .barra-inf__ponto { position: absolute; top: 8px; left: calc(50% + 6px); width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--card); }
  .folha-fundo { display: block; position: fixed; inset: 0; z-index: 91; background: rgba(0, 0, 0, .35); }
  .folha { display: flex; flex-direction: column; position: fixed; left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 92; padding: 8px;
    background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 -8px 28px rgba(0, 0, 0, .22); max-height: 70vh; overflow-y: auto; }
  .folha[hidden], .folha-fundo[hidden] { display: none; }
  .folha hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }
  .folha form { margin: 0; }
  .folha__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; min-height: 48px; border-radius: 10px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; text-align: left; }
  .folha__item i { font-size: 21px; color: var(--muted); }
  .folha__item.is-active { background: var(--bg); }
  .folha__item .selo-plano, .folha__item .selo-novidade { margin-left: auto; }
  .folha__item--sair, .folha__item--sair i { color: var(--red); }
}

/* ---- Planos: preco em destaque e botao "Adquirir por ..." ---- */
.plano-card__preco { display: flex; align-items: baseline; gap: 6px; padding: 12px 14px; margin: 2px 0 4px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border);
  font-size: 40px; font-weight: 900; line-height: 1.05; letter-spacing: -.03em; flex-wrap: wrap; }
.plano-card__moeda { font-size: 18px; font-weight: 800; letter-spacing: 0; opacity: .8; }
.plano-card__preco small { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.plano-card--destaque .plano-card__preco { background: color-mix(in srgb, var(--blue) 9%, var(--card)); border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); }
.plano-card--pro .plano-card__preco { background: rgba(245, 197, 66, .08); border-color: rgba(245, 197, 66, .35); color: #f5c542; -webkit-background-clip: border-box; background-clip: border-box; }
.plano-card--pro .plano-card__preco small { -webkit-text-fill-color: var(--nav-text-muted); color: var(--nav-text-muted); }
.btn-adquirir { background: var(--green); color: var(--on-accent); border: 1px solid var(--green); font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-adquirir:hover { filter: brightness(1.06); }
.btn-adquirir [data-valor] { white-space: nowrap; }
@media (max-width: 768px) { .plano-card__preco { font-size: 36px; } }
@media (max-width: 360px) { .plano-card__preco { font-size: 32px; } .btn-adquirir { font-size: 13.5px; padding-left: 8px; padding-right: 8px; } }

/* ---- Guia de uso ---- */
.guia__cab h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.guia__cab p { max-width: 760px; margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; }
.guia__corpo { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.guia__indice { padding: 14px 16px; border-radius: 16px; }
.guia__indice-titulo { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 10px; }
.guia__indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.guia__indice li a { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.guia__indice li a:hover { background: var(--bg); }
.guia__indice li a i { font-size: 18px; color: var(--muted); flex-shrink: 0; }
.guia__secoes { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.guia__secao { border-radius: 18px; padding: 22px 24px; scroll-margin-top: 14px; }
.guia__secao-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.guia__secao-topo h2 { margin: 0; font-size: 19px; flex: 1 1 220px; }
.guia__icone { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: var(--bg); border: 1px solid var(--border); flex-shrink: 0; }
.guia__intro { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.guia__passos { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: passo; }
.guia__passos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; counter-increment: passo; }
.guia__passos li::before { content: counter(passo); flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--primary); color: var(--primary-text); margin-top: 1px; }
.guia__passos em, .guia__intro em, .guia__dica em { font-style: italic; color: var(--text); background: color-mix(in srgb, var(--blue) 10%, transparent); padding: 0 4px; border-radius: 5px; }
.guia__exemplo { border: 1px dashed var(--border); border-radius: 14px; padding: 10px 12px; margin-bottom: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.guia__exemplo small { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.guia__lanc { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: 10px; background: var(--card); padding: 8px 12px; font-size: 13.5px; }
.guia__lanc--rec { border-left-color: var(--green); }
.guia__lanc b { white-space: nowrap; color: var(--red); } .guia__lanc--rec b { color: var(--green); }
.guia__dica { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--pendente) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--pendente) 30%, var(--border)); font-size: 14px; line-height: 1.5; }
.guia__dica i { color: var(--pendente); font-size: 19px; margin-top: 1px; flex-shrink: 0; }
.guia__acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.guia__topo-link { font-size: 13px; color: var(--muted); text-decoration: none; }
.guia__topo-link:hover { color: var(--text); }
.guia__fim { text-align: center; border-radius: 18px; padding: 24px; }
.guia__fim h2 { margin: 0 0 6px; }
@media (max-width: 768px) {
  .guia__indice { padding: 10px; }
  .guia__indice ol { flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
  .guia__indice ol::-webkit-scrollbar { display: none; }
  .guia__indice-titulo { display: none; }
}
@media (max-width: 768px) { .guia__secao { padding: 18px 16px; } .guia__secao-topo h2 { font-size: 17px; } .guia__passos li { font-size: 14px; } }