/* ===== 09-agenda-e-resumo.css — ponto no mapa, página pública, recusa, agenda e linha do tempo, resumo =====
   Fatia do antigo app.css (09/08/2026). O NÚMERO NO NOME É A POSIÇÃO NA CASCATA: é a ordem
   dos <link> no index.html, e trocá-la muda quem vence. Regra e política em 01-base.css. */

/* Bloco "ponto no mapa" (<PontoGps>) — mora aqui, e não numa página, porque é o mesmo bloco no sheet
   das duas listas de endereço, no formulário do endereço e no sheet da Agenda. Herda o gap do
   .acoes-lista quando está dentro de um sheet; o gap próprio é para o formulário, onde ele é um
   bloco solto entre campos. */
.ponto-gps { display: flex; flex-direction: column; gap: .5rem; }

.ponto-gps-titulo { font-size: .85rem; font-weight: 600; }

/* A linha de estado é o que a tela ganhou: ela responde "a rota cai na porta?" sem exigir um toque.
   Ícone alinhado ao topo (não centralizado) porque o texto quebra em duas linhas no celular. */
.ponto-gps-status {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    font-size: .85rem;
    line-height: 1.35;
}

.ponto-gps-status .icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .1rem; }
.ponto-gps-status.is-marcado { color: var(--ok); font-weight: 600; }
.ponto-gps-status.is-vazio { color: var(--muted); }

/* Item de lista clicável do EntityPicker — reset de botão sobre .cliente-card */
.picker-item {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: #fff;
    cursor: pointer;
}

.picker-item:active { background: var(--brand-tint); }

/* Ícone dentro de botões de texto (.btn-secondary usado como gatilho de sheet) */
.btn-secondary .icon { width: 1.1rem; height: 1.1rem; margin-right: .4rem; }

/* Página pública do orçamento (S5) — botões empilhados e grandes (uso em campo, sem o prestador
   por perto pra ajudar), Aprovar/Recusar com o mesmo peso visual. */
.publico-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.25rem;
}

/* Resultado da resposta do cliente final (aprovou/recusou) — neutro de propósito, não usa verde/
   vermelho de sucesso-erro porque recusar é uma resposta válida, não uma falha. */
.resultado-alert {
    margin-top: 1.25rem;
    padding: .85rem .9rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--bg);
    color: var(--ink);
    font-weight: 600;
}

.resultado-alert:focus { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Comentário que o cliente final deixou ao recusar (S5) — quadro próprio, não um parágrafo solto
   no topo da tela: é fala de terceiro e precisa se ler como citação, não como aviso do sistema.
   Filete vermelho à esquerda amarra com o badge "Recusado" sem gritar como erro (recusar é uma
   resposta válida). Serve tanto no formulário quanto dentro do BottomSheet da lista. */
.motivo-recusa {
    margin: 0 0 1rem;
    padding: .7rem .85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--danger);
    border-radius: .7rem;
}

.motivo-recusa-label {
    display: block;
    margin-bottom: .2rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
}

.motivo-recusa-texto { margin: 0; color: var(--ink); }

/* Variante dentro do card da lista — o card já é branco, então o quadro se destaca pelo fundo
   cinza; texto cortado em 2 linhas para um comentário longo não esticar o card (a lista é
   varredura; o motivo inteiro fica na tela do orçamento). */
.motivo-recusa-inline {
    margin: 0;
    padding: .5rem .65rem;
    background: var(--bg);
    font-size: .85rem;
}

.motivo-recusa-inline .motivo-recusa-texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Na tela do orçamento o texto é integral, mas cortado em 4 linhas até o "Ver tudo" — um
   comentário no teto de 500 caracteres empurraria o formulário todo para fora da tela. */
.motivo-recusa-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.motivo-recusa-toggle {
    min-height: 44px;              /* alvo de toque — uso em campo, uma mão só */
    margin-top: .1rem;
    padding: 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand-dark);
    background: transparent;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}
/* ============================================================
   Timeline arrastável da aba "Hoje" da Agenda (dragTimeline.js)
   ============================================================ */

/* Linha do filtro com controles à direita: o filtro colapsável ocupa a largura e o que o acompanha
   (o alternador Lista/Linha do tempo na aba Hoje da Agenda; o "Atualizar lista" na Agenda e nas OS)
   entra à direita na MESMA linha — antes o alternador era uma 2ª faixa de botões logo abaixo,
   empurrando o dia pra baixo. flex-start pra os controles ficarem alinhados ao cabeçalho do filtro
   mesmo quando o painel do filtro abre e cresce pra baixo. A margem inferior que era do
   .filtro-colapsavel passa pra cá. Nasceu na Agenda (.agenda-filtro-row) e virou genérica quando a
   lista de OS ganhou o mesmo botão — a regra nunca teve nada de Agenda. */
.lista-filtro-row {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-bottom: .75rem;
}

.lista-filtro-row .filtro-colapsavel {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* O botão de atualizar acompanha a altura do cabeçalho do filtro, pra os dois lerem como pares na
   linha (mesma intenção do alternador de exibição abaixo). */
.lista-filtro-row > .icon-btn { align-self: stretch; }

/* Alternador de exibição (Lista / Linha do tempo) — pílula segmentada com a mesma altura e borda do
   cabeçalho do filtro fechado, pra os dois controles lerem como pares na linha. */
.agenda-view-toggle-inline {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--bg);
    overflow: hidden;
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: none;
    cursor: pointer;
}

.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--line); }
.view-toggle-btn .icon { width: 1.2rem; height: 1.2rem; }
.view-toggle-btn.is-active { color: var(--brand-dark); background: var(--brand-tint); }
.view-toggle-btn:active { background: var(--bg); }

/* Ordenação da lista (BotaoOrdenar) — terceiro acompanhante da .lista-filtro-row, ao lado do
   "Atualizar" e do alternador acima. Mora aqui, e não no 05-filtro.css, porque NÃO é peça do filtro:
   ordenar não recorta — não esconde registro nenhum —, então não pertence ao painel cujo trabalho é
   avisar o que sumiu da lista. É a mesma razão pela qual o FiltroResumoTexto() continua escrevendo
   só "Filtrar": quem diz qual ordem está ativa é este botão.

   Tamanho FIXO, e a ordem ativa dita por ÍCONE (OrdemDeLista.IconeCampo + IconeSentido), nunca por
   rótulo de texto. Um rótulo fazia o botão crescer conforme a escolha: "Mais antigos primeiro"
   roubava largura do cabeçalho do filtro ao lado (que é quem tem min-width: 0 e encolhe primeiro),
   saía truncado em reticências, e ainda movia a tela debaixo do dedo a cada troca. Os dois ícones
   (campo + sentido) cabem numa largura que não muda com a escolha, então o problema não volta. A cor
   de marca é o que continua dizendo "há uma ordem escolhida" sem abrir nada; o nome por extenso vive
   no aria-label e no sheet.

   Altura fixa (não align-self: stretch como o .icon-btn) pelo mesmo motivo do
   .agenda-view-toggle-inline: com o painel do filtro aberto o cabeçalho cresce pra baixo, e o botão
   tem de continuar do tamanho do cabeçalho FECHADO. */
.btn-ordenar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    flex-shrink: 0;
    width: 62px;
    height: 44px;
    padding: 0;
    color: var(--muted);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: .7rem;
    cursor: pointer;
}

.btn-ordenar .icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.btn-ordenar:active { background: var(--brand-tint); }
.btn-ordenar.is-ativo { color: #fff; background: var(--brand); border-color: var(--brand); }
.btn-ordenar.is-ativo:active { background: var(--brand-dark); }

/* Opções dentro do sheet "Ordenar por". Lista de botões, e não o EntityPicker: o picker escolhe um
   item de uma lista que ele não conhece e não marca o que já está ativo — aqui a ordem corrente
   precisa se ver, porque não há campo nenhum na tela mostrando qual é.

   Cada linha traz o PAR de ícones do critério (campo + sentido) à esquerda do nome. É aqui que se
   aprende o que eles querem dizer no botão da lista, onde aparecem sem legenda nenhuma — sem isto
   seriam dois símbolos que ninguém tem onde decifrar. */
.opcao-ordem {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 48px;
    padding: .6rem .8rem;
    font-size: 1rem;
    text-align: left;
    color: var(--ink);
    background: transparent;
    border: none;
    border-radius: .55rem;
    cursor: pointer;
}

.opcao-ordem + .opcao-ordem { margin-top: .15rem; }
.opcao-ordem:active { background: var(--brand-tint); }
.opcao-ordem .icon { width: 1.2rem; height: 1.2rem; flex-shrink: 0; color: var(--muted); }

/* Campo e sentido são UM símbolo em duas partes: ficam mais perto entre si do que do nome ao lado. */
.opcao-ordem .icon + .icon { margin-left: -.3rem; }
.opcao-ordem-nome { flex: 1; }
.opcao-ordem.is-selected { font-weight: 600; color: var(--brand-dark); background: var(--brand-tint); }
.opcao-ordem.is-selected .icon { color: var(--brand); }

/* Painel do filtro SOLTO DA LINHA, mas GRUDADO NO CABEÇALHO — desce abaixo da linha inteira, em
   largura total, nas listas que têm o botão de ordenar ao lado do cabeçalho.

   Dentro da .lista-filtro-row o painel era um item flex ao lado do botão: nunca alcançava a largura
   toda (os campos De/Até ficavam espremidos numa coluna de ~60% a 390px) e deixava um vão morto à
   direita, embaixo do botão. Tirá-lo da linha resolveu a largura mas criou o problema oposto — dois
   cartões separados, e o corpo do filtro lido como um bloco sem dono.

   A costura são quatro peças: (a) a linha cede a margem de baixo e ainda sobe o painel 1px, para o
   topo dele cair EM CIMA da última linha de pixel do cabeçalho; (b) o cabeçalho perde a borda e o
   raio de baixo e ganha um padding que o estica até encostar no painel; (c) o cabeçalho passa a
   pintar por cima (position + z-index) — como o fundo dos dois é o mesmo var(--bg), a borda de topo
   do painel SOME no trecho que ele cobre, e o que sobra à vista é só o pedaço que passa por baixo do
   botão de ordenar; (d) o painel mantém o canto superior esquerdo reto, para a borda esquerda descer
   contínua do cabeçalho para dentro dele.

   É o (c) que dá a continuidade: sem ele fica uma linha atravessada entre o "Filtrar" e o corpo, e os
   dois voltam a ler como duas caixas. Tirar a borda de topo do painel em vez de escondê-la não serve
   — ela é o que fecha o desenho no trecho do botão, e sem ela o canto superior direito fica aberto.
   O resultado é UM cartão com um degrau à direita (o painel é mais largo que o cabeçalho, como todo
   menu é mais largo que o gatilho), e o botão de ordenar — 44px de altura, alinhado ao topo — como
   única peça solta na tela, que é o que se queria.

   As listas sem botão de ordenar (Agenda, Histórico, cadastros) seguem com o painel encaixado dentro
   do .filtro-colapsavel — por isso tudo aqui é acrescentado por classe, e nada muda no .filtro-painel
   nem no .filtro-colapsavel de origem. */
.lista-filtro-row.is-filtro-aberto { margin-bottom: -1px; }

.lista-filtro-row.is-filtro-aberto .filtro-colapsavel {
    position: relative;
    z-index: 1;
    padding-bottom: .45rem;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.filtro-painel-solto {
    padding-top: .75rem;
    margin-bottom: .75rem;
    border: 1px solid var(--line);
    border-radius: 0 .7rem .7rem .7rem;
    background: var(--bg);
}

/* Rota do dia (aba Hoje): botão de página acima da lista — só respiro; o botão em si é o
   .btn-secondary.btn-block de sempre. */
.rota-dia { margin: 0 0 .75rem; }
.rota-dia .hint { margin: .25rem 0 0; }

/* Barra "A confirmar" (Agenda) — o cutucão de confirmação da véspera. O chip é um filtro (vocabulário
   de seleção do app: neutro, e brand quando ligado); o ícone puxa o âmbar do badge "A confirmar". A
   ação abre a sequência guiada e cresce para ocupar a linha. */
.confirmar-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .7rem; }
.confirmar-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}
.confirmar-chip .icon { width: 1.05rem; height: 1.05rem; color: var(--wait); }
.confirmar-chip.is-active { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }
.confirmar-chip.is-active .icon { color: var(--brand); }
.confirmar-acao { flex: 1 1 auto; min-width: 11rem; }

/* Linha do cliente no sheet da sequência guiada de confirmação. */
.agenda-seq-cliente { margin: .1rem 0 .35rem; }

/* Área da grade: gutter de 48px à esquerda para os rótulos de hora; blocos posicionados absolutos. */
.agenda-timeline {
    position: relative;
    margin-top: .25rem;
    padding-left: 48px;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: var(--card);
    overflow: hidden;
}

.agenda-timeline-hora {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--line);
    pointer-events: none;
}

.agenda-timeline-hora span {
    position: absolute;
    left: .3rem;
    top: -.55rem;
    font-size: .7rem;
    color: var(--muted);
    background: var(--card);
    padding: 0 .2rem;
}

.agenda-timeline-almoco {
    position: absolute;
    left: 48px;
    right: .4rem;
    background: var(--wait-tint);
    border-radius: .4rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.agenda-timeline-almoco span {
    font-size: .68rem;
    color: var(--wait);
    padding: .1rem .35rem;
    font-weight: 600;
}

.agenda-timeline-bloco {
    position: absolute;
    left: 48px;
    right: .4rem;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--brand-tint);
    border: 1px solid var(--brand);
    border-left: 4px solid var(--brand);
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    transition: top .15s ease, height .15s ease;
    touch-action: pan-y;
}

.agenda-timeline-bloco.is-overflow {
    border-color: var(--wait);
    border-left-color: var(--wait);
}

.agenda-timeline-bloco.arrastando {
    transition: none;
    z-index: 5;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    opacity: .96;
}

.agenda-timeline-bloco.is-focado {
    box-shadow: 0 0 0 3px var(--brand);
}

.agenda-timeline-bloco-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    flex-shrink: 0;
    color: var(--brand-dark);
    background: rgba(0, 0, 0, .04);
    border-right: 1px solid var(--brand);
    cursor: grab;
    /* Bloqueia o scroll da página durante o arrasto por toque (celular). */
    touch-action: none;
}

.agenda-timeline-bloco-grip:active {
    cursor: grabbing;
}

.agenda-timeline-bloco-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .05rem;
    padding: .25rem .45rem;
    line-height: 1.2;
}

.agenda-timeline-bloco-body strong { font-size: .82rem; }
.agenda-timeline-bloco-body span { font-size: .78rem; color: var(--ink-soft); }

.agenda-timeline-bloco .icon-btn {
    align-self: center;
    flex-shrink: 0;
}

/* ==========================================================================
   Fase 3 — Recebimento (S10), Histórico (S11) e Resumo (S12)
   ========================================================================== */

/* Totais em dinheiro logo abaixo do painel de atenção de /recebimentos. Os tiles respondem
   "quantas"; esta linha responde "quanto", que é a pergunta que o prestador faz de verdade. */
.totais-linha {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: 0 0 .75rem;
    font-size: .85rem;
    color: var(--ink-soft);
}

.totais-linha strong { color: var(--ink); }
.totais-linha .totais-alerta,
.totais-linha .totais-alerta strong { color: var(--danger); }

/* Variante não-clicável do attention-tile (Histórico): mesmo bloco visual, sem afordância de
   botão — ali os números são leitura, não filtro. */
.attention-tile.is-static { cursor: default; }

/* Dinheiro não cabe no tamanho do contador de unidades — encolhe a fonte sem mudar o bloco. */
.attention-count-money { font-size: .95rem; }

/* ---- Histórico (S11) ---- */

/* Seletor de cliente do Histórico — é o escopo da tela, não um filtro, então fica fora do
   filtro-colapsável e sempre visível. */
.escopo-barra { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }

/* "Limpar filtro" dentro do filtro-painel: link discreto, alinhado à esquerda. A cor e o sublinhado
   vinham do `.btn-link` do Bootstrap, que o markup carregava junto; com o framework fora, eles
   passam a morar aqui — mesmos valores, para o botão continuar com cara de link e não de texto. */
/* Limpar o filtro é AÇÃO, e ação neste app tem corpo de botão: a versão anterior era um link
   sublinhado de .8rem no #0071c1 herdado do .btn-link do Bootstrap removido — sem alvo de toque
   próprio, sem a cor da marca (destoava em dois dos três temas) e sem parecer clicável no meio de um
   painel que só tem botões. Agora é .btn-secondary .btn-block; o que sobra aqui é só o respiro que o
   separa dos campos acima. */
.filtro-limpar { margin-top: .2rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-ano { list-style: none; }

/* O item inteiro é o link (sem coluna de seta) — ver o comentário em Historico.razor.
   flex-direction: row explícito: .cliente-card é column, e sem isto o marcador ia parar em cima
   do título em vez de ao lado. */
.timeline-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: inherit;
}

/* min-width:0 deixa o truncate-line do título funcionar dentro do flex; flex:1 faz a coluna de
   texto ocupar o resto da linha. .cliente-info é um <span> aqui, então precisa de display. */
.timeline-item .cliente-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }

/* Marcador de tipo à esquerda do card, o "trilho" da linha do tempo. Círculo de contorno em vez
   de preenchido: o card já tem peso visual, o ícone só precisa dizer de que módulo veio. */
.timeline-marcador {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--brand);
}

.timeline-marcador .icon { width: 1.1rem; height: 1.1rem; }

/* Data · valor e o badge na mesma linha, com quebra permitida — o badge deixa de roubar uma
   coluna fixa do título. */
.timeline-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.timeline-meta .muted { font-size: .85rem; }

/* ---- Resumo (S12) ---- */

.mes-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.mes-nav-titulo { margin: 0; font-size: 1rem; font-weight: 700; color: var(--brand-dark); }
.mes-nav .icon-btn:disabled { opacity: .35; }

/* Quebra linha porque o painel do mês passou de dois tiles para três (Recebido, Previsto,
   Serviços): a 390px, três colunas deixam ~7rem para "R$ 1.234,56" em 1.25rem e o valor quebra no
   meio. Com o flex-basis abaixo, cabem dois por linha no celular e os três numa tela larga. */
.resumo-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }

.resumo-tile {
    flex: 1 1 8.5rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .6rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
}

.resumo-tile-destaque { border-color: var(--brand); background: var(--brand-tint); }
.resumo-tile.is-alerta { border-color: var(--danger); }
.resumo-tile.is-alerta .resumo-valor { color: var(--danger); }

.resumo-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }

/* Sobre o fundo tonal do tile de destaque, o --muted cai para ~3.9:1 — abaixo dos 4.5:1 que texto
   pequeno exige (e esta tela é lida no sol). Escurece para --ink-soft só nesse contexto. */
.resumo-tile-destaque .resumo-label,
.resumo-tile-destaque .resumo-sub { color: var(--ink-soft); }
.resumo-valor { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.resumo-sub { font-size: .75rem; color: var(--muted); }

.resumo-bloco { margin-top: 1.1rem; padding-top: .85rem; border-top: 1px dashed var(--line); }
.resumo-bloco-titulo { margin: 0 0 .5rem; font-size: .95rem; font-weight: 700; }
.resumo-funil { margin: 0 0 .25rem; font-size: .9rem; }

/* Lista nome / barra / valor — serve tanto "Como entrou" (formas de pagamento) quanto o funil de
   orçamentos. Os nomes são genéricos de propósito: a estrutura é a mesma e um segundo vocabulário
   para o mesmo componente é como as duas divergem depois. */
.resumo-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.resumo-barras li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.resumo-barra-nome { flex: 0 0 8.5rem; color: var(--ink-soft); }
.resumo-barra-trilho { flex: 1; min-width: 0; height: .45rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.resumo-barra-preenchimento { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.resumo-barra-valor { flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Cores do funil: as mesmas três do resto do app para aprovado/recusado/esperando — a barra é
   aria-hidden e o texto ao lado carrega o significado, então a cor reforça, nunca informa sozinha. */
.resumo-barra-preenchimento.is-aprovado { background: var(--ok); }
.resumo-barra-preenchimento.is-recusado { background: var(--danger); }
.resumo-barra-preenchimento.is-espera { background: var(--wait); }

/* Telas estreitas: o rótulo come a barra — empilha nome/valor e deixa a barra ocupar a linha
   inteira embaixo. */
@media (max-width: 420px) {
    .resumo-barras li { flex-wrap: wrap; }
    .resumo-barra-nome { flex: 1 1 auto; }
    .resumo-barra-trilho { flex: 1 1 100%; order: 3; }
}

/* Aviso de lista filtrada por origem (/recebimentos?origem=…) — sem ele, os contadores e totais do
   painel de atenção pareceriam ser da carteira inteira. */
.filtro-origem {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: baseline;
    margin: 0 0 .5rem;
    padding: .45rem .6rem;
    border-radius: .5rem;
    background: var(--brand-tint);
    color: var(--brand-dark);
}