/*
 * Os favorecidos — para quem foi e de quem veio o dinheiro
 * (docs/PLANEJAMENTO-FAVORECIDOS.md). Na Fase 59, o "Para quem" da barra de
 * lote da lista de lançamentos; na 60, a página dos favorecidos, os cartões e
 * os cinco maiores do painel do perfil.
 *
 * Mora aqui o que só os favorecidos desenham. Cor, espaço, cartão, botão,
 * etiqueta e formulário vêm de `application.css`, pelos tokens e pelas classes
 * que já existem — este arquivo não redefine nenhum deles.
 */

/* O campo de texto solto na barra ocupava a linha inteira, e o "Aplicar" e o
   "Excluir" caíam para a linha de baixo. Fica da largura do seletor de
   categoria ao lado (`.lote .combo`), e encolhe no celular. */
.lote__favorecido { flex: 0 1 14rem; width: 14rem; min-width: 0; }

/* ---------- A página "Favorecidos" (Fase 60) ---------- */

/* O sentido (para onde foi, de onde veio) à esquerda e o período à direita; no
   celular, um embaixo do outro. */
.favorecidos__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.favorecidos__barra .atalhos-de-filtro { margin-bottom: 0; }

.favorecidos__filtros { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* "Sem favorecido": o que falta identificar, antes dos cartões. A faixa lateral
   é a do aviso (`cartao--atencao`), porque é trabalho a fazer. */
.favorecidos__sem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  border-left: 3px solid var(--aviso);
  margin-bottom: 1.35rem;
}
.favorecidos__sem .cartao__apoio { margin: 0; }

/* Os cartões: o nome em cima, o total em destaque, e embaixo quantos e o
   último. O cartão inteiro é o link para o extrato. */
.favorecidos {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.favorecidos li { display: flex; min-width: 0; }

.favorecido {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
}
.favorecido:hover { border-color: var(--acento); color: var(--ink); }
.favorecido__nome {
  font-weight: 600;
  overflow-wrap: anywhere;
  /* Dois nomes de tamanhos diferentes não desalinham o total dos vizinhos. */
  min-height: 2.6em;
}
.favorecido__total {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.favorecido__meta { font-size: .8125rem; color: var(--ink-fraco); }

/* A frase "Favorecido: João" no alto da lista que é o extrato dele. */
.favorecidos__recorte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.25rem;
  margin: 0 0 1rem;
  font-size: .9375rem;
}
/* O nome do banco vem sem espaços ("PIX_ABC…"): sem quebrar, a página rola de lado no celular. */
.favorecidos__recorte strong,
.pagina__subtitulo { overflow-wrap: anywhere; }

/* Os cinco maiores do painel do perfil. Cada linha é um link: o nome à
   esquerda, quantos embaixo dele, o total à direita. */
.favorecidos-top { list-style: none; margin: 0; padding: 0; }
.favorecidos-top li + li { border-top: 1px solid var(--line); }
.favorecidos-top__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nome total" "meta total";
  column-gap: 1rem;
  align-items: center;
  padding: .6rem 0;
  text-decoration: none;
  color: var(--ink);
}
.favorecidos-top__linha:hover .favorecidos-top__nome { color: var(--acento); }
.favorecidos-top__nome { grid-area: nome; font-weight: 500; overflow-wrap: anywhere; }
.favorecidos-top__meta { grid-area: meta; font-size: .8125rem; color: var(--ink-fraco); }
.favorecidos-top__total { grid-area: total; font-variant-numeric: tabular-nums; white-space: nowrap; }