/*
 * Componentes (um bloco por partial de src/views/partials). Medidas do app (theme.ts e components/)
 * ajustadas ao desktop dos PNGs de docs/design. Cores só por variáveis de tokens.css.
 */

/* ---------- Cor vinda da API (categoria/cartão) ----------
 * O helper `h.estiloCor(hex)` define --cor, --tom-c, --tom-e, --traco-e e --borda-e.
 * Aqui escolhemos a variação do tema atual.
 */
.cor {
  --tom: var(--tom-c);
  --traco: var(--cor);
  --borda-cor: transparent;
}

[data-theme='dark'] .cor {
  --tom: var(--tom-e);
  --traco: var(--traco-e);
  --borda-cor: var(--borda-e);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .cor {
    --tom: var(--tom-e);
    --traco: var(--traco-e);
    --borda-cor: var(--borda-e);
  }

  :root [data-theme='light'] .cor {
    --tom: var(--tom-c);
    --traco: var(--cor);
    --borda-cor: transparent;
  }
}

/* ---------- Ícones ---------- */
.icone {
  flex-shrink: 0;
}

/* ---------- Card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-card);
  padding: 1.25rem;
}

.card--sem-padding {
  padding: 0;
}

.card--lista {
  padding: 0.25rem 1.25rem;
}

a.card:not(.card-valor) {
  display: block;
  color: inherit;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

a.card:hover {
  transform: translateY(-1px);
}

.divisor {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--divisor);
}

/* ---------- Tipografia utilitária ---------- */
.texto-secundario {
  color: var(--texto-secundario);
}

.texto-terciario {
  color: var(--texto-terciario);
}

.legenda {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--texto-secundario);
}

.mini {
  font-size: 0.6875rem;
  line-height: 0.875rem;
  font-weight: 500;
  color: var(--texto-terciario);
}

.tom-perigo {
  color: var(--perigo-texto);
}

.tom-alerta {
  color: var(--alerta-texto);
}

.tom-sucesso {
  color: var(--sucesso-texto);
}

.tom-primaria {
  color: var(--primaria-texto);
}

.tom-investimento {
  color: var(--investimento-texto);
}

.tom-neutro {
  color: var(--texto-secundario);
}

.tom-texto {
  color: var(--texto);
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  background: var(--primaria-botao);
  color: var(--sobre-cor);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--sombra-primaria);
  transition:
    filter 0.15s ease,
    transform 0.1s ease;
}

.botao:hover {
  filter: brightness(1.06);
}

.botao:active {
  transform: scale(0.98);
}

.botao:disabled,
.botao[aria-busy='true'] {
  opacity: 0.7;
  cursor: default;
}

.botao--bloco {
  width: 100%;
}

.botao--secundario {
  background: var(--card);
  border-color: var(--borda);
  color: var(--texto);
  box-shadow: none;
}

.botao--fantasma {
  background: transparent;
  color: var(--texto-secundario);
  box-shadow: none;
}

.botao--perigo {
  background: var(--perigo-botao);
  box-shadow: none;
}

.botao--sucesso {
  background: var(--sucesso-botao);
  box-shadow: none;
}

.botao--alerta {
  background: var(--alerta-botao);
  box-shadow: none;
}

/* Botão branco sobre o degradê (Lançar, no card de saldo). */
.botao--sobre-cor {
  background: var(--sobre-cor);
  color: var(--primaria-botao);
  box-shadow: none;
}

.link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--primaria-texto);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Botão redondo do topo (tema, sino). */
.botao-icone {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--card);
  color: var(--texto);
  box-shadow: var(--sombra-card);
}

.botao-icone--pequeno {
  width: 2.25rem;
  height: 2.25rem;
  box-shadow: none;
}

.botao-icone--controle {
  border-color: transparent;
  background: var(--controle);
  color: var(--texto-secundario);
  box-shadow: none;
}

.contador {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border: 1.5px solid var(--card);
  border-radius: 0.5625rem;
  background: var(--perigo-botao);
  color: var(--sobre-cor);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.contador[hidden] {
  display: none;
}

/* Contador dentro do menu lateral (não flutua). */
.contador--linha {
  position: static;
  min-width: 1.375rem;
  height: 1.125rem;
  border: 0;
}

.ponto {
  position: absolute;
  top: 0.5625rem;
  right: 0.625rem;
  width: 0.5625rem;
  height: 0.5625rem;
  border: 1.5px solid var(--card);
  border-radius: 50%;
  background: var(--perigo);
}

/* ---------- Avatar ---------- */
.avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--tam, 2.5rem);
  height: var(--tam, 2.5rem);
  border-radius: 50%;
  background: var(--cor);
  color: var(--sobre-cor);
  font-size: calc(var(--tam, 2.5rem) * 0.36);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.avatar--inativo {
  background: var(--inativo);
}

/* ---------- Chip ---------- */
.chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--card);
  color: var(--texto);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.chip:hover {
  border-color: var(--primaria-suave);
}

.chip--ativo {
  border-color: var(--primaria);
  background: var(--primaria-clara);
  font-weight: 600;
}

.chip--solido.chip--ativo {
  background: var(--primaria-botao);
  color: var(--sobre-cor);
}

/* Chips do seletor de período: largura fixa de 72 px e texto azul no ativo (02-contas.png). */
.chip--periodo {
  justify-content: center;
  width: 4.5rem;
  padding: 0.375rem;
}

.chip--periodo.chip--ativo {
  color: var(--primaria-texto);
}

.chip__bolinha {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--traco);
  box-shadow: 0 0 0 1px var(--borda-cor);
}

.chip .icone-categoria--simples {
  color: var(--traco);
}

.chip--ativo:not(.chip--solido) > .icone {
  color: var(--primaria-texto);
}

/* ---------- Seletor de período ---------- */
.seletor-periodo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.seletor-periodo__chave {
  display: inline-flex;
  flex-shrink: 0;
  padding: 3px;
  border-radius: var(--raio-pill);
  background: var(--controle);
}

.seletor-periodo__modo {
  display: grid;
  place-items: center;
  min-width: 3.25rem;
  height: 1.875rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--texto-secundario);
  font-size: 0.8125rem;
  font-weight: 500;
}

.seletor-periodo__modo[aria-pressed='true'],
.seletor-periodo__modo[aria-current='true'] {
  background: var(--card);
  color: var(--texto);
  font-weight: 600;
  box-shadow: var(--sombra-card);
}

.seletor-periodo .chips {
  flex: 1;
  min-width: 0;
}

/* ---------- Segmentado ---------- */
.segmentado {
  display: flex;
  padding: 0.25rem;
  border-radius: var(--raio-md);
  background: var(--controle);
}

.segmentado__item {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 1rem;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-secundario);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.segmentado__item[aria-pressed='true'],
.segmentado__item[aria-current='page'] {
  background: var(--segmento-ativo);
  color: var(--cor-ativa, var(--primaria-texto));
  font-weight: 700;
  box-shadow: var(--sombra-card);
}

/* ---------- Etiqueta ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--raio-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
}

.etiqueta--pequena {
  padding: 1px 0.5rem;
  font-size: 0.6875rem;
  line-height: 1rem;
}

.etiqueta--primaria {
  background: var(--primaria-clara);
  color: var(--primaria-texto);
}

.etiqueta--sucesso {
  background: var(--sucesso-claro);
  color: var(--sucesso-texto);
}

.etiqueta--perigo {
  background: var(--perigo-claro);
  color: var(--perigo-texto);
}

.etiqueta--alerta {
  background: var(--alerta-claro);
  color: var(--alerta-texto);
}

.etiqueta--investimento {
  background: var(--investimento-claro);
  color: var(--investimento-texto);
}

.etiqueta--neutro {
  background: var(--controle);
  color: var(--texto-secundario);
}

/* ---------- Círculo de pago ---------- */
.circulo-check {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 2px solid var(--borda-circulo);
  border-radius: 50%;
  background: transparent;
  color: var(--sobre-cor);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.circulo-check:hover {
  border-color: var(--sucesso);
}

.circulo-check--perigo {
  border-color: var(--perigo);
}

.circulo-check--alerta {
  border-color: var(--alerta);
}

.circulo-check[aria-checked='true'] {
  border-color: var(--sucesso);
  background: var(--sucesso);
}

.circulo-check[aria-busy='true'] {
  border-color: var(--primaria-suave);
  border-top-color: var(--primaria);
  animation: girar 0.8s linear infinite;
}

.circulo-check[aria-busy='true'] > * {
  visibility: hidden;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Ícone de categoria / ícone com fundo ---------- */
.icone-categoria,
.icone-fundo {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--tam, 2.5rem);
  height: var(--tam, 2.5rem);
  border-radius: 50%;
}

.icone-categoria {
  background: var(--tom);
  color: var(--traco);
  box-shadow: inset 0 0 0 1px var(--borda-cor);
}

.icone-categoria--quadrado,
.icone-fundo--quadrado {
  border-radius: var(--raio-md);
}

.icone-categoria--simples {
  display: inline-block;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  color: var(--traco);
}

.icone-fundo--primaria {
  background: var(--primaria-clara);
  color: var(--primaria-texto);
}

.icone-fundo--sucesso {
  background: var(--sucesso-claro);
  color: var(--sucesso-texto);
}

.icone-fundo--perigo {
  background: var(--perigo-claro);
  color: var(--perigo-texto);
}

.icone-fundo--alerta {
  background: var(--alerta-claro);
  color: var(--alerta-texto);
}

.icone-fundo--investimento {
  background: var(--investimento-claro);
  color: var(--investimento-texto);
}

.icone-fundo--ciano {
  background: var(--primaria-clara);
  color: var(--ciano-texto);
}

.icone-fundo--neutro {
  background: var(--controle);
  color: var(--texto-secundario);
}

/* ---------- Título de seção ---------- */
.titulo-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.titulo-secao__texto {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.375rem;
}

/* ---------- Card de valor (Início) ---------- */
.card-valor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 6.125rem;
  padding: 1rem 1.125rem;
}

.card-valor__rotulo {
  font-size: 0.8125rem;
  color: var(--texto-secundario);
}

.card-valor__valor {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 2rem;
}

.card-valor__legenda {
  font-size: 0.6875rem;
  color: var(--texto-terciario);
}

.card-valor__icone {
  position: absolute;
  top: 0.875rem;
  right: 1rem;
  --tam: 2.25rem;
}

/* ---------- Barra de categoria ---------- */
.barra-categoria {
  display: grid;
  gap: 0.5rem;
}

.barra-categoria__linha {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.barra-categoria__nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-categoria__valor {
  font-size: 0.9375rem;
  font-weight: 700;
}

.barra-categoria__percentual {
  min-width: 2.5rem;
  font-size: 0.75rem;
  color: var(--texto-secundario);
  text-align: right;
}

.barra-categoria__bolinha {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--traco);
}

.barra-categoria__trilho {
  height: 0.375rem;
  overflow: hidden;
  border-radius: 3px;
  background: var(--controle);
}

.barra-categoria__barra {
  height: 100%;
  border-radius: 3px;
  background: var(--traco);
}

.lista-barras {
  display: grid;
  gap: 1.125rem;
}

/* ---------- Linhas de lista (parcela, fatura, gasto) ---------- */
.lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista > li + li .linha,
.lista > .linha + .linha {
  border-top: 1px solid var(--divisor);
}

.linha {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
  color: inherit;
}

a.linha:hover .linha__titulo {
  color: var(--primaria-texto);
}

.linha__link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  color: inherit;
}

a.linha__link:hover .linha__titulo {
  color: var(--primaria-texto);
}

.linha__meio {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.linha__titulo {
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha__sub {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--texto-secundario);
}

.linha__sub > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha__extras {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2px;
}

.autor {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--texto-terciario);
}

.linha__direita {
  display: grid;
  flex-shrink: 0;
  justify-items: end;
  gap: 2px;
  max-width: 45%;
  text-align: right;
}

.linha__valor {
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}

.linha__situacao {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.linha__selos {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.linha--quitada .linha__titulo,
.linha--quitada .linha__valor {
  color: var(--texto-secundario);
}

.valor--receber {
  color: var(--sucesso-texto);
}

.valor--a-definir {
  color: var(--texto-terciario);
}

.recorrente {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--investimento-texto);
}

/* ---------- Tabela de Contas (02-contas.png) ---------- */
.tabela {
  width: 100%;
  border-collapse: collapse;
}

.tabela th {
  padding: 1rem 0.75rem 0.75rem;
  border-bottom: 1px solid var(--divisor);
  background: var(--fundo);
  color: var(--texto-terciario);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.tabela th:first-child,
.tabela td:first-child {
  padding-left: 1rem;
}

.tabela th:last-child,
.tabela td:last-child {
  padding-right: 1rem;
}

.tabela td {
  height: 4rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--divisor);
  font-size: 0.875rem;
  vertical-align: middle;
}

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

.tabela tbody tr:hover td {
  background: var(--pressionado);
}

.tabela .col-valor {
  text-align: right;
}

.tabela .col-check {
  width: 3.25rem;
  text-align: right;
}

.tabela__descricao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: inherit;
}

.tabela__descricao .linha__titulo {
  font-size: 0.9375rem;
}

.tabela__categoria {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.tabela__secundario {
  color: var(--texto-secundario);
  white-space: nowrap;
}

.tabela__valor {
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}

.tabela tr.linha--quitada .linha__titulo,
.tabela tr.linha--quitada .tabela__valor {
  color: var(--texto-secundario);
}

.bolinha {
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--traco);
  box-shadow: 0 0 0 1px var(--borda-cor);
}

/* ---------- Bandeiras e cartões ---------- */
.bandeira {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.bandeira-texto {
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.5px;
  line-height: 1;
}

.bandeira-selo {
  justify-content: center;
  padding: 0 0.5em;
  border: 1px solid currentColor;
  border-radius: 0.45em;
  font-weight: 800;
  line-height: 1;
}

.bandeira-inclinada {
  font-style: italic;
}

/* Mini cartão na cor (linha do gasto, faturas). */
.mini-cartao {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: calc(var(--tam, 0.875rem) * 1.5);
  height: var(--tam, 0.875rem);
  border-radius: max(3px, calc(var(--tam, 0.875rem) * 0.18));
  background: var(--cor);
  color: var(--sobre);
  box-shadow: inset 0 0 0 1px var(--borda-cor);
  overflow: hidden;
}

.cartao-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1.586;
  padding: 1.25rem;
  overflow: hidden;
  border-radius: var(--raio-xl);
  background: linear-gradient(135deg, var(--cor), var(--cartao-fim));
  color: var(--sobre);
  box-shadow: inset 0 0 0 1px var(--borda-cor);
}

.cartao-visual--compacto {
  aspect-ratio: auto;
  min-height: 7.5rem;
  padding: 1rem;
}

.cartao-visual__bolha {
  position: absolute;
  top: -5rem;
  right: -3.75rem;
  width: 12.5rem;
  height: 12.5rem;
  border-radius: 50%;
  background: var(--sobre-bolha);
  pointer-events: none;
}

.cartao-visual__topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cartao-visual__nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-visual--compacto .cartao-visual__nome {
  font-size: 0.875rem;
}

.cartao-visual__total {
  position: relative;
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.cartao-visual--compacto .cartao-visual__total {
  font-size: 1.25rem;
}

.cartao-visual__legenda {
  position: relative;
  font-size: 0.6875rem;
  color: var(--sobre-suave);
}

.cartao-visual__chip {
  position: relative;
  width: 2.5rem;
  height: 1.875rem;
  border: 1px solid var(--sobre-borda);
  border-radius: 0.375rem;
  background: var(--sobre-fundo);
}

.cartao-visual__digitos {
  position: relative;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 2px;
}

.cartao-visual__icone {
  color: var(--sobre-suave);
}

/* ---------- Estados vazio e erro ---------- */
.estado {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--texto-terciario);
  text-align: center;
}

.estado__texto {
  max-width: 22.5rem;
  font-size: 0.8125rem;
  color: var(--texto-secundario);
}

/* ---------- Aviso (caixa azul clara) ---------- */
.aviso {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--raio-lg);
  background: var(--primaria-clara);
  color: var(--texto-aviso);
  font-size: 0.875rem;
  font-weight: 500;
}

.aviso > .icone-fundo {
  --tam: 2.25rem;
  background: var(--card);
  color: var(--primaria-texto);
}

/* ---------- Campos ---------- */
.campo {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.campo__rotulo {
  font-size: 0.8125rem;
  font-weight: 600;
}

.campo__caixa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.25rem;
  padding: 0 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--card);
  color: var(--texto-terciario);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.campo__caixa:focus-within {
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px var(--halo);
}

.campo__caixa input,
.campo__caixa select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font-size: 0.9375rem;
}

.campo__caixa input::placeholder {
  color: var(--texto-terciario);
}

.campo--erro .campo__caixa {
  border-color: var(--perigo);
}

.campo__erro {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--perigo-texto);
}

.campo__dica {
  font-size: 0.75rem;
  color: var(--texto-secundario);
}

/* ---------- Modal (DialogoConfirmacao) ---------- */
.modal {
  width: min(25rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-xxl);
  background: var(--card);
  color: var(--texto);
  box-shadow: var(--sombra-flutuante);
}

.modal::backdrop {
  background: var(--sobreposicao);
}

.modal[open] {
  animation: surgir 0.18s ease-out;
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

.modal__corpo {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
}

.modal__icone {
  --tam: 3.5rem;
}

.modal__titulo {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.375rem;
}

.modal__destaque {
  font-size: 1.375rem;
  font-weight: 800;
}

.modal__resumo {
  font-size: 0.8125rem;
  color: var(--texto-secundario);
}

.modal__acoes {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}

.modal__erro {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--perigo-texto);
}

.modal__erro:empty {
  display: none;
}

.modal__campo {
  width: 100%;
  text-align: left;
}

.escolhas {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.escolha {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  cursor: pointer;
}

.escolha:has(input:checked) {
  border-color: var(--primaria);
  background: var(--primaria-clara);
}

.escolha input {
  margin-top: 3px;
  accent-color: var(--primaria);
}

.escolha > span {
  display: grid;
  gap: 2px;
}

/* Nos diálogos de perigo/alerta/sucesso, a opção marcada usa a cor da variante (DialogoConfirmacao). */
.modal:has(.botao--perigo) .escolha:has(input:checked) {
  border-color: var(--perigo);
  background: var(--perigo-claro);
}

.modal:has(.botao--perigo) .escolha input {
  accent-color: var(--perigo);
}

.modal:has(.botao--alerta) .escolha:has(input:checked) {
  border-color: var(--alerta);
  background: var(--alerta-claro);
}

.modal:has(.botao--alerta) .escolha input {
  accent-color: var(--alerta);
}

/* Menu "o que adicionar" */
.modal--menu {
  width: min(28.75rem, calc(100vw - 2rem));
}

.menu-novo {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.125rem 1.125rem;
}

.menu-novo__topo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 0.25rem;
}

.menu-novo__titulo {
  flex: 1;
  font-size: 1.0625rem;
  font-weight: 700;
}

.menu-novo__grade {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.menu-novo__opcao {
  display: grid;
  flex: 1 1 calc(50% - 0.3125rem);
  gap: 0.25rem;
  padding: 0.875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  color: var(--texto);
  transition:
    border-color 0.15s ease,
    transform 0.1s ease;
}

.menu-novo__opcao:hover {
  border-color: var(--primaria-suave);
}

.menu-novo__opcao:active {
  transform: scale(0.97);
}

.menu-novo__opcao .icone-fundo {
  --tam: 2.75rem;
  margin-bottom: 0.375rem;
}

.menu-novo__rotulo {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ---------- Toast ---------- */
.toasts {
  position: fixed;
  right: 0;
  bottom: 1.5rem;
  left: 0;
  z-index: 100;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 30rem;
  padding: 0.625rem 1rem 0.625rem 0.625rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--card);
  color: var(--texto);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  box-shadow: var(--sombra-flutuante);
  pointer-events: auto;
  animation: subir 0.22s ease-out;
}

.toast--saindo {
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.toast .icone-fundo {
  --tam: 1.75rem;
}

.toast__texto {
  display: grid;
}

.toast__titulo {
  font-weight: 700;
}

.toast__resumo {
  color: var(--texto-secundario);
  font-size: 0.8125rem;
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

/* Toasts e modais sem animação para quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .modal[open],
  .toast,
  .circulo-check[aria-busy='true'] {
    animation: none;
  }
}

/* ---------- Extras (Fase 4) ---------- */
.tom-terciario {
  color: var(--texto-terciario);
}

/* Link "← Voltar" no alto das telas de detalhe e formulário */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  justify-self: start;
  color: var(--texto-secundario);
  font-size: 0.875rem;
  font-weight: 600;
}

.voltar:hover {
  color: var(--primaria-texto);
}

/* Botão secundário com texto de perigo (Excluir) e ícone de perigo */
.botao--texto-perigo {
  color: var(--perigo-texto);
}

.botao-icone--perigo:hover {
  color: var(--perigo-texto);
}

.botao--secundario:hover,
.botao--fantasma:hover {
  filter: none;
  background: var(--pressionado);
}

/* Aviso: variantes */
.aviso--erro {
  background: var(--perigo-claro);
  color: var(--perigo-texto);
}

.aviso--botao {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.aviso--botao > .icone {
  color: var(--primaria-texto);
}

/* Barra de progresso fina */
.progresso {
  height: 0.375rem;
  margin-bottom: 0.875rem;
  overflow: hidden;
  border-radius: var(--raio-pill);
  background: var(--controle);
}

.progresso__barra {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sucesso);
}

/* Histórico (ItemHistorico) */
.historico-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 0;
  font-size: 0.875rem;
}

.lista > .historico-item + .historico-item {
  border-top: 1px solid var(--divisor);
}

.historico-item__texto {
  display: grid;
  flex: 1;
  gap: 0.125rem;
  min-width: 0;
}

/* Lista de mudanças "de → para" do diálogo de salvar */
.mudancas {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--raio-md);
  background: var(--controle);
  list-style: none;
  text-align: left;
  font-size: 0.875rem;
}

.mudancas li {
  display: grid;
  gap: 0.125rem;
}

.mudancas s {
  color: var(--texto-secundario);
}

/* Interruptor (LinhaInterruptor do app) */
.interruptor {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

.interruptor[hidden] {
  display: none;
}

.interruptor__texto {
  display: grid;
  flex: 1;
  gap: 0.125rem;
}

.interruptor__chave {
  position: relative;
  flex-shrink: 0;
  width: 2.875rem;
  height: 1.75rem;
  margin: 0;
  border-radius: var(--raio-pill);
  background: var(--inativo);
  cursor: pointer;
  appearance: none;
  transition: background-color 0.15s ease;
}

.interruptor__chave::after {
  content: '';
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--sobre-cor);
  box-shadow: var(--sombra-card);
  transition: transform 0.15s ease;
}

.interruptor__chave:checked {
  background: var(--primaria);
}

.interruptor__chave:checked::after {
  transform: translateX(1.125rem);
}

/* Segmentado com rádios (formulários) */
.segmentado--radio {
  margin: 0;
  border: 0;
}

.segmentado--radio .segmentado__item {
  cursor: pointer;
}

.segmentado--radio .segmentado__item:has(input:checked) {
  background: var(--segmento-ativo);
  color: var(--cor-ativa, var(--primaria-texto));
  font-weight: 700;
  box-shadow: var(--sombra-card);
}

.segmentado--radio .segmentado__item:has(input:focus-visible) {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

/* Campos: variações */
fieldset.campo {
  /* O padrão de fieldset é min-width: min-content, que estoura a largura em telas estreitas. */
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo__caixa--texto {
  height: auto;
  padding: 0.75rem 1rem;
}

.campo__caixa textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font-size: 0.9375rem;
  resize: vertical;
}

.campo--curto {
  max-width: 15rem;
}

.campo[hidden] {
  display: none;
}

/* Rolagem lateral para tabelas largas */
.rolagem-horizontal {
  overflow-x: auto;
}

/* ---------- Chips de escolha (caixas/rádios) e grade de meses: formulários, filtros e "Escolher mês" ---------- */
.chips--quebra {
  flex-wrap: wrap;
  overflow: visible;
}

.seletor-categoria__opcao {
  cursor: pointer;
}

.seletor-categoria__opcao[hidden] {
  display: none;
}

.seletor-categoria__opcao:has(input:checked) {
  border-color: var(--primaria);
  background: var(--primaria-clara);
  font-weight: 600;
}

.seletor-categoria__opcao:has(input:focus-visible) {
  outline: 2px solid var(--primaria);
  outline-offset: 2px;
}

.seletor-mes__ano {
  margin: 0.75rem 0 0.5rem;
  color: var(--texto-secundario);
  font-size: 0.8125rem;
  font-weight: 600;
}

.seletor-mes__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.seletor-mes__mes {
  display: grid;
  place-items: center;
  height: 2.75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  color: var(--texto);
  font-size: 0.9375rem;
  font-weight: 500;
}

.seletor-mes__mes:hover {
  border-color: var(--primaria-suave);
}

.seletor-mes__mes--atual {
  border-color: var(--primaria);
  color: var(--primaria-texto);
  font-weight: 600;
}

.seletor-mes__mes[aria-current='date'] {
  border-color: var(--primaria);
  background: var(--primaria-botao);
  color: var(--sobre-cor);
  font-weight: 700;
}

/* ---------- Filtros com popup (partials/filtro-popup.ejs) ---------- */
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.filtro {
  position: relative;
}

.filtro__botao {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  max-width: 16rem;
  padding: 0 0.875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pill);
  background: var(--card);
  color: var(--texto);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.filtro__botao > .icone {
  flex: none;
  color: var(--texto-secundario);
}

.filtro__botao:hover {
  border-color: var(--primaria-suave);
}

.filtro__botao--ativo {
  border-color: var(--primaria);
  background: var(--primaria-clara);
  color: var(--primaria-texto);
}

.filtro__botao--ativo > .icone {
  color: var(--primaria-texto);
}

.filtro__botao[aria-expanded='true'] .filtro__seta {
  transform: rotate(180deg);
}

.filtro__rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtro__bolinha {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--traco);
  box-shadow: 0 0 0 1px var(--borda-cor);
}

.filtro__popup {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: max-content;
  min-width: 18rem;
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: min(30rem, calc(100vh - 12rem));
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  background: var(--card);
  box-shadow: var(--sombra-flutuante);
}

.filtro__popup[hidden] {
  display: none;
}

.filtro__popup--direita {
  right: 0;
  left: auto;
}

.filtro__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.filtro__titulo {
  font-size: 0.9375rem;
  font-weight: 700;
}

/* O X só aparece na folha do celular; no desktop fecha com clique fora ou Esc. */
.filtro__fechar {
  display: none;
}

.filtro__form,
.filtro-periodo {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 0;
}

.filtro__rolagem {
  display: grid;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.filtro__rolagem[hidden] {
  display: none;
}

.filtro-periodo .seletor-periodo__chave {
  align-self: flex-start;
}

.filtro-periodo .seletor-periodo__modo {
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.filtro__rodape {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--divisor);
}

.filtro__rodape .botao {
  height: 2.5rem;
  padding: 0 1rem;
}

.filtro__aviso {
  max-width: 18rem;
}

@media (max-width: 767px) {
  /* Folha presa embaixo da tela, com o resto escurecido. */
  .filtro__popup,
  .filtro__popup--direita {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 80vh;
    padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: var(--raio-xxl) var(--raio-xxl) 0 0;
    box-shadow: var(--sombra-flutuante);
  }

  /* Fundo escuro: um elemento de verdade (e não sombra), para o toque fora não clicar no que está atrás. */
  body.filtro-aberto::after {
    position: fixed;
    inset: 0;
    z-index: 290;
    background: var(--sobreposicao);
    content: '';
  }

  .filtro__fechar {
    display: grid;
  }

  .filtro__botao {
    max-width: 12rem;
  }
}