/* ── Financeiro (Acertos / Minhas contas) ─────────────────────────────────
   Usa apenas tokens --ucp-* do design-system.css. Nenhuma cor literal aqui:
   é isso que faz o dark mode funcionar sozinho e a tela envelhecer junto com
   o resto do produto quando a paleta mudar.
────────────────────────────────────────────────────────────────────────── */

.ucp-fin {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Dígitos de mesma largura. Sem isto a coluna de valores fica serrilhada e o
   olho perde a comparação, que é o trabalho inteiro desta tela. */
.ucp-fin-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── Avisos ───────────────────────────────────────────────────────────── */

.ucp-fin-flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.ucp-fin-flash p { margin: 0; font-size: .9375rem; line-height: 1.5; }

.ucp-fin-flash--ok {
    background: var(--ucp-success-bg);
    border-color: var(--ucp-success);
    color: var(--ucp-success);
}

.ucp-fin-flash--erro {
    background: var(--ucp-danger-bg);
    border-color: var(--ucp-danger);
    color: var(--ucp-danger);
}

/* ── Cabeçalho com o número que importa ───────────────────────────────── */

.ucp-fin-hero {
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-radius: 20px;
    padding: 24px 20px;
    text-align: center;
}

.ucp-fin-hero-label {
    margin: 0;
    font-size: .875rem;
    color: var(--ucp-text-muted);
    letter-spacing: .01em;
}

.ucp-fin-hero-value {
    margin: 4px 0 0;
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ucp-primary);
}

.ucp-fin-hero--quitado .ucp-fin-hero-value { color: var(--ucp-text-secondary); }

.ucp-fin-hero-sub {
    margin: 6px 0 0;
    font-size: .875rem;
    color: var(--ucp-text-muted);
}

.ucp-fin-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ucp-border);
}

.ucp-fin-stat dt {
    font-size: .75rem;
    color: var(--ucp-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ucp-fin-stat dd {
    margin: 2px 0 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ucp-text);
}

/* ── Cartões e seções ─────────────────────────────────────────────────── */

.ucp-fin-card {
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-radius: 16px;
    padding: 18px;
}

.ucp-fin-card-title,
.ucp-fin-secao-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ucp-text);
}

.ucp-fin-secao-titulo { margin-bottom: 10px; }

.ucp-fin-sub-titulo {
    margin: 18px 0 8px;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ucp-text-muted);
}

.ucp-fin-hint {
    margin: 8px 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ucp-text-muted);
}

.ucp-fin-hint--alerta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ucp-warning-bg);
    color: var(--ucp-text-secondary);
}

.ucp-fin-hint--alerta .material-symbols-outlined { color: var(--ucp-warning); font-size: 20px; }

/* ── PIX ──────────────────────────────────────────────────────────────── */

.ucp-fin-pix-atual {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

.ucp-fin-pix-tipo {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--ucp-primary-light);
    color: var(--ucp-green-700);
}

.ucp-fin-pix-chave {
    font-size: .875rem;
    word-break: break-all;
    color: var(--ucp-text);
}

/* ── Formulários ──────────────────────────────────────────────────────── */

.ucp-fin-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

.ucp-fin-field { display: flex; flex-direction: column; gap: 6px; }

.ucp-fin-field > label,
.ucp-fin-field > span {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ucp-text-secondary);
}

.ucp-fin-field input[type="text"],
.ucp-fin-field select {
    /* 44px de altura: alvo mínimo de toque. 16px de fonte evita o zoom
       automático do Safari no iOS ao focar o campo. */
    min-height: 44px;
    padding: 10px 12px;
    font-size: 1rem;
    color: var(--ucp-text);
    background: var(--ucp-surface-lowest);
    border: 1px solid var(--ucp-border);
    border-radius: 10px;
}

.ucp-fin-field input[type="text"]:focus-visible,
.ucp-fin-field select:focus-visible {
    outline: 2px solid var(--ucp-border-focus);
    outline-offset: 2px;
    border-color: var(--ucp-border-focus);
}

.ucp-fin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ucp-fin-field--inline { flex-direction: row; align-items: center; gap: 8px; }

.ucp-fin-help { margin: 0; font-size: .75rem; color: var(--ucp-text-muted); }

.ucp-fin-form-oculto { display: contents; }

.ucp-fin-fieldset { border: 0; padding: 0; margin: 0; }

.ucp-fin-legend {
    padding: 0;
    margin-bottom: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ucp-text-secondary);
}

/* ── Sanfona ──────────────────────────────────────────────────────────── */

.ucp-fin-details > summary { cursor: pointer; list-style: none; }
.ucp-fin-details > summary::-webkit-details-marker { display: none; }

.ucp-fin-details > summary:focus-visible {
    outline: 2px solid var(--ucp-border-focus);
    outline-offset: 2px;
    border-radius: 12px;
}

.ucp-fin-summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ucp-primary);
}

.ucp-fin-chevron {
    color: var(--ucp-text-muted);
    transition: transform .2s ease-out;
}

.ucp-fin-details[open] > summary .ucp-fin-chevron { transform: rotate(180deg); }

/* ── Filtro por mês ───────────────────────────────────────────────────── */

.ucp-fin-meses {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.ucp-fin-mes {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--ucp-border);
    background: var(--ucp-card-bg);
    color: var(--ucp-text-secondary);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.ucp-fin-mes:hover { border-color: var(--ucp-primary); color: var(--ucp-primary); }

.ucp-fin-mes.is-ativo {
    background: var(--ucp-primary);
    border-color: var(--ucp-primary);
    color: #fff;
}

.ucp-fin-mes:focus-visible { outline: 2px solid var(--ucp-border-focus); outline-offset: 2px; }

/* ── Lista de pessoas ─────────────────────────────────────────────────── */

.ucp-fin-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.ucp-fin-devedor {
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-radius: 16px;
    overflow: hidden;
}

.ucp-fin-devedor-cabeca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 68px;
}

.ucp-fin-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ucp-surface);
    flex: 0 0 auto;
}

.ucp-fin-devedor-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.ucp-fin-devedor-nome {
    /* Sem font-size explicito o nome herda o tamanho do tema (grande no
       Twenty Twenty-Five) e trunca em "Lucas Ma..." num telefone de 390px. */
    font-size: .9375rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ucp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ucp-fin-devedor-meta { font-size: .8125rem; color: var(--ucp-text-muted); }

.ucp-fin-devedor-valor { font-weight: 700; font-size: 1.0625rem; color: var(--ucp-text); }

/* ── Caronas ──────────────────────────────────────────────────────────── */

.ucp-fin-quitar { padding: 0 14px 14px; }

.ucp-fin-caronas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.ucp-fin-caronas--leitura { padding: 0 14px 14px; }

.ucp-fin-carona {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--ucp-border);
}

.ucp-fin-carona-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-height: 52px;
    padding: 8px 0;
    cursor: pointer;
    min-width: 0;
}

.ucp-fin-carona-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--ucp-primary);
}

.ucp-fin-carona-label input:focus-visible { outline: 2px solid var(--ucp-border-focus); outline-offset: 2px; }

.ucp-fin-carona-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.ucp-fin-carona-rota {
    font-size: .875rem;
    color: var(--ucp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ucp-fin-carona-data { font-size: .75rem; color: var(--ucp-text-muted); }

.ucp-fin-carona-valor { font-size: .9375rem; font-weight: 600; color: var(--ucp-text); }

/* ── Botão só de ícone ────────────────────────────────────────────────── */

.ucp-fin-icone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ucp-text-muted);
    cursor: pointer;
}

.ucp-fin-icone-btn:hover { background: var(--ucp-surface); color: var(--ucp-danger); }
.ucp-fin-icone-btn:focus-visible { outline: 2px solid var(--ucp-border-focus); outline-offset: 2px; }

/* ── Ação de quitar ───────────────────────────────────────────────────── */

.ucp-fin-quitar-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ucp-border);
}

.ucp-fin-quitar-btn { width: 100%; min-height: 48px; }

.ucp-fin-quitar-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Copiar PIX ───────────────────────────────────────────────────────── */

.ucp-fin-pagar {
    margin: 0 14px 4px;
    padding: 14px;
    border-radius: 12px;
    background: var(--ucp-surface-low);
    border: 1px solid var(--ucp-border);
}

.ucp-fin-pagar-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ucp-text);
}

.ucp-fin-copiar { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.ucp-fin-brcode {
    display: block;
    padding: 10px;
    border-radius: 8px;
    background: var(--ucp-surface-lowest);
    border: 1px solid var(--ucp-border);
    font-size: .6875rem;
    line-height: 1.5;
    word-break: break-all;
    color: var(--ucp-text-secondary);
    max-height: 88px;
    overflow-y: auto;
}

.ucp-fin-copiar-btn { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.ucp-fin-pagar-chave { margin: 10px 0 0; font-size: .8125rem; color: var(--ucp-text-secondary); word-break: break-all; }

/* ── Histórico ────────────────────────────────────────────────────────── */

.ucp-fin-historico { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.ucp-fin-hist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-radius: 12px;
}

.ucp-fin-hist-icone { color: var(--ucp-success); flex: 0 0 auto; }

.ucp-fin-hist-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.ucp-fin-hist-nome {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--ucp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ucp-fin-hist-meta { font-size: .75rem; color: var(--ucp-text-muted); }

.ucp-fin-hist-valor { font-weight: 600; color: var(--ucp-success); }

.ucp-fin-hist-undo { display: flex; flex: 0 0 auto; }

/* ── Estado vazio ─────────────────────────────────────────────────────── */

.ucp-fin-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 40px 24px;
    background: var(--ucp-card-bg);
    border: 1px dashed var(--ucp-border);
    border-radius: 16px;
}

.ucp-fin-vazio-icone { font-size: 48px; color: var(--ucp-primary); opacity: .55; }

.ucp-fin-vazio-titulo { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--ucp-text); }

.ucp-fin-vazio-texto { margin: 0; max-width: 42ch; font-size: .875rem; line-height: 1.55; color: var(--ucp-text-muted); }

.ucp-fin-vazio .ucp-btn { margin-top: 8px; }

/* ── Telas maiores ────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .ucp-fin { padding: 24px 24px 64px; gap: 28px; }

    .ucp-fin-quitar-acoes { flex-direction: row; align-items: center; justify-content: space-between; }
    .ucp-fin-quitar-btn { width: auto; min-width: 260px; }

    .ucp-fin-copiar { flex-direction: row; align-items: stretch; }
    .ucp-fin-brcode { flex: 1; max-height: none; }
    .ucp-fin-copiar-btn { width: auto; flex: 0 0 auto; padding-inline: 20px; }
}

/* ── Movimento reduzido ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ucp-fin-chevron { transition: none; }
}

/* ── Correções de largura em telas estreitas ──────────────────────────────
   Medido no navegador a 390px: o tema já aplica seu próprio recuo e o cartão
   sobrava com 296px, deixando 93px para o nome — "Ana Carolina Souza" precisa
   de 142px. Truncar era o sintoma; a causa é orçamento de largura.
────────────────────────────────────────────────────────────────────────── */

/* Nome e rota passam a QUEBRAR em duas linhas em vez de virar "Ana Ca...".
   Ler o nome inteiro importa mais do que manter tudo numa linha só. */
.ucp-fin-devedor-nome,
.ucp-fin-carona-rota {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

@media (max-width: 479px) {
    /* O recuo do tema já separa da borda; o nosso só estreitava o conteúdo. */
    .ucp-fin { padding-inline: 4px; }
    .ucp-fin-devedor-cabeca { gap: 10px; padding-inline: 12px; }
    .ucp-fin-avatar { width: 40px; height: 40px; }
    .ucp-fin-devedor-valor { font-size: 1rem; }

    /* O chevron é decorativo: a sanfona toda é clicável, então ele pode encolher
       para devolver largura ao texto. */
    .ucp-fin-chevron { font-size: 20px; margin-inline-start: -2px; }
}

/* Origem e destino em linhas próprias. Numa única linha o corte cai justamente
   no destino — que é o que identifica a carona ("Campus UFRPE (Dois Irmãos) →
   ..." não diz nada). Cada metade ganha a largura inteira e só o nome mais longo
   trunca, nunca os dois. */
.ucp-fin-carona-rota {
    display: flex;
    flex-direction: column;
    gap: 1px;
    -webkit-line-clamp: none;
    line-clamp: none;
}

.ucp-fin-carona-de,
.ucp-fin-carona-para {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ucp-fin-carona-de { color: var(--ucp-text-muted); font-size: .8125rem; }

.ucp-fin-carona-para {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--ucp-text);
    font-weight: 500;
}

.ucp-fin-carona-para .material-symbols-outlined {
    font-size: 16px;
    flex: 0 0 auto;
    color: var(--ucp-primary);
}

/* ── Painel admin ─────────────────────────────────────────────────────────
   Tabela rola dentro do próprio container: o corpo da página nunca ganha
   barra horizontal, que é a regra §5 (horizontal-scroll).
────────────────────────────────────────────────────────────────────────── */

.ucp-fin-stats--3 { grid-template-columns: repeat(3, 1fr); }

.ucp-fin-tabela-wrap {
    overflow-x: auto;
    border: 1px solid var(--ucp-border);
    border-radius: 12px;
    background: var(--ucp-card-bg);
}

.ucp-fin-tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }

.ucp-fin-tabela th,
.ucp-fin-tabela td {
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--ucp-border);
}

.ucp-fin-tabela thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ucp-text-muted);
    background: var(--ucp-surface);
}

.ucp-fin-tabela tbody tr:last-child th,
.ucp-fin-tabela tbody tr:last-child td { border-bottom: 0; }

.ucp-fin-tabela tbody th { font-weight: 600; color: var(--ucp-text); }

.ucp-fin-num { text-align: right; }

/* Ícone + palavra: a informação nunca depende só da cor (§1 color-not-only). */
.ucp-fin-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.ucp-fin-badge .material-symbols-outlined { font-size: 15px; }

.ucp-fin-badge.is-ok    { background: var(--ucp-success-bg); color: var(--ucp-success); }
.ucp-fin-badge.is-falta { background: var(--ucp-warning-bg); color: var(--ucp-warning); }

@media (max-width: 479px) {
    .ucp-fin-stats--3 { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Gráfico de ganhos ────────────────────────────────────────────────────
   As duas cores foram escolhidas rodando o validador de daltonismo, não a
   olho: verde-700 + laranja dá ΔE 16,7 em protanopia, contra 6,3 do par
   "óbvio" (verde da marca + laranja). No escuro o verde sobe para o degrau
   300, que mantém ΔE 13,9 e passa no contraste. Os dois já são tokens.
────────────────────────────────────────────────────────────────────────── */

.ucp-fin-ganhos {
    --ucp-serie-recebido: var(--ucp-green-700);
    --ucp-serie-aberto:   var(--ucp-warning);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ucp-fin-ganhos {
        --ucp-serie-recebido: var(--ucp-green-300);
    }
}

:root[data-theme="dark"] .ucp-fin-ganhos { --ucp-serie-recebido: var(--ucp-green-300); }

.ucp-fin-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    list-style: none;
    margin: 12px 0 4px;
    padding: 0;
    font-size: .8125rem;
    color: var(--ucp-text-secondary);
}

.ucp-fin-legenda li { display: inline-flex; align-items: center; gap: 6px; }

.ucp-fin-legenda-cor { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.ucp-fin-legenda-cor--recebido { background: var(--ucp-serie-recebido); }
.ucp-fin-legenda-cor--aberto   { background: var(--ucp-serie-aberto); }

.ucp-fin-grafico {
    display: block;
    width: 100%;
    height: 150px;
    margin-top: 4px;
    overflow: visible;
}

.ucp-fin-barra--recebido { fill: var(--ucp-serie-recebido); }
.ucp-fin-barra--aberto   { fill: var(--ucp-serie-aberto); }

/* O SVG usa preserveAspectRatio="none", então o texto esticaria junto com a
   caixa. vector-effect mantém a linha fina, e o texto recebe tamanho em px
   via CSS para não deformar. */
.ucp-fin-eixo {
    stroke: var(--ucp-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ucp-fin-valor-barra,
.ucp-fin-mes-barra {
    fill: var(--ucp-text-muted);
    font-size: 5px;
}

.ucp-fin-valor-barra { fill: var(--ucp-text); font-weight: 600; }

.ucp-fin-ganhos-tabela { margin-top: 10px; }

/* Movimento reduzido não afeta este gráfico (ele não anima), mas o
   :focus-visible do <details> continua valendo. */

/* ── "Já paguei" ──────────────────────────────────────────────────────────
   O botão é do passageiro e NÃO quita nada — o texto de apoio diz isso em
   voz alta, porque um botão verde grande com "já paguei" sugere o contrário.
────────────────────────────────────────────────────────────────────────── */

.ucp-fin-avisar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 14px 0;
}

.ucp-fin-avisar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
}

.ucp-fin-avisado {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 14px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ucp-surface);
}

.ucp-fin-badge.is-avisou {
    background: var(--ucp-warning-bg);
    color: var(--ucp-warning);
    margin-inline-start: 6px;
}