/* ==========================================================================
   Controle Financeiro — folha de estilo única

   Escrita mobile-first: o que está fora de media query vale para o celular,
   e as telas maiores só acrescentam.

   O sistema é montado com poucas peças, e tela nova deve conseguir se montar
   só com elas:

     .pagina    cabeçalho da tela (título + o controle principal dela)
     .numeros   a faixa de números que abre a tela
     .cartao    a caixa branca que agrupa qualquer coisa
     .linhas    a lista de registros (gasto, fatura, item de acerto)
     .pessoas   cartão por pessoa, quando o assunto é gente e não gasto
     .vazio     o estado sem dados, que também é uma tela
     .formulario / .campo / .acoes

   Duas regras que valem para tudo aqui:
   — Nada de style inline. A CSP é 'self' em style-src, então atributo style
     não é aplicado pelo navegador. Barra de proporção é <progress>, que
     carrega o número em atributo, não em CSS.
   — Nada de arquivo externo (fonte, ícone, imagem). Ícone é SVG escrito no
     HTML, herdando currentColor.
   ========================================================================== */

:root {
    /* Cores */
    --fundo: #f1f4f9;
    --superficie: #ffffff;
    --superficie-suave: #f7f9fc;
    --borda: #e7eaf1;
    --borda-forte: #d5dae4;
    --texto: #101725;
    --suave: #6b7688;
    /* Cor de "linha apagada" (item já pago, fatura já importada). Não é
       decoração: é texto que ainda se lê, então fica no mínimo de 4,5:1 sobre
       o branco — o #98a1b0 de antes dava 2,6:1. */
    --apagado: #78828f;

    /* Azul de TEXTO: link, ícone, contorno de foco. Em tela escura ele clareia. */
    --destaque: #2f5bea;
    --destaque-escuro: #1e40c8;
    --destaque-fraco: #eef2ff;
    --destaque-borda: #c9d6fb;

    /* Azul de PREENCHIMENTO: fundo que carrega texto branco (botão, número em
       destaque, aba escolhida). É um par separado do azul de texto porque, no
       escuro, o de texto precisa clarear e este precisa continuar fundo o
       bastante para o #fff em cima dele seguir legível. */
    --preenchido: #2f5bea;
    --preenchido-forte: #1e40c8;
    --destaque-fundo: #1f3fb8;
    --destaque-alto: #6f9bff;
    --destaque-barra: #7aa0ff;

    --positivo: #0f7a45;
    --positivo-fraco: #e8f7ee;
    --positivo-barra: #34c07a;
    --negativo: #c0304a;
    --negativo-fraco: #fdeff1;

    --ok-fundo: #ecfaf1;
    --ok-borda: #b5e3c6;
    --ok-texto: #0f7a45;
    --erro-fundo: #fdeff1;
    --erro-borda: #f6c2c9;
    --erro-texto: #b02a45;
    --atencao-fundo: #fff8ea;
    --atencao-borda: #f2ddab;
    --atencao-texto: #8a5b09;

    /* As cores que antes estavam escritas direto na regra. Viraram token não
       para mudar de valor — nenhuma mudou — mas porque são exatamente os
       pontos que ficariam brancos na tela escura, lá embaixo. */
    --vidro: rgba(255, 255, 255, 0.92);
    --vidro-leve: rgba(255, 255, 255, 0.82);
    --vidro-claro: rgba(255, 255, 255, 0.7);
    --sobre-destaque: rgba(255, 255, 255, 0.78);
    --trilho: #eaeef5;
    --porta-brilho: #dfe8ff;

    /* Espaçamento: uma escala só, usada em tudo */
    --e1: 0.25rem;
    --e2: 0.5rem;
    --e3: 0.75rem;
    --e4: 1rem;
    --e5: 1.5rem;
    --e6: 2rem;

    --raio: 16px;
    --raio-pequeno: 10px;
    --raio-pilula: 999px;

    --sombra-1: 0 1px 2px rgba(16, 23, 37, 0.05);
    --sombra-2: 0 1px 2px rgba(16, 23, 37, 0.05), 0 10px 24px -16px rgba(16, 23, 37, 0.22);
    --sombra-3: 0 24px 48px -28px rgba(16, 23, 37, 0.35);
    --anel: 0 0 0 3px rgba(47, 91, 234, 0.16);

    --barra-altura: 3.75rem;
    --nav-altura: 4.25rem;
    --lateral-largura: 15rem;
    --largura-maxima: 64rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* O atributo hidden precisa vencer qualquer display de componente: é ele que
   esconde os campos do tipo de lançamento não escolhido */
[hidden] { display: none !important; }

/* A fonte é a do sistema, e a lista diz só isso. Antes ela começava com
   "Inter" — que nunca esteve no projeto e que a CSP não deixaria buscar de
   fora, então ninguém nunca viu o sistema nela. O letter-spacing dos títulos
   estava calibrado para essa fonte ausente; agora acompanha a que aparece de
   verdade (Segoe UI no Windows, San Francisco no iPhone). */
body {
    margin: 0;
    font-family: "Segoe UI Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--destaque); text-underline-offset: 0.15em; }
a:hover { color: var(--destaque-escuro); }

/* -0.01em, e não -0.02em: o valor antigo foi escolhido para a Inter, que é
   mais estreita. No Segoe UI, que é a fonte que realmente aparece, ele
   apertava as letras do título. */
h1, h2, h3 { line-height: 1.25; letter-spacing: -0.01em; }
/* O título da tela é h1. Antes toda tela abria em h2 e nenhuma tinha um nome
   principal — quem navega por títulos com leitor de tela começava no nível
   errado. O tamanho é o mesmo de antes. */
h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
h2 { font-size: 1.5rem; font-weight: 700; margin: 0; }
h3 { font-size: 1rem; font-weight: 650; margin: 0; }

p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

code {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.875em;
    background: var(--superficie-suave);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.1em 0.4em;
}

.icone { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }

/* Texto que só o leitor de tela usa. Rótulo escondido com [hidden] não é
   anunciado — precisa continuar no fluxo, só que fora da vista. */
.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pular {
    position: absolute;
    left: -999px;
    top: var(--e2);
    z-index: 50;
    background: var(--superficie);
    border: 1px solid var(--destaque);
    border-radius: var(--raio-pequeno);
    padding: var(--e2) var(--e3);
}

.pular:focus { left: var(--e3); }

/* --------------------------------------------------------------------------
   Esqueleto

   Celular: barra em cima com a marca, abas fixas no rodapé — onde o polegar
   alcança. Computador: a mesma navegação vira a coluna da esquerda.
   -------------------------------------------------------------------------- */

/* No celular a barra NÃO é fixa: ela rola para fora junto com o conteúdo.
   Somada às abas do rodapé eram ~8rem de altura permanentemente ocupadas, e o
   que ela carrega — a marca e o "Sair" — não é ação frequente. No computador
   ela volta a ser sticky, lá embaixo, onde é o topo do layout em grade. */
.barra {
    position: static;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    height: var(--barra-altura);
    padding: 0 var(--e4);
    background: var(--vidro-leve);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--borda);
}

.marca { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }

.marca a {
    color: var(--texto);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
}

/* O selo da marca no lugar de um logo que não existe: "R$" já diz do que é
   o sistema, e é a única peça colorida da barra */
.marca-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 9px;
    background: linear-gradient(150deg, var(--preenchido), var(--destaque-alto));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: var(--sombra-1);
}

.botao-sair {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    color: var(--suave);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: var(--e2) var(--e3);
    border-radius: var(--raio-pilula);
}

.botao-sair:hover { background: var(--negativo-fraco); color: var(--negativo); }

.lateral {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--e1);
    height: var(--nav-altura);
    padding: var(--e2) var(--e2) calc(var(--e2) + env(safe-area-inset-bottom, 0px));
    background: var(--vidro);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--borda);
}

.lateral .item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--suave);
    font-size: 0.68rem;
    font-weight: 500;
    border-radius: var(--raio-pequeno);
    padding: var(--e1);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lateral .item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lateral .item:hover { color: var(--texto); }

/* A tela em que você está fica acesa: é a única pergunta que a navegação
   precisa responder */
.lateral .item[aria-current="page"] { color: var(--destaque); }
.lateral .item[aria-current="page"] .icone { transform: translateY(-1px); }

.conteudo {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: var(--e5) var(--e4);
    padding-bottom: calc(var(--nav-altura) + var(--e6));
}

/* Tela que é um formulário longo (Lançar, Editar, Conferir importação): no
   celular as abas do rodapé somem. Essas três já têm o "‹ Lançamentos" no
   cabeçalho e o "Cancelar" nas ações — sair delas nunca dependeu das abas, e
   sem elas o formulário ganha uma faixa inteira de altura de volta. */
.tela-formulario .lateral { display: none; }
.tela-formulario .conteudo { padding-bottom: var(--e6); }
.tela-formulario .acoes.fixa { bottom: var(--e3); }

/* A conferência da importação não é texto, é planilha: descrição, dois campos
   de renomear, valor e o controle de divisão inteiro na mesma linha. 64rem de
   leitura confortável ali espremem justamente a descrição do gasto. */
.tela-larga .conteudo { max-width: 80rem; }

/* --------------------------------------------------------------------------
   Cabeçalho da tela
   -------------------------------------------------------------------------- */

.pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e3);
    margin-bottom: var(--e5);
}

.pagina-texto { min-width: 0; }

.pagina-voltar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--suave);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: var(--e1);
}

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

/* O traço "seta" já existe para outra coisa (de → para, no acerto) e aponta
   pra direita; espelhado ele vira a seta de "voltar" sem precisar de um
   segundo desenho. */
.pagina-voltar .icone { width: 1rem; height: 1rem; transform: scaleX(-1); }

.pagina-sub {
    margin: var(--e1) 0 0;
    color: var(--suave);
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Faixa de números: o resumo que abre a tela
   -------------------------------------------------------------------------- */

/* Dois grupos de números (Você / Da casa) lado a lado no Dashboard — a
   legenda deixa explícito de quem é cada número, porque "Pago"/"Em aberto"
   somam a casa inteira e ficam ao lado de números que são só do titular; sem
   rótulo os quatro pareciam a mesma pessoa. */
.numeros-grupo { margin-bottom: var(--e4); }
.numeros-grupo:last-of-type { margin-bottom: var(--e5); }

.numeros-legenda {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--suave);
    margin-bottom: var(--e2);
}

.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--e3);
}

.numero {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
    padding: var(--e3) var(--e4);
}

/* O número que responde à pergunta principal da tela ganha cor; os outros
   são contexto e ficam em branco, senão nenhum deles se destaca */
.numero.destaque {
    background: linear-gradient(160deg, var(--destaque-fundo), var(--preenchido));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--sombra-2);
}

.numero-rotulo {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--suave);
}

.numero.destaque .numero-rotulo,
.numero.destaque .numero-nota { color: var(--sobre-destaque); }

.numero-valor {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.numero-nota { font-size: 0.78rem; color: var(--suave); }

/* --------------------------------------------------------------------------
   Cartão
   -------------------------------------------------------------------------- */

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-2);
    padding: var(--e4);
    margin-bottom: var(--e4);
}

.cartao > :last-child { margin-bottom: 0; }

.cartao-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    margin-bottom: var(--e3);
}

.cartao-titulo h3 { display: flex; align-items: center; gap: var(--e2); }

.cartao-titulo .valor {
    color: var(--suave);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.cartao-titulo .valor strong { color: var(--texto); }

/* Quantos itens tem a lista abaixo, colado no título */
.contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: var(--raio-pilula);
    background: var(--superficie-suave);
    border: 1px solid var(--borda);
    color: var(--suave);
    font-size: 0.72rem;
    font-weight: 600;
}

.cartao.destaque {
    background: linear-gradient(170deg, var(--ok-fundo), var(--superficie) 60%);
    border-color: var(--ok-borda);
}

/* O seu resumo, na tela do Dashboard: mesma ideia do .cartao.destaque, mas
   em azul (cor da marca) para não se confundir com o verde de "Acerto do
   mês" — são dois destaques com significados diferentes na mesma tela. */
.cartao.titular {
    background: linear-gradient(170deg, var(--destaque-fraco), var(--superficie) 60%);
    border-color: var(--destaque-borda);
}

.cartao.apagado { opacity: 0.72; box-shadow: var(--sombra-1); }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.aviso {
    position: relative;
    padding: var(--e3) var(--e4);
    padding-left: calc(var(--e4) + 4px);
    border: 1px solid var(--atencao-borda);
    background: var(--atencao-fundo);
    color: var(--atencao-texto);
    border-radius: var(--raio-pequeno);
    margin-bottom: var(--e4);
    font-size: 0.92rem;
    overflow: hidden;
}

/* Faixa lateral: dá para saber o tipo do aviso pelo canto do olho, sem ler */
.aviso::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: currentColor;
    opacity: 0.75;
}

.aviso a { color: inherit; }
.aviso.ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-texto); }
.aviso.erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro-texto); }

/* Sugestão de divisão herdada de um lançamento parecido, na importação — não
   é erro nem confirmação, por isso fica fora das cores de .aviso. Borda
   tracejada porque é um palpite: some assim que a pessoa usa ou continua. */
.sugestao-semelhante {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    padding: var(--e2) var(--e3);
    margin-bottom: var(--e2);
    border: 1px dashed var(--borda);
    border-radius: var(--raio-pequeno);
    background: var(--destaque-fraco);
    font-size: 0.85rem;
}

.sugestao-semelhante span { color: var(--suave); }
.sugestao-semelhante strong { color: inherit; }

/* --------------------------------------------------------------------------
   Estado vazio: também é uma tela, com o próximo passo à mão
   -------------------------------------------------------------------------- */

/* Em flex, margem de filho NÃO colapsa com o gap — ela soma. Com margin no
   ícone e no .acoes, a pilha saía com quatro folgas diferentes (1,0 / 0,5 /
   1,5rem), único lugar do sistema onde a escala não se lê. Aqui o espaçamento
   passa a ser só o gap, e o respiro extra antes dos botões é intencional. */
.vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--e3);
    background: var(--superficie);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    padding: var(--e6) var(--e4);
}

.vazio .icone {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--destaque);
    background: var(--destaque-fraco);
    border-radius: var(--raio-pilula);
    padding: 0.6rem;
    box-sizing: content-box;
    margin-bottom: 0;
}

.vazio-titulo { font-size: 1.1rem; font-weight: 650; margin: 0; }
.vazio .ajuda { max-width: 34rem; }
.vazio .acoes { justify-content: center; margin-top: var(--e2); margin-bottom: 0; }

.vazio.sucesso { border-style: solid; border-color: var(--ok-borda); background: var(--ok-fundo); }
.vazio.sucesso .icone { color: var(--ok-texto); background: var(--vidro-claro); }

/* --------------------------------------------------------------------------
   Lista de registros

   Substitui a tabela. Um gasto tem descrição, etiquetas, notas e uma divisão
   — informação de tamanhos diferentes, que em célula de tabela ou vira coluna
   estreita demais ou obriga a rolar na horizontal justamente até a coluna de
   ação, que é onde se precisa clicar.
   -------------------------------------------------------------------------- */

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

.linha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "selo texto valor"
        "selo acao  acao";
    align-items: start;
    gap: var(--e1) var(--e3);
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--borda);
}

.linha:first-child { padding-top: 0; }
.linha:last-child { border-bottom: 0; padding-bottom: 0; }
.linha.apagada { color: var(--apagado); }

/* Realce sob o cursor: no computador a linha é larga e a ação fica no extremo
   direito, então o olho precisa rastrear uma linha invisível de ponta a ponta.
   Só onde existe cursor de verdade — sem a guarda, o estado "gruda" depois do
   toque no celular. */
@media (hover: hover) {
    .linha:hover {
        background: var(--superficie-suave);
        box-shadow: 0 0 0 var(--e2) var(--superficie-suave);
        border-radius: 2px;
    }
}

.linha-selo,
.data-selo { grid-area: selo; }
.linha-texto { grid-area: texto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linha-valor { grid-area: valor; }
.linha-acao { grid-area: acao; justify-self: end; }
.linha-divisao { grid-area: acao; }

.linha-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--raio-pequeno);
    background: var(--destaque-fraco);
    color: var(--destaque);
}

/* O dia em selo no lugar de uma coluna "Data": data de gasto é dia e mês, e
   o ano já está dito no cabeçalho da tela */
.data-selo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    padding: var(--e1) 0;
    border-radius: var(--raio-pequeno);
    background: var(--superficie-suave);
    border: 1px solid var(--borda);
    line-height: 1.1;
}

.data-selo strong { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.data-selo span { font-size: 0.65rem; text-transform: uppercase; color: var(--suave); letter-spacing: 0.04em; }

.linha-titulo {
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    overflow-wrap: anywhere;
}

.linha-nota { font-size: 0.8rem; color: var(--suave); overflow-wrap: anywhere; }

.linha-valor {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.linha-acao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e4);
    font-size: 0.85rem;
}

.linha-acao form { display: contents; }

/* 1rem, não 0.82rem: abaixo de 16px o Safari do iPhone dá zoom ao focar. E
   min-height, porque o seletor de alvo de toque abaixo cobre só `a` e
   `button` — o <select> ficava de fora, com 32px de altura. */
.linha-acao select {
    width: auto;
    font-size: 1rem;
    min-height: 2.75rem;
    padding: 0.25rem 1.9rem 0.25rem var(--e2);
}

/* No celular editar e excluir são alvos de dedo, não de mouse */
.linha-acao a,
.linha-acao button {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    /* "editar" tem seis letras: sem padding lateral o alvo nasce com a largura
       da palavra, e a altura confortável não salva um alvo estreito. */
    padding-inline: var(--e1);
}

/* Este par tem de existir separado: `button.discreto/.perigo { min-height: 0 }`
   lá embaixo tem a MESMA especificidade de `.linha-acao button` e vem depois
   na folha, então ganhava o desempate por ordem — na prática "excluir",
   "marcar pago", "desfazer" e "reativar" nunca tiveram os 2.5rem que a regra
   acima pensava estar dando (mediam 28px). Duas classes vencem por
   especificidade, independentemente da ordem. */
.linha-acao .discreto,
.linha-acao .perigo { min-height: 2.75rem; }

/* A ação destrutiva se afasta das outras: era um alvo de texto a 1rem de
   "editar", com a cor como única diferença. Margem, e não `margin-left: auto`
   — a caixa do .linha-acao encolhe até o conteúdo, então não existe espaço
   livre para uma margem automática consumir. */
.linha-acao .perigo {
    margin-left: var(--e2);
    /* No celular sobra só a lixeira, e ícone sem padding é um alvo do tamanho
       do desenho — .perigo herda `padding: var(--e1) 0`, que zera os lados. */
    min-width: 2.75rem;
    justify-content: center;
}

/* No celular a lixeira fala sozinha, e o texto ao lado dela só gasta largura
   numa linha que já está apertada. */
.rotulo-acao { display: none; }

@media (min-width: 48em) {
    .rotulo-acao { display: inline; }
}

/* Atalho de "marcar como pago(a)" nas linhas de fatura e de lançamento
   avulso (plano-melhorias-dashboard.md, Fase 3): <details> nativo — abre e
   fecha sem JavaScript nenhum, e nada aqui depende de atributo de script (a
   CSP não entra em jogo). Duas classes no seletor do formulário para vencer
   a especificidade de ".linha-acao form { display: contents }" acima, que
   senão apagaria a caixa dele. */
.atalho-pagar > summary {
    list-style: none;
    cursor: pointer;
}

.atalho-pagar > summary::-webkit-details-marker { display: none; }

.atalho-pagar .atalho-pagar-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    margin-top: var(--e3);
    font-size: 0.85rem;
}

.atalho-pagar-form input[type="date"] { width: auto; }
.atalho-pagar-form .campo-moeda { width: 8rem; }

/* Lista de pagamentos (plano-melhorias-pagamento-parcial.md, Fase 3):
   width:100% num filho de flex-wrap força a linha seguinte (o botão de
   desfazer) pra baixo da lista, em vez de ficar lado a lado apertado. */
.linhas-pagamentos {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--suave);
}

/* A barra de proporção. É <progress>, e não uma div com largura em style,
   porque a CSP proíbe atributo style — aqui o número vive no atributo value,
   que é permitido, e ainda vem com semântica de progresso de graça. */
progress.fatia {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    max-width: 16rem;
    height: 5px;
    margin-top: var(--e1);
    border: 0;
    border-radius: var(--raio-pilula);
    background: var(--superficie-suave);
    overflow: hidden;
}

progress.fatia::-webkit-progress-bar { background: var(--trilho); border-radius: var(--raio-pilula); }
progress.fatia::-webkit-progress-value {
    background: linear-gradient(90deg, var(--preenchido), var(--destaque-barra));
    border-radius: var(--raio-pilula);
}
progress.fatia::-moz-progress-bar { background: var(--preenchido); border-radius: var(--raio-pilula); }

progress.fatia.paga { max-width: none; height: 6px; margin: 0 0 var(--e3); }
progress.fatia.paga::-webkit-progress-value { background: linear-gradient(90deg, var(--positivo), var(--positivo-barra)); }
progress.fatia.paga::-moz-progress-bar { background: var(--positivo); }

/* A divisão em fichas: é o que se confere de relance ao passar os olhos na
   lista; em texto corrido ela se misturava com a descrição */
.fatias { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e1); }

.ficha {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--suave);
    background: var(--superficie-suave);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    padding: 0.1rem 0.6rem;
}

.ficha strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.ficha.alerta { background: var(--atencao-fundo); border-color: var(--atencao-borda); color: var(--atencao-texto); }

.etiqueta {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.05rem 0.5rem;
    border-radius: var(--raio-pilula);
    background: var(--superficie-suave);
    border: 1px solid var(--borda);
    color: var(--suave);
    white-space: nowrap;
    vertical-align: middle;
}

.etiqueta.ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-texto); }
.etiqueta.alerta { background: var(--atencao-fundo); border-color: var(--atencao-borda); color: var(--atencao-texto); }

/* --------------------------------------------------------------------------
   Pessoas
   -------------------------------------------------------------------------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: var(--raio-pilula);
    background: var(--destaque-fraco);
    border: 1px solid var(--destaque-borda);
    color: var(--destaque-escuro);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pessoas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--e2);
}

.pessoa {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--e3);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    background: var(--superficie-suave);
    padding: var(--e3);
}

.pessoa-corpo { flex: 1 1 10rem; min-width: 0; }
.pessoa-nome { font-weight: 650; }

.pessoa-numeros { display: flex; flex-wrap: wrap; gap: var(--e4); margin: var(--e1) 0 0; }
.pessoa-numeros div { display: flex; align-items: baseline; gap: var(--e1); }
.pessoa-numeros dt { font-size: 0.75rem; color: var(--suave); }
.pessoa-numeros dd { margin: 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.pessoa-relatorio { margin: var(--e2) 0 0; font-size: 0.8rem; }
.pessoa-relatorio a { color: var(--destaque-escuro); }

.saldo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: var(--e1) var(--e3);
    border-radius: var(--raio-pequeno);
}

.saldo-rotulo { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.saldo strong { font-size: 1.05rem; }
.saldo.positivo { background: var(--positivo-fraco); color: var(--positivo); }
.saldo.negativo { background: var(--negativo-fraco); color: var(--negativo); }

/* O acerto: quem paga a quem. É a conclusão do mês, então vem em linha de
   leitura única — nome, valor, nome — e não em tabela. */
.transferencias { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e2); }

.transferencia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2) var(--e3);
    background: var(--superficie);
    border: 1px solid var(--ok-borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra-1);
    padding: var(--e3) var(--e4);
}

.transferencia-quem { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 600; }

.transferencia-seta {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    color: var(--suave);
    font-variant-numeric: tabular-nums;
}

.transferencia-seta strong { color: var(--texto); font-size: 1.05rem; }

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

.campo { margin-bottom: var(--e4); }
.campo:last-child { margin-bottom: 0; }

.campo > label,
.rotulo {
    display: block;
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: var(--e2);
}

/* Campos lado a lado: empilham no celular, dividem a linha no computador */
.campos { display: grid; gap: var(--e4); }

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
select {
    width: 100%;
    padding: 0.62rem 0.7rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    font: inherit;
    color: inherit;
    background: var(--superficie);
    box-shadow: var(--sombra-1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    /* 16px evita o zoom automático do Safari no iPhone ao focar o campo */
    font-size: 1rem;
}

/* A seta do select desenhada em CSS: imagem externa a CSP barraria */
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--suave) 50%),
        linear-gradient(135deg, var(--suave) 50%, transparent 50%);
    background-position:
        calc(100% - 1.05rem) calc(50% + 2px),
        calc(100% - 0.7rem) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

input:hover:not(:disabled),
select:hover:not(:disabled) { border-color: var(--suave); }

input:focus,
select:focus { outline: none; }

input:focus-visible,
select:focus-visible {
    border-color: var(--destaque);
    box-shadow: var(--anel);
    outline: none;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--destaque);
    outline-offset: 2px;
    border-radius: var(--raio-pequeno);
}

input::placeholder { color: var(--apagado); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--destaque); width: auto; }

/* R$ colado no campo: sem isso o usuário digita "R$ 90" e o servidor recusa */
.campo-moeda { position: relative; }
.campo-moeda .prefixo {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--suave);
    font-size: 0.9rem;
    pointer-events: none;
}
.campo-moeda input { padding-left: 2.3rem; }

/* Botão de mostrar/ocultar senha, no mesmo espírito do R$ do campo-moeda.
   Centralizado com altura 100% + flex, e não com top:50%/translate, porque
   assim não depende da altura do próprio botão ter sido calculada ainda. */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 3rem; }
.alternar-senha {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    /* 2.75rem de largura: a altura já vinha do campo, mas a área clicável
       tinha só 31px de lado a lado. */
    min-width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--suave);
    padding: 0;
    min-height: 0;
}
.alternar-senha:hover { background: none; color: var(--texto); box-shadow: none; }
.alternar-senha .icone { width: 1.15rem; height: 1.15rem; }

.ajuda { color: var(--suave); font-size: 0.85rem; margin: var(--e2) 0 0; }
.ajuda-inline { font-weight: 400; color: var(--suave); font-size: 0.8rem; }

.parcelas { display: flex; align-items: center; gap: var(--e2); }
.parcelas input { width: 6rem; }
.parcelas span { color: var(--suave); font-size: 0.9rem; }

/* O tipo de gasto é a primeira decisão e muda o resto do formulário, então é
   um controle de abas, não mais um campo na pilha */
.segmentado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--e1);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra-1);
    padding: var(--e1);
    margin-bottom: var(--e4);
}

.segmento { display: block; cursor: pointer; }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }

.segmento span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: 2.6rem;
    padding: var(--e2) var(--e3);
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--suave);
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.segmento:hover span { background: var(--superficie-suave); color: var(--texto); }

.segmento input:checked + span {
    background: var(--preenchido);
    color: #fff;
    box-shadow: var(--sombra-1);
}

.segmento input:focus-visible + span { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* Abas da tela de Cadastros: cada uma navega para uma URL (não só troca o
   que está visível), então são links de verdade, não o :checked do
   .segmentado — mas o visual segue o mesmo idioma de "grupo de opções". */
/* Rolagem na horizontal em vez de quebrar linha: são cinco abas, e num celular
   estreito elas viravam duas ou três fileiras com o sublinhado da ativa solto
   no meio do bloco. No computador cabem todas, e a rolagem nem aparece. */
.abas {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--e1);
    border-bottom: 1px solid var(--borda);
    margin-bottom: var(--e4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

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

.abas a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: var(--e2) var(--e3);
    border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--suave);
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    scroll-margin-inline: var(--e3);
}

.abas a:hover { color: var(--texto); background: var(--superficie-suave); }

.abas a[aria-current="page"] {
    color: var(--destaque-escuro);
    background: var(--destaque-fraco);
    box-shadow: inset 0 -2px 0 var(--destaque);
}

/* Checkbox com rótulo ao lado, tipo "Principal" no cadastro de responsável —
   ficaria torto no grid vertical de .campo padrão, feito para label em cima. */
.opcao { display: flex; align-items: center; gap: var(--e2); cursor: pointer; }
.opcao span { font-weight: 600; }
.opcao .ajuda-inline { font-weight: 400; }

/* O campo de arquivo é o gesto principal da tela de importação, então ocupa
   uma área grande e clicável em vez de um botãozinho do sistema */
.area-arquivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--e1);
    border: 1.5px dashed var(--borda-forte);
    border-radius: var(--raio);
    background: var(--superficie-suave);
    padding: var(--e5) var(--e4);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.area-arquivo:hover { border-color: var(--destaque); background: var(--destaque-fraco); }
.area-arquivo .icone { width: 1.75rem; height: 1.75rem; color: var(--destaque); }
.area-arquivo-titulo { font-weight: 600; }
.area-arquivo input[type="file"] { margin-top: var(--e3); font-size: 0.85rem; max-width: 100%; }
.area-arquivo:focus-within { border-color: var(--destaque); box-shadow: var(--anel); }

/* Renomear na conferência: discreto, porque é opcional — sem nome digitado
   vale o texto que veio na fatura */
.apelidos { display: grid; gap: var(--e1); margin-top: var(--e2); }

/* 1rem: é a tela onde mais se digita no celular (dois campos por linha, dezenas
   de linhas), e a 0.82rem cada toque dava zoom no iPhone. */
input.apelido {
    font-size: 1rem;
    padding: 0.35rem var(--e2);
    font-weight: 400;
    background: var(--superficie-suave);
    box-shadow: none;
    border-color: var(--borda);
}

input.apelido:focus-visible { background: var(--superficie); }

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

button,
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    background: var(--preenchido);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    /* Alvo de toque confortável no celular */
    padding: 0.62rem 1.15rem;
    min-height: 2.75rem;
    cursor: pointer;
    box-shadow: var(--sombra-1);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

button:hover,
.botao:hover { background: var(--preenchido-forte); color: #fff; box-shadow: var(--sombra-2); }

/* O "afundar" do clique é para botão com caixa. Em .discreto/.perigo, que são
   texto solto dentro de uma lista, ele vira um pulo de uma letra. */
button:active:not(.discreto):not(.perigo),
.botao:active { transform: translateY(1px); box-shadow: var(--sombra-1); }

button.secundario,
.botao.secundario {
    background: var(--superficie);
    color: var(--destaque-escuro);
    border-color: var(--borda-forte);
}

button.secundario:hover,
.botao.secundario:hover {
    background: var(--destaque-fraco);
    border-color: var(--destaque-borda);
    color: var(--destaque-escuro);
}

/* Botão que se comporta como link: dentro de uma lista, um botão cheio
   roubaria a atenção da informação */
button.discreto,
button.perigo {
    background: none;
    border: 0;
    box-shadow: none;
    padding: var(--e1) 0;
    min-height: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--destaque);
}

button.perigo { color: var(--negativo); }
button.discreto:hover,
button.perigo:hover { text-decoration: underline; background: none; box-shadow: none; }

/* margin dos dois lados. Com só margin-top, uma fileira de botões ficava a
   2,5rem do título e encostada no bloco de baixo — em Lançamentos ("Importar
   lançamentos / Lançar") e em Cadastros ("+ Nova(o)…"). Dentro de .cartao o
   `> :last-child { margin-bottom: 0 }` que já existe cancela o excesso. */
.acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e4);
    margin-top: var(--e4);
    margin-bottom: var(--e4);
}

.acoes .campo-moeda { width: 8rem; }
.acoes a { color: var(--suave); }
.acoes a:hover { color: var(--texto); }
.acoes a.botao { color: #fff; }
.acoes a.botao.secundario { color: var(--destaque-escuro); }

/* Formulário longo: o botão de gravar acompanha a rolagem, senão em fatura
   de sessenta linhas ele fica a uma tela de distância o tempo todo */
.acoes.fixa {
    position: sticky;
    bottom: calc(var(--nav-altura) - 1px);
    z-index: 10;
    margin-top: var(--e5);
    padding: var(--e3) var(--e4);
    background: var(--vidro);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-2);
}

/* --------------------------------------------------------------------------
   Filtro de mês: mês, ano e "Ver" são um comando só, então são desenhados
   como um bloco único
   -------------------------------------------------------------------------- */

.filtro {
    display: flex;
    align-items: stretch;
    gap: var(--e1);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra-1);
    padding: var(--e1);
}

/* font-size: 1rem, e não os 0.9rem de antes. Abaixo de 16px o Safari do iPhone
   dá zoom na página inteira ao focar o campo — e não desfaz sozinho depois. O
   controle continua parecendo pequeno pelo padding, não pela fonte. */
.filtro select,
.filtro input {
    border-color: transparent;
    box-shadow: none;
    background-color: transparent;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-height: 2.75rem;
    font-size: 1rem;
}

.filtro select { flex: 1 1 7.5rem; width: auto; }
.filtro input { flex: 0 1 5rem; width: auto; }

.filtro select:hover,
.filtro input:hover { border-color: transparent; background-color: var(--superficie-suave); }

/* min-height 2.5rem no lugar de 0: este é o controle mais usado do sistema, e
   era o menor dele — 35px de altura, abaixo do alvo de toque de qualquer
   celular. Continua visualmente compacto pelo padding horizontal. */
.filtro button {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0.25rem 0.9rem;
    font-size: 0.95rem;
}

/* Mês anterior / próximo mês: o passo de um mês é o movimento mais repetido do
   sistema, e custava três toques (abrir o select, rolar, "Ver"). São links GET
   comuns — sem JavaScript, e o "voltar" do navegador continua funcionando. */
.filtro-passo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: var(--raio-pequeno);
    color: var(--suave);
    text-decoration: none;
}

.filtro-passo:hover { background: var(--superficie-suave); color: var(--texto); }
.filtro-passo .icone { width: 1.1rem; height: 1.1rem; }

/* A mesma seta do "voltar", espelhada — não precisa de um segundo desenho. */
.filtro-passo.antes .icone { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Divisão entre responsáveis
   -------------------------------------------------------------------------- */

.divisao { display: flex; flex-direction: column; gap: var(--e2); }

/* Atalhos primeiro: é por eles que a maioria das linhas se resolve, sem
   ninguém digitar nada */
/* row-gap maior que o column-gap: quando as pílulas quebram linha, duas
   fileiras a 0.5rem uma da outra viram um campo minado para o polegar. */
.divisao-atalhos { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e2); }

.divisao-atalhos button {
    background: var(--superficie);
    color: var(--destaque-escuro);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pilula);
    padding: 0.3rem 0.9rem;
    /* Alvo de toque: é por estes botões que a maioria das linhas se resolve
       no celular, então eles não podem ser pequenos demais para o dedo. Eram
       2.25rem (36px) — a intenção estava escrita aqui, o número é que tinha
       ficado 8px curto do mínimo. */
    min-height: 2.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: none;
}

.divisao-atalhos button:hover {
    background: var(--destaque-fraco);
    border-color: var(--destaque-borda);
    color: var(--destaque-escuro);
    box-shadow: none;
}

/* O atalho escolhido fica preenchido: é o que responde "cliquei e funcionou" */
.divisao-atalhos button[aria-pressed="true"] {
    background: var(--preenchido);
    border-color: var(--preenchido);
    color: #fff;
    box-shadow: var(--sombra-1);
}

.divisao-atalhos button[aria-pressed="true"]:hover { background: var(--preenchido-forte); color: #fff; }

.divisao-resultado {
    margin: 0;
    font-size: 0.82rem;
    color: var(--texto);
    background: var(--destaque-fraco);
    border: 1px solid var(--destaque-borda);
    border-radius: var(--raio-pequeno);
    padding: var(--e2) var(--e3);
    font-variant-numeric: tabular-nums;
}

.divisao-detalhe { display: flex; flex-direction: column; gap: var(--e2); }

.divisao-modo { display: flex; align-items: center; gap: var(--e1); font-size: 0.8rem; }

/* % e R$ como um par de abas pequenas */
.divisao-modo label {
    display: flex;
    align-items: center;
    gap: var(--e1);
    color: var(--suave);
    cursor: pointer;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    padding: 0.15rem 0.6rem;
    min-height: 1.9rem;
}

.divisao-modo label:has(input:checked) {
    background: var(--destaque-fraco);
    border-color: var(--destaque-borda);
    color: var(--destaque-escuro);
    font-weight: 600;
}

.divisao-modo input { width: auto; }
.divisao-modo .soma { margin-left: auto; }

.divisao-pessoas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--e2);
    align-items: center;
}

.divisao-pessoas label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e2);
    font-size: 0.85rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--superficie);
    padding: 0.1rem var(--e2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.divisao-pessoas label:focus-within { border-color: var(--destaque); box-shadow: var(--anel); }
.divisao-pessoas label span { color: var(--suave); overflow: hidden; text-overflow: ellipsis; }

.divisao-pessoas input {
    width: 4.5rem;
    text-align: right;
    padding: 0.35rem var(--e1);
    border: 0;
    background: none;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
}

.divisao-pessoas input:hover,
.divisao-pessoas input:focus-visible { border: 0; box-shadow: none; }

/* "+ outra pessoa" herdava de .discreto um `padding: var(--e1) 0`, que zera o
   espaço horizontal: a área clicável era a largura exata das letras, com 29px
   de altura. Fica dentro do controle de divisão, que é por onde a maioria das
   linhas se resolve no celular. */
.divisao-pessoas button[data-mais] {
    justify-self: start;
    min-height: 2.75rem;
    padding: var(--e2) var(--e3);
}

.soma { font-size: 0.78rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.soma.fecha { color: var(--positivo); font-weight: 600; }
.soma.nao-fecha { color: var(--negativo); font-weight: 600; }

/* --------------------------------------------------------------------------
   Tela de login
   -------------------------------------------------------------------------- */

.porta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--e4);
    background:
        radial-gradient(50rem 32rem at 50% -8rem, var(--porta-brilho) 0%, transparent 70%),
        var(--fundo);
}

.porta .conteudo { width: 100%; max-width: 22rem; padding: 0; }

.porta-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--e1);
    margin-bottom: var(--e5);
}

.porta-marca .marca-selo { width: 2.5rem; height: 2.5rem; font-size: 0.9rem; margin-bottom: var(--e2); }
.porta h1 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.porta .cartao { box-shadow: var(--sombra-3); padding: var(--e5); }
.porta button { width: 100%; margin-top: var(--e2); }
.porta .campo-senha button { width: auto; margin-top: 0; }

/* --------------------------------------------------------------------------
   A partir do tablet
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
    .campos { grid-template-columns: 1fr 1fr; }
    .apelidos { grid-template-columns: 1fr 1fr; }
    .cartao { padding: var(--e5); margin-bottom: var(--e5); }
    .cartao-titulo { margin-bottom: var(--e4); }
    .numeros { gap: var(--e4); }
    .numero { padding: var(--e4) var(--e5); }
    .numero-valor { font-size: 1.6rem; }

    /* Ação na mesma linha do valor: em tela larga a linha inteira cabe de uma
       vez, e empilhar a ação embaixo só criaria altura à toa.
       A coluna do valor é largura fixa, e não `auto`: com `auto` cada <ul>
       calculava a própria largura pelo conteúdo, e o "R$" do Bradesco caía
       numa posição diferente do "R$" do Nubank na mesma tela — justamente na
       coluna que se compara com o olho. */
    .linha {
        grid-template-columns: auto minmax(0, 1fr) minmax(7rem, auto) minmax(6rem, auto);
        grid-template-areas: "selo texto valor acao";
        align-items: center;
        gap: var(--e4);
    }

    .linha-acao { justify-content: flex-end; }
    .linhas .linha-texto { align-self: center; }

    /* Na conferência da importação o controle de divisão é largo: ganha uma
       coluna própria, senão espreme o nome do gasto */
    .linhas.conferencia .linha {
        grid-template-columns: minmax(0, 1fr) auto minmax(16rem, 20rem);
        grid-template-areas: "texto valor acao";
        align-items: start;
    }

    .linhas.conferencia .linha-divisao { justify-self: stretch; }
}

/* --------------------------------------------------------------------------
   A partir do computador: a navegação vira coluna
   -------------------------------------------------------------------------- */

@media (min-width: 64em) {
    .app {
        display: grid;
        grid-template-columns: var(--lateral-largura) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        min-height: 100vh;
    }

    /* Aqui a barra volta a ser fixa: no computador ela é o topo do layout em
       grade, e a altura da tela não é o recurso escasso que é no celular. */
    .barra { position: sticky; top: 0; grid-column: 1 / -1; padding: 0 var(--e5); }

    .lateral {
        position: sticky;
        top: var(--barra-altura);
        left: auto;
        right: auto;
        bottom: auto;
        grid-column: 1;
        align-self: start;
        height: calc(100vh - var(--barra-altura));
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--e1);
        padding: var(--e4) var(--e3);
        border-top: 0;
        border-right: 1px solid var(--borda);
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .lateral .item {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--e3);
        width: 100%;
        font-size: 0.9rem;
        padding: var(--e2) var(--e3);
        min-height: 2.6rem;
    }

    .lateral .item:hover { background: var(--superficie); }

    .lateral .item[aria-current="page"] {
        background: var(--destaque-fraco);
        color: var(--destaque-escuro);
        font-weight: 600;
        box-shadow: var(--sombra-1);
    }

    .lateral .item[aria-current="page"] .icone { transform: none; }

    .conteudo {
        grid-column: 2;
        margin: 0;
        padding: var(--e6) var(--e6) var(--e6) var(--e5);
        padding-bottom: var(--e6);
    }

    .acoes.fixa { bottom: var(--e4); }

    /* No computador a navegação é a coluna da esquerda, não uma barra que
       rouba altura — então ela fica, inclusive no formulário longo. */
    .tela-formulario .lateral { display: flex; }
    .tela-formulario .acoes.fixa { bottom: var(--e4); }

    h1 { font-size: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Tela escura

   Segue a escolha do aparelho, e só. Não há botão de alternar de propósito:
   botão significa guardar preferência, preferência guardada significa mais um
   estado para manter — e quem quer escuro já configurou o celular.

   Este bloco redefine SÓ os tokens do :root. Nenhuma regra de componente muda
   e nenhuma view é tocada — é a recompensa de a folha ter sido escrita em
   variáveis desde o começo.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #0e131c;
        --superficie: #161d2a;
        --superficie-suave: #1d2634;
        --borda: #28313f;
        --borda-forte: #3a4454;
        --texto: #e8ecf3;
        --suave: #9aa5b6;
        --apagado: #7d8797;

        /* O azul de TEXTO clareia: #2f5bea sobre fundo escuro não se lê. */
        --destaque: #6d92ff;
        --destaque-escuro: #9db6ff;
        /* Os fundos "fracos" invertem a lógica: no escuro são um tom mais
           claro que a superfície, não mais escuro. */
        --destaque-fraco: #1c2743;
        --destaque-borda: #2f4270;

        /* O azul de PREENCHIMENTO não clareia junto — ele continua carregando
           texto branco em cima. Só o hover fica mais vivo, em vez de mais
           fundo, que é o que "mais forte" quer dizer no escuro. */
        --preenchido: #2f5bea;
        --preenchido-forte: #4269ea;

        --positivo: #4ecf8f;
        --positivo-fraco: #12291f;
        --positivo-barra: #34c07a;
        --negativo: #ff7b8f;
        --negativo-fraco: #2d1720;

        --ok-fundo: #12291f;
        --ok-borda: #1f5238;
        --ok-texto: #63d79b;
        --erro-fundo: #2d1720;
        --erro-borda: #5c2635;
        --erro-texto: #ff8fa1;
        --atencao-fundo: #2a2213;
        --atencao-borda: #574421;
        --atencao-texto: #e5b95f;

        --vidro: rgba(22, 29, 42, 0.92);
        --vidro-leve: rgba(22, 29, 42, 0.82);
        --vidro-claro: rgba(0, 0, 0, 0.28);
        --trilho: #232c3a;
        --porta-brilho: #16224a;

        /* Sombra no escuro precisa ser mais funda para separar duas
           superfícies que já são parecidas entre si. */
        --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --sombra-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.7);
        --sombra-3: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
        --anel: 0 0 0 3px rgba(109, 146, 255, 0.32);
    }

    /* O gradiente do cartão claro clareia demais no escuro e some contra a
       superfície — no escuro ele vira cor chapada com a borda dizendo o tom. */
    .cartao.destaque { background: var(--ok-fundo); }
    .cartao.titular { background: var(--destaque-fraco); }
}

/* Quem pediu menos movimento não recebe nenhum: as transições daqui são
   enfeite, nenhuma delas carrega informação */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    /* Vem depois do bloco escuro de propósito: quem está com o aparelho no
       tema escuro imprimiria texto claro sobre papel branco. No papel a
       paleta é sempre a clara. */
    :root {
        --fundo: #ffffff;
        --superficie: #ffffff;
        --superficie-suave: #ffffff;
        --borda: #dddddd;
        --borda-forte: #bbbbbb;
        --texto: #000000;
        --suave: #555555;
        --apagado: #777777;
        --destaque: #1e40c8;
        --destaque-escuro: #1e40c8;
        --destaque-fraco: #ffffff;
        --positivo: #0f7a45;
        --negativo: #c0304a;
        --ok-texto: #0f7a45;
        --erro-texto: #b02a45;
        --atencao-texto: #8a5b09;
    }

    .barra, .lateral, .filtro, .linha-acao, .acoes, .pular { display: none !important; }
    body { background: #fff; color: #000; }
    .conteudo { padding: 0; max-width: none; }
    .cartao, .numero { border: 1px solid #ddd; box-shadow: none; }
    .cartao.destaque, .cartao.titular, .numero.destaque { background: #fff; color: #000; }
    .numero.destaque .numero-rotulo, .numero.destaque .numero-nota { color: #555; }
}