/* CSS próprio de cada tela, num bloco == nome ==. Só o que app.css não resolve; nunca redefinir classe pública (docs/DESIGN.md §6). Valores só por token (tokens.css). */ /* == alertas == */ /* #6: a .grade de 3 colunas espremia o 
 em ~250px e quebrava numeros no meio; e o
   alinhamento por stretch deixava 830px de vazio no cartao do historico.
   #8: todos os valores financeiros da tela vivem dentro do 
. */
.grade-alertas{ align-items:start; }
.alertas-destinatario{ color:var(--ink); font-weight:var(--peso-medio); overflow-wrap:anywhere; }
@media (min-width:640px){
  .card-previa-email{ grid-column:1 / -1; }
}
.previa-email{
  white-space:pre-wrap;
  word-break:break-word;
  font-variant-numeric:tabular-nums;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.9rem 1rem;
  font-family:var(--font-mono);
  font-size:var(--texto-sm);
  line-height:1.5;
  color:var(--ink);
}
.form-alertas-enviar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--esp-3);
  margin-top:0.5rem;
}
/* Histórico agrupado por dia (
), a chave técnica em  que
   quebra em qualquer ponto — "a_pagar:aberto" e os hashes saíam da tela em 390 px. */
.alertas-historico{ display:flex; flex-direction:column; gap:var(--esp-2); margin-top:var(--esp-2); }
.alertas-dia .revelar-corpo{ padding-top:0; }
.alertas-dia .tabela{ margin-top:0; }
/* Rótulo + chave num bloco só; a chave em linha própria, quebrando só onde precisa (sem
   break-all, que partia "met|as:semana" por caractere em 1280). */
.alertas-tipo{ display:block; min-width:0; }
.alertas-historico code{
  display:block;
  margin-top:var(--esp-1);
  font-family:var(--font-mono);
  font-size:var(--texto-xs);
  color:var(--muted-2);
  overflow-wrap:anywhere;
}
@media (max-width:639.98px){
  .tabela td.alertas-cel-tipo{ display:block; text-align:left; }
  .tabela td.alertas-cel-tipo::before{ display:block; padding:0 0 var(--esp-1); }
}
/* O histórico e o envio automático ocupam a linha inteira da grade (num terço, sobravam
   ~670 px vazios ao lado de cada um). */
@media (min-width:640px){
  .card-historico-alertas, .card-envio-alertas{ grid-column:1 / -1; }
}
.campo-checkbox{
  display:flex;
  align-items:center;
  gap:var(--esp-2);
  color:var(--muted);
  font-size:var(--texto-sm);
}

/* == painel == */
/* Linha do tempo de "A pagar" (#85): a mensagem do item sem valor (o DAS esperando as
   notas) e frase, nao numero — fica sob a descricao, onde quebra; antes ia na coluna do
   valor, que e nowrap, e estourava 390 e 1024 px. */
.linha-tempo-mensagem{ font-size:var(--texto-xs); color:var(--amber); overflow-wrap:anywhere; }
/* ("Mês atual" sem aporte usa .estatistica-nenhum, que mora em app.css com .estatistica.)
   Em desktop o orçamento divide a linha com "Metas em foco" e esticava até a altura dele,
   com um parágrafo e meia tela vazia: fica com a própria altura. */
@media (min-width:1024px){
  .grade-painel > .card-orcamento{ align-self:start; }
}
/* Link de rodapé dos cards de leitura (Fiscal do mês e Cartões, #115/#114): o mesmo
   respiro do link de "A pagar". */
.painel-link-card{ margin-top:var(--esp-3); }
.painel-cartao-nome{ margin:var(--esp-3) 0 var(--esp-2); font-size:var(--texto-sm); }
/* DRE da PJ (#116): o mês e o acumulado do ano sempre empilhados (cada um é uma
   .lista-definicao). Lado a lado, no card de meia coluna da .grade-painel (288–400 px
   entre 640 e 1100), os valores em reais estouravam o card (design-review da #116). */
.painel-dre{ display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--esp-4); }
.painel-dre-titulo{ margin:0 0 var(--esp-2); font-size:var(--texto-sm); color:var(--muted); }
.painel-faturamento progress{ margin-top:var(--esp-2); }
/* Saldos do fluxo e números do fiscal do mês (#116, design-review): abaixo de 1024 px a
   .grade-estatisticas tem 2 colunas fixas e, no card de meia coluna da .grade-painel
   (640–1023 px), o .valor-grande estourava a própria coluna e cobria o "−" do vizinho. Uma
   coluna até o desktop, onde o auto-fit de 190 px volta a valer. */
@media (max-width:1023.98px){
  .grade-estatisticas.painel-saldos{ grid-template-columns:minmax(0, 1fr); }
}

/* == lancamentos == */

/* Select de categoria (issue #22/#25, reaproveitado em recorrentes/parcelamentos) com
   campo livre "Outra…" logo abaixo — mesmo espacamento vertical de .campo. */
.campo-categoria-outra{ margin-top:0.4rem; }

/* Filtros recolhidos no topo da lista: o resumo do  diz o que esta aplicado,
   entao a tela abre pela resposta (totais + lista) e nao pelo formulario. */
.filtros-lancamentos{ margin-bottom:var(--esp-4); }
.filtros-lancamentos .revelar-corpo{ display:flex; flex-direction:column; gap:var(--esp-3); }

/* Previsto x ja pago: a decisao mais cara do app deixa de ser um checkbox miudo ao lado
   do botao e vira dois alvos de 44 px dentro do card. */
.campo-escolha{ border:1px solid var(--line); border-radius:var(--radius); padding:var(--esp-3); margin:0; }
.campo-escolha legend{ padding:0 var(--esp-2); color:var(--muted); font-size:var(--texto-sm); font-weight:600; }
.escolha{
  display:flex;
  align-items:center;
  gap:var(--esp-3);
  min-height:var(--alvo-toque);
  font-size:var(--texto-sm);
  color:var(--muted);
  cursor:pointer;
}
.escolha strong{ color:var(--ink); font-weight:600; }
.escolha input{ flex:0 0 auto; width:1.1rem; height:1.1rem; accent-color:var(--prumo); }

/* O .form-rodape e sticky: sem esta folga ele cobria a linha "Mais opcoes" na unica
   dobra que existe em 390 px. */
.form-novo-lancamento{ padding-bottom:calc(var(--alvo-toque) + var(--esp-6)); }
@media (min-width:1024px){
  .form-novo-lancamento{ padding-bottom:0; }
}

/* Totais do filtro (B1): realizado e previsto em blocos separados, lado a lado a partir
   de 640 px; a outra moeda embaixo, com divisor. Nenhum bloco soma com o outro. */
.totais-blocos{ display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--esp-4); }
.totais-bloco{ min-width:0; }
.totais-titulo{ margin:0; font-size:var(--texto-sm); font-weight:var(--peso-forte); color:var(--ink); }
.totais-apoio{ font-weight:var(--peso-normal); font-size:var(--texto-xs); color:var(--muted); }
.totais-bloco + .totais-bloco{ padding-top:var(--esp-3); border-top:1px solid var(--line); }
.totais-estrangeiro{ margin-top:var(--esp-4); padding-top:var(--esp-3); border-top:1px solid var(--line); }
.totais-estrangeiro .lista-linhas li > span{ min-width:0; overflow-wrap:anywhere; }
@media (min-width:640px){
  .totais-blocos{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--esp-6); }
  .totais-bloco + .totais-bloco{ padding-top:0; border-top:none; }
  .totais-blocos .grade-estatisticas{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .totais-estrangeiro{ padding-top:var(--esp-3); border-top:1px solid var(--line); }
}

/* Prazo relativo ao lado da data absoluta no resumo do detalhe. */
.lanc-relativo{ color:var(--muted); font-weight:400; }

/* Lista /lancamentos. Em 390 px cada linha e um cartao de DUAS linhas (data + valor,
   descricao + situacao): Tipo, Natureza e Conta so aparecem na tabela, a partir de
   640 px. Acima de 640 px a tabela tem layout fixo e cada coluna curta uma largura
   conhecida (); a descricao fica com o que sobra e trunca com o texto inteiro
   no title. */
.tabela-lancamentos .lanc-data,
.tabela-lancamentos .lanc-valor{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.tabela-lancamentos .lanc-abrev{ cursor:help; }
.tabela-lancamentos .lanc-abrev,
.tabela-lancamentos .lanc-status .badge{ white-space:nowrap; }
.tabela-lancamentos .lanc-abrev{ display:none; }
@media (max-width:639.98px){
  .tabela-lancamentos .lanc-so-tabela{ display:none; }
  .tabela-lancamentos tbody tr{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"data valor" "descricao situacao";
    align-items:center;
    column-gap:var(--esp-3);
    padding:var(--esp-2) 0.7rem;
  }
  .tabela-lancamentos tbody td{
    display:block;
    padding:0;
    border-bottom:none;
    text-align:left;
  }
  .tabela-lancamentos tbody td[data-rotulo]::before{ content:none; }
  .tabela-lancamentos .lanc-data{ grid-area:data; color:var(--muted); font-size:var(--texto-xs); }
  .tabela-lancamentos .lanc-valor{ grid-area:valor; text-align:right; font-weight:600; }
  .tabela-lancamentos tbody td[data-rotulo="Descrição"]{ grid-area:descricao; }
  .tabela-lancamentos .lanc-status{ grid-area:situacao; text-align:right; }
  .tabela-lancamentos .lanc-descricao{
    display:flex;
    align-items:center;
    min-height:var(--alvo-toque);
    overflow-wrap:anywhere;
  }
}
@media (min-width:640px){
  .tabela-lancamentos{ min-width:760px; table-layout:fixed; }
  .tabela-lancamentos th{ white-space:nowrap; }
  .lanc-col-data{ width:82px; }       /* "28/08/26" a 0.875rem + padding */
  .lanc-col-tipo{ width:66px; }       /* "Transf." */
  .lanc-col-natureza{ width:98px; }   /* "Transf. int." */
  .lanc-col-conta{ width:150px; }
  .lanc-col-valor{ width:112px; }     /* "R$ 12.345,67" */
  .lanc-col-status{ width:86px; }     /* badge "Previsto" */
  .tabela-lancamentos td{ overflow:hidden; vertical-align:middle; }
  .tabela-lancamentos .lanc-valor,
  .tabela-lancamentos th.lanc-valor{ text-align:right; }
  .tabela-lancamentos .lanc-descricao,
  .tabela-lancamentos .lanc-conta{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* Alvo de 44 px tambem no desktop: a descricao e o unico caminho para o detalhe. */
  .tabela-lancamentos .lanc-descricao{ padding-block:0.8rem; }
  .tabela-lancamentos .lanc-abrev{ display:inline; }
  .tabela-lancamentos .lanc-completo{ display:none; }
}
/* Em 1024 px ha folga para o rotulo inteiro; a abreviacao fica so no tablet. */
@media (min-width:1024px){
  .lanc-col-tipo{ width:118px; }      /* "Transferência" inteiro, numa linha */
  .lanc-col-natureza{ width:152px; }  /* "Transferência interna" inteiro */
  .tabela-lancamentos .lanc-abrev{ display:none; }
  .tabela-lancamentos .lanc-completo{ display:inline; }
}

/* == contas == */
/* #116: o caminho até Recorrentes, que saiu do menu. */
.contas-link-recorrentes{ margin-top:var(--esp-3); }
/* Cinco colunas com largura conhecida e layout fixo: a tabela cabe inteira em 1024 px,
   entao as acoes ("Editar" e o menu "⋯") nunca ficam fora da area visivel. */
@media (min-width:640px){
  .tabela-contas{ table-layout:fixed; }
  .conta-col-tipo{ width:150px; }
  .conta-col-ambito{ width:74px; }
  .conta-col-saldo{ width:200px; }
  .conta-col-acoes{ width:154px; }
  .tabela-contas td{ overflow:hidden; }
}
/* Moeda estrangeira: o badge diz, na propria linha, que aquele numero nao entra no
   total em reais (D31). No celular ele cai embaixo do valor. */
.conta-moeda{ margin-left:var(--esp-2); }
@media (max-width:639.98px){
  .conta-moeda{ display:block; margin:var(--esp-1) 0 0; }
}

/* == recorrentes == */
/* A tabela de 7 colunas com `white-space:nowrap` e `.celula-principal{min-width:12rem}`
   pedia 915 px: em 1024 px as colunas Status e Acoes ficavam fora da area visivel e a
   pagina inteira balancava na horizontal (1058x1024). Agora sao 4 colunas com largura
   conhecida e `table-layout:fixed`, como a .tabela-lancamentos ja fazia: a tabela cabe
   inteira e "Editar"/"⋯" ficam sempre alcancaveis (R4.1, R4.2, R9.7). */
@media (min-width:640px){
  .tabela-recorrentes,
  .tabela-parcelamentos{ table-layout:fixed; }
  .rec-col-vence{ width:170px; }
  .rec-col-valor{ width:140px; }
  .rec-col-acoes{ width:154px; }
  .parc-col-pagas{ width:84px; }
  .parc-col-proxima{ width:190px; }
  .parc-col-acoes{ width:176px; }
  .tabela-recorrentes td,
  .tabela-parcelamentos td{ overflow:hidden; }
  /* A descricao e o unico texto livre: quebra normal, sem partir palavra no meio
     ("investiment/o"), e trunca com o texto inteiro no title. */
  .tabela-recorrentes td.celula-principal,
  .tabela-parcelamentos td.celula-principal{ min-width:0; overflow-wrap:break-word; hyphens:auto; }
}

/* Formulario compacto de edicao de valor de uma parcela, embutido na tabela do cronograma. */
.form-parcela{ display:flex; gap:var(--esp-2); align-items:center; flex-wrap:wrap; }
.form-parcela input[type="text"]{ max-width:140px; }

/* Bloco "Gerar lançamentos previstos do mês" (ajuste 5 do Lucas, 05/09): menor, abaixo
   da lista, com a ultima geracao e mes/ano em portugues. */
.card-gerar-previstos{ padding-top:0.85rem; padding-bottom:0.85rem; }
.card-gerar-previstos::before{ background:var(--line); }
.card-gerar-previstos h2{ font-size:var(--texto-md); }
.card-gerar-previstos > .texto-apoio{ margin-top:0; }
.gerar-previstos-ultima{ margin:0.5rem 0 0; font-size:var(--texto-sm); color:var(--muted); }
.gerar-previstos-ultima strong{ color:var(--muted); }
.form-gerar-previstos{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:0.6rem;
  margin-top:0.75rem;
}
.form-gerar-previstos .campo{ flex:1 1 120px; }
.form-gerar-previstos .botao{ flex:1 1 100%; }
@media (min-width:640px){
  .form-gerar-previstos .campo{ flex:0 1 160px; }
  .form-gerar-previstos .botao{ flex:0 0 auto; }
}

/* == gastos == */
/* #116: o caminho até Lançamentos, que saiu do menu. */
.gastos-link-lancamentos{ margin-top:var(--esp-3); }
.hero-rotulo-apoio{ font-weight:400; color:var(--muted); }
.gastos-filtros{ display:flex; flex-direction:column; gap:0.6rem; margin-bottom:0.25rem; }

/* Ajuste 3 do Lucas (05/09): a lista de categorias e o conteudo principal; o grafico
   e um 
 recolhido no celular e um bloco compacto e fixo ao lado no desktop.
   Altura calculada por gastos.js conforme o numero de categorias. */
.gastos-corpo{ display:flex; flex-direction:column; gap:var(--esp-3); }
.gastos-grafico{
  order:-1;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 0.75rem;
}
.gastos-grafico > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:var(--esp-2);
  min-height:var(--alvo-toque);
  font-size:var(--texto-sm);
  font-weight:600;
  color:var(--muted);
}
.gastos-grafico > summary::-webkit-details-marker{ display:none; }
.gastos-grafico > summary .icone{ width:18px; height:18px; }
.gastos-grafico[open] > summary{ color:var(--ink); }
.gastos-grafico .grafico-legenda{ padding-bottom:0.6rem; }
.gastos-grafico-envelope{ position:relative; width:100%; min-height:160px; }

.lista-categorias-gasto{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--esp-2); }
.categoria-gasto-link{
  display:block;
  padding:0.65rem 0.8rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:inherit;
  text-decoration:none;
  transition:border-color var(--dur-rapida) var(--ease);
}
.categoria-gasto-link:hover{ border-color:var(--muted); text-decoration:none; }
.categoria-gasto-item-ativo .categoria-gasto-link{
  border-color:var(--prumo);
  background:var(--prumo-soft);
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.categoria-gasto-cabecalho{ display:flex; align-items:baseline; gap:var(--esp-2); font-weight:var(--peso-medio); }
.categoria-gasto-nome{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.categoria-gasto-valor{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.categoria-gasto-seta{ align-self:center; color:var(--muted-2); }
.categoria-gasto-seta .icone{ width:16px; height:16px; transition:transform var(--dur-rapida) var(--ease); }
.categoria-gasto-item-ativo .categoria-gasto-seta .icone{ transform:rotate(180deg); color:var(--prumo); }
.categoria-gasto-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem 0.45rem; margin-top:0.35rem; font-size:var(--texto-xs); }
.categoria-gasto-delta{ color:var(--muted); }
.categoria-gasto-delta-alta{ color:var(--amber); }
.categoria-gasto-delta-baixa{ color:var(--prumo); }

/* Drill-down inline: colado embaixo do item ativo, mesma borda verde. */
.categoria-gasto-drilldown{
  border:1px solid var(--prumo);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  padding:0.6rem 0.8rem 0.75rem;
  background:var(--bg-2);
}
.categoria-gasto-drilldown-cabecalho{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--esp-2); }
.categoria-gasto-drilldown-titulo{ margin:0; font-size:var(--texto-sm); color:var(--ink); }
.categoria-gasto-drilldown .texto-apoio{ margin-top:0.1rem; }
.categoria-gasto-drilldown .tabela{ margin-top:0.5rem; font-size:var(--texto-sm); }
.categoria-gasto-fechar{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  margin-top:0.35rem;
  font-size:var(--texto-sm);
  font-weight:600;
}

.card-investido .card-titulo{ margin-bottom:0.25rem; }
/* Previa da estimativa do mes (#85) e bloco da fatura ainda nao aberta (B9). */
.card-previa-baseline .alerta{ margin:0 0 var(--esp-2); }
.card-previa-baseline .lista-linhas li > span{ min-width:0; overflow-wrap:anywhere; }
.card-previa-baseline .lista-linhas-apoio{ display:block; white-space:normal; }
.card-previa-baseline .form-acoes{ margin-top:var(--esp-4); }
.card-fatura-agregada .card-titulo{ margin-bottom:var(--esp-1); }

@media (min-width:1024px){
  .gastos-corpo{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    gap:1.25rem;
    align-items:start;
  }
  .gastos-grafico{
    order:0;
    position:sticky;
    top:calc(var(--topbar-altura) + 1rem);
    padding:0.5rem 0.75rem 0.25rem;
  }
  .gastos-grafico > summary{ display:none; }
}
/* == classificar == */
/* Mesma gramática de triagem de /revisao: .grupo-revisao-*, .item-revisao-*, .revisao-topo,
   .revisao-grupos, .card-triagem, .card-vazio-festa, .chips-filtro moram em app.css. */
.subtitulo-bloco{ font-size:var(--texto-md); margin:0 0 0.15rem; }
.bloco-identificar, .bloco-outros{ display:flex; flex-direction:column; gap:var(--esp-4); }
.bloco-outros{ margin-top:var(--esp-5); }
.revisao-grupos-lista{ display:flex; flex-direction:column; gap:var(--esp-4); }
.card-triagem .chips-filtro + .chips-filtro{ margin-top:var(--esp-2); }
.form-categoria-grupo .campo{ flex:1 1 160px; margin:0; }
.form-categoria-grupo select,
.form-categoria-grupo input[type="text"]{ width:100%; }
.form-categoria-grupo .botao-primario{ flex:0 0 auto; }
.classificar-retro{ display:block; margin-top:var(--esp-3); }
.classificar-retro .botao{ white-space:normal; text-align:left; max-width:100%; }
.chips-mais{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--esp-2); }
.chips-mais > summary{ min-height:var(--alvo-toque); }
/* Lote (#85): o select de categoria mora no cartao fechado; o formulario unico fica preso
   ao pe da tela (acima da barra inferior no celular), sem sombra — superficie + linha.
   Nao reusa .form-rodape (app.css): aquele e sticky DENTRO do card do formulario e so
   gruda enquanto o card e alto; aqui o formulario e um card proprio sob #conteudo, e e o
   miolo inteiro (a lista de cartoes) que precisa rolar por baixo dele. */
.grupo-lote{ margin-top:var(--esp-3); }
.grupo-lote-pista{ margin:0 0 var(--esp-2); font-size:var(--texto-sm); color:var(--muted); overflow-wrap:anywhere; }
.grupo-lote-pista .badge{ vertical-align:middle; }
.grupo-lote select{ width:100%; min-width:0; }
.grupo-lote + .grupo-revisao-itens,
.grupo-sem-comerciante + .grupo-revisao-itens{ margin-top:var(--esp-1); }
.grupo-sem-comerciante{ margin:var(--esp-3) 0 0; }
.classificar-lote{
  position:sticky;
  bottom:calc(var(--bottombar-altura) + var(--esp-2) + env(safe-area-inset-bottom, 0px));
  z-index:var(--z-flutuante);
  display:flex;
  flex-direction:column;
  gap:var(--esp-2);
  margin-top:var(--esp-4);
  border-color:var(--borda-campo);
}
/* No celular a barra presa cobre a lista: fica so o botao; a frase volta a partir de 640. */
.classificar-lote-texto{ display:none; margin:0; font-size:var(--texto-sm); color:var(--muted); }
.classificar-lote .botao{ width:100%; }
@media (min-width:640px){
  .classificar-lote-texto{ display:block; }
  .classificar-lote{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--esp-4); }
  .classificar-lote .botao{ width:auto; flex:0 0 auto; }
}
@media (min-width:1024px){
  .classificar-lote{ bottom:var(--esp-4); }
}
.card-micro-vazamentos .card-titulo{ display:flex; align-items:center; gap:0.4rem; }
.card-micro-vazamentos .card-titulo .icone{ width:20px; height:20px; color:var(--amber); }
/* == configuracoes == */
/* Parametros (auditoria configuracoes-parametros #1, #6, #9). A chave crua do banco saiu
   do texto visivel: o que se le e o rotulo humano, e a chave vive em  atras de
   "nome tecnico", junto da descricao que vem do servico. */
.parametro-usado{ font-size:var(--texto-xs); color:var(--muted); }
.parametro-tecnico{ margin-top:0.15rem; }
.parametro-tecnico > summary{ font-size:var(--texto-xs); }
.parametro-tecnico code{
  font-family:var(--font-mono);
  font-size:var(--texto-xs);
  color:var(--muted-2);
  overflow-wrap:anywhere;
}
/* A linha do parametro fixo tem so rotulo + valor + cadeado: o 
 da chave nao
   pode empurrar a coluna do valor. */
.parametro-fixo .parametro-texto{ min-width:0; }
.parametro-descricao{ font-size:var(--texto-xs); color:var(--muted); }

/* Linha de link para /alertas (B13): e outra tela, nao uma aba. */
.config-alertas{ margin:var(--esp-2) 0 var(--esp-4); }

/* == login == */
/* U16: a tela de entrada nao tinha marca nenhuma. O logo fica ACIMA do card, que
   continua sendo o unico foco da tela. */
.login-moldura{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--esp-4);
  width:100%;
  max-width:380px;
  margin:0 auto;
}
.login-marca{ display:flex; align-items:center; gap:var(--esp-2); }
.login-marca-nome{ font-size:var(--texto-lg); font-weight:800; letter-spacing:-0.01em; }
.login-moldura .card-login{ width:100%; margin:0; }

/* == so-pelo-agente == */
/* Front enxuto (#116, D57): aviso no topo do painel depois de uma rota que saiu da tela, e
   a linha que fica no lugar de uma ação nas telas só leitura. Informação, não erro: azul. */
.so-pelo-agente-aviso{ background:var(--blue-soft); color:var(--ink); border-left:3px solid var(--blue); }
.so-pelo-agente-nota{ margin-top:var(--esp-2); }
.so-pelo-agente-pagina h2{ margin:var(--esp-2) 0 0; }

/* == em-breve == */
/* O card e uma coluna flex: sem isto o badge estica na largura toda. */
.card-em-breve .badge{ align-self:flex-start; }

/* == erro == */
/* Auditoria erro-404 #4: o codigo vinha antes do titulo na ordem do DOM, e o leitor de
   tela lia "404" sem saber do que se tratava. No DOM o titulo vem primeiro; o codigo
   volta para cima visualmente, como decoracao (aria-hidden no template). */
.card-erro{ display:flex; flex-direction:column; }
.card-erro .erro-codigo{ order:-1; }

/* == importar == */
/* Tela /importar (Sprint 2, D28). So classes proprias desta tela: nada aqui redefine
   .card, .tabela, .badge ou .alerta de app.css — a .tabela ja vira cartoes abaixo de
   640px sozinha, entao a lista da previa nao precisa de layout mobile proprio. */

/* Linha a linha da previa (issue #66). Acima de 640px a tabela tem layout fixo e cada
   coluna uma largura conhecida (), para os selects de natureza e ambito nunca
   ficarem mais estreitos que o texto ("Transfe", "Operaci"); a descricao fica com o que
   sobra. Cabe em 1280px com a barra lateral aberta; abaixo disso rola dentro do
   .tabela-scroll. Abaixo de 640px o app.css transforma a tabela em cartoes e os campos
   ocupam a largura toda. */
@media (min-width:640px){
  .linhas-importacao{ min-width:930px; table-layout:fixed; }
  .linhas-importacao th{ white-space:nowrap; }
  .importar-col-marcar{ width:36px; }
  .importar-col-data{ width:100px; } /* "01/08/2026" a 0.9rem + padding: 88px (issue #70) */
  .importar-col-valor{ width:100px; }
  .importar-col-acao{ width:150px; }
  .importar-col-categoria{ width:150px; } /* select de categoria + select de cliente (issue #75) */
  .importar-col-natureza{ width:170px; } /* rotulos explicados, ex. "Operacional (venda/serviço)" */
  .importar-col-ambito{ width:70px; }
  .importar-cel-data{ white-space:nowrap; font-variant-numeric:tabular-nums; }
  /* Nada de uma celula invade a vizinha (issue #75, item 3): o que nao couber quebra
     dentro da propria coluna. */
  .linhas-importacao td{ overflow:hidden; }
}
.linhas-importacao th,
.linhas-importacao td{ padding:0.5rem 0.4rem; vertical-align:top; }
.linhas-importacao input[type="text"],
.linhas-importacao select{
  min-width:0;
  width:100%;
  min-height:36px;
  font-size:var(--texto-sm);
  padding:0.3rem 0.45rem;
}
.linhas-importacao select{ text-overflow:ellipsis; }
.linhas-importacao input[type="checkbox"]{ width:1.15rem; height:1.15rem; }
.linhas-importacao .texto-apoio{ display:block; margin-top:0.15rem; }
.linhas-importacao .badge{ margin-right:0.3rem; margin-bottom:0.2rem; }
/* (0,2,0) para vencer o `.tabela td{ white-space:normal }` dos cartões do celular. */
.linhas-importacao .importar-cel-valor{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Descricao em hierarquia: nome do favorecido/estabelecimento em destaque, a operacao
   ("Transferência recebida pelo Pix") como apoio e CNPJ/banco/agencia/conta atras de um
   toggle — nada se perde (o texto bruto tambem esta no title). */
.importar-descricao-principal{
  display:block;
  font-weight:600;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.importar-cel-descricao .texto-apoio{ margin-top:0.1rem; }
.importar-descricao-detalhe{ margin-top:0.2rem; font-size:var(--texto-xs); }
.importar-descricao-detalhe summary{
  cursor:pointer;
  color:var(--blue);
  list-style:none;
  padding:0.2rem 0;
}
.importar-descricao-detalhe summary::-webkit-details-marker{ display:none; }
.importar-descricao-detalhe summary:hover{ text-decoration:underline; }
.importar-descricao-detalhe span{ display:block; color:var(--muted); overflow-wrap:anywhere; }

@media (max-width:639.98px){
  /* Nos cartoes do celular, descricao, acao e campos ficam com o rotulo em cima e o
     conteudo em largura total (o padrao do app.css poe rotulo e valor lado a lado). */
  .linhas-importacao td.importar-cel-descricao,
  .linhas-importacao td.importar-cel-acao,
  .linhas-importacao td.importar-cel-campo{
    flex-direction:column;
    align-items:stretch;
    text-align:left;
  }
  .linhas-importacao td.importar-cel-descricao::before,
  .linhas-importacao td.importar-cel-acao::before,
  .linhas-importacao td.importar-cel-campo::before{ margin-bottom:0.2rem; }
  .linhas-importacao input[type="text"],
  .linhas-importacao select{ min-height:var(--alvo-toque); font-size:var(--texto-md); }
  .linhas-importacao input[type="checkbox"]{ width:1.5rem; height:1.5rem; }
}

/* Linha ja importada antes: presente para conferencia, mas fora da decisao. */
.linha-repetida{ opacity:0.55; }

/* Linha em competencia fechada (issue #70): vem desmarcada e com selo vermelho; a
   linha inteira fica um pouco apagada para o olho pular direto para o que esta aberto. */
.linha-fechada .importar-cel-descricao,
.linha-fechada .importar-cel-valor,
.linha-fechada .importar-cel-data{ opacity:0.7; }

/* "Por quê?" (issue #70, item 4): motivo e observacao saem do fluxo da tabela e ficam
   atras de um 
, no mesmo desenho do "Ver dados completos" da descricao. */
.importar-motivo{ margin-top:0.2rem; font-size:var(--texto-xs); }
.importar-motivo summary{
  cursor:pointer;
  color:var(--blue);
  list-style:none;
  padding:0.2rem 0;
}
.importar-motivo summary::-webkit-details-marker{ display:none; }
.importar-motivo summary:hover{ text-decoration:underline; }
.importar-motivo span{ display:block; color:var(--muted); overflow-wrap:anywhere; }
.importar-motivo span + span{ margin-top:0.15rem; }

/* Origem da sugestao de categoria (issue #70, item 2). */
.importar-origem{ font-size:var(--texto-xs); color:var(--muted); }

/* Select de cliente embaixo da categoria nas linhas de receita (issue #75, item 2), com
   um rotulo curto porque o cabecalho da coluna diz so "Categoria". */
.importar-rotulo-campo{
  display:block;
  margin:0.45rem 0 0.15rem;
  font-size:var(--texto-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--muted);
}

/* Dica "cadastrar cliente" (issue #75, item 3): nos cartoes do celular e um texto curto
   embaixo do campo; a partir de 641px vira um "?" com o texto no title, para nao alongar
   a linha nem invadir a coluna vizinha. O texto continua no DOM (leitor de tela). */
.importar-dica{
  display:block;
  margin-top:0.3rem;
  font-size:var(--texto-xs);
  line-height:1.4;
  color:var(--amber);
  overflow-wrap:anywhere;
}
.importar-dica-icone{
  display:none;
  align-items:center;
  justify-content:center;
  width:1.25rem;
  height:1.25rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--amber);
  font-size:var(--texto-xs);
  font-weight:800;
  line-height:1;
  cursor:help;
}
@media (min-width:640px){
  .importar-dica{ display:inline-flex; }
  .importar-dica-icone{ display:inline-flex; }
  .importar-dica-texto{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
}

/* Links de "Reabrir " dentro do aviso de competencia fechada. */
.importar-alerta-links{ display:inline-flex; flex-wrap:wrap; gap:0.25rem 0.75rem; margin-left:0.25rem; }
.importar-alerta-links a{ font-weight:600; text-decoration:underline; }

/* Filtro "só o que precisa de mim" (issue #70, item 3): .interruptor mora em app.css. */
.importar-filtro{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.4rem 1rem;
  margin:0.6rem 0 0.2rem;
}
.importar-filtro-contagem{ margin:0; font-size:var(--texto-sm); color:var(--muted); }
.importar-filtro-contagem strong{ color:var(--ink); }
/* Com o filtro ligado, as linhas resolvidas somem da tela (continuam no formulario). */
.importar-so-atencao .linhas-importacao tr[data-atencao="resolvida"]{ display:none; }
.importar-filtro-nota{ display:none; }
.importar-so-atencao .importar-filtro-nota{ display:block; }

/* Entrada de dinheiro na previa, para o sinal aparecer sem depender so do texto. */
.valor-entrada{ color:var(--prumo); }

/* Barra de confirmacao no fim da previa (fora do .card, colada na lista). Confirmar e
   o unico primario da tela; Cancelar fica ao lado dele, secundario (issue #70, item 4).
   No celular o Confirmar ocupa a largura toda. */
.acoes-importar{ margin:0 0 1.5rem; }
.acoes-importar .botao-primario{ flex:1 1 100%; }
.acoes-importar .texto-apoio{ flex-basis:100%; margin:0; }
.acoes-importar .texto-apoio a{ text-decoration:underline; }
@media (min-width:640px){
  .acoes-importar .botao-primario{ flex:0 0 auto; }
}

/* Etapas (issue #66): .passos mora em app.css; aqui só o envelope com a nota à direita. */
/* Moldura do indicador de etapas (.passos, app.css §6.5). Compartilhada por importar,
   fiscal e patrimonio: vive aqui porque app.css esta congelado nesta frente — o lugar
   dela e app.css, junto de .passos (anotado no relatorio). */
/* Controle de arquivo em PT-BR (auditoria importar #2): o  nativo
   escreve "Choose File / No file chosen" no idioma do navegador e tem ~28px de altura.
   O input fica visualmente oculto e quem aparece e o