/* ============================================================
   WalletDashboard.css — Dashboard da Carteira (Atividade 2)
   Layout FIEL aos frames do Figma (Dashboard - ARK Web Responsivo,
   telas 1/3/5/7). Paleta sky + gray hardcoded, modo Day, sem dark.
   ============================================================ */

/* Lato (rótulos do cartão de crédito) não vem no _Layout — import por
   módulo, mesmo padrão do ContentDetail.css. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');

/* Coluna flex: o .wallet-inner cresce e empurra o rodapé (irmão dele) para a
   base da página — o rodapé fica sempre "colado embaixo", com o conteúdo
   curto ou longo. */
.wallet-dash {
    background: #e5e7eb;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
}

/* Solicitações de pagamento cripto pendentes: aviso persistente fora das abas.
   O estado vem de /requests; não há fecho manual porque só desaparece quando a
   solicitação deixa de estar pending (paga, recusada, cancelada ou expirada). */
.wallet-payment-toast-viewport {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1080;
    width: min(384px, calc(100vw - 32px));
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    pointer-events: none;
}

.wallet-payment-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #374151;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
    pointer-events: auto;
}

.wallet-payment-toast-icon {
    grid-row: 1 / span 2;
    padding-top: 1px;
    color: #0ea5e9;
    font-size: 18px;
}

.wallet-payment-toast-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    line-height: 1.4;
}

.wallet-payment-toast-copy strong {
    color: #111827;
    font-size: 15px;
}

.wallet-payment-toast-action {
    grid-column: 2;
    justify-self: start;
    padding: 8px 14px;
    border: 0;
    border-radius: 4px;
    background: #0ea5e9;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.wallet-payment-toast-action:hover {
    background: #0284c7;
}

@media (max-width: 600px) {
    .wallet-payment-toast-viewport {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }
}

/* ---------- Sub-header do módulo (barra azul com gradiente) ---------- */
.wallet-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 32px;
    background: linear-gradient(90deg, #1e88c7 0%, #0b3a5c 100%);
    color: #fff;
}

.wallet-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
}

.wallet-topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #e0f2fe;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.wallet-topbar-ctx {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.wallet-topbar-ctx:hover {
    background: rgba(255, 255, 255, 0.2);
}

.wallet-topbar-spacer {
    flex: 1;
}

.wallet-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #0b3a5c;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.wallet-topbar-btn:hover {
    background: var(--card-bg);
}

.wallet-topbar-bell {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #38bdf8;
    color: #fff;
    cursor: pointer;
}

/* ---------- Container interno ----------
   O rodapé fica FORA deste container (filho direto do .wallet-dash), por
   isso o padding inferior é só o respiro até ele (24px, igual ao gap). */
.wallet-inner {
    width: 100%;
    max-width: 1200px; /* mesmo frame de conteúdo do dApp embutido */
    margin: 0 auto;
    padding: 32px 32px 24px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Em telas largas o frame acompanha o do dApp: 1440px a partir de 1280 e
   1536px a partir de 1536, com o mesmo padding lateral em cada faixa. */
@media (min-width: 1280px) {
    .wallet-inner {
        max-width: 1440px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1536px) {
    .wallet-inner {
        max-width: 1536px;
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* ---------- Saudação + tabs ---------- */
.wallet-greet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* Somado ao gap de 24px do .wallet-inner: 40px até o primeiro card. */
    margin-bottom: 16px;
}

.wallet-greet-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 38.15px;
    letter-spacing: 0;
    color: #4B5563; /* cool-gray-600 */
    margin: 0;
}

.wallet-greet-sub {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 17.34px;
    letter-spacing: 0.17px;
    color: var(--text-secondary);
    margin: 5px 0 0;
}

/* Sem padding interno: o tab ativo encosta na borda do trilho (nada de
   oval azul dentro de outro branco, como no Figma). Largura fixa com os
   três tabs repartidos por igual, como o seletor equivalente do dApp. */
.wallet-tabs {
    display: inline-flex;
    width: 100%;
    max-width: 500px;
    background: var(--card-bg);
    padding: 0;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wallet-tab {
    flex: 1 1 0;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(55, 65, 81, 1); /* cool-gray-700 */
    font-family: 'SF Pro Display', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wallet-tab.is-active {
    background: rgba(14, 165, 233, 1);
    color: #fff;
}

/* ---------- Grids ---------- */
.wallet-grid {
    display: grid;
    gap: 20px;
}

.wallet-grid-3 {
    /* Promo de Investimentos (3.ª coluna) mais estreita: 0.8 do que cada card de saldo. A
       mesma proporção repete-se em .wallet-grid-2a para alinhar a coluna. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
}
/* Os dois cards de saldo da Linha 1 mantêm os cantos de 10px. */
.wallet-grid-3 > .wallet-card {
    border-radius: 10px;
}

.wallet-grid-2 {
    grid-template-columns: 1fr 1fr;
}

/* Estado conectado de Todas as Carteiras: as duas colunas principais repetem
   a largura dos saldos da Linha 1; Exchange alinha com Quotes/Gestão. */
.wallet-grid-connected-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
}

/* Conta Open Finance funcional no lugar do antigo resumo laranja duplicado.
   Uma única conexão fica visível; as demais são acessadas pelo carrossel. */
.wallet-connected-accounts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.wallet-connected-carousel {
    position: relative;
    min-width: 0;
}

.wallet-connected-carousel > .wallet-account-card {
    width: 100%;
    min-width: 0;
}

.wallet-connected-carousel-nav {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: 3;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #f47b20;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.wallet-connected-carousel-nav.is-prev {
    left: 12px;
}

.wallet-connected-carousel-nav.is-next {
    right: 12px;
}

.wallet-connected-carousel-nav > span {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.wallet-connected-carousel-nav.is-prev > span {
    margin-left: 4px;
    transform: rotate(135deg);
}

.wallet-connected-carousel-nav.is-next > span {
    margin-right: 4px;
    transform: rotate(-45deg);
}

.wallet-connected-carousel-nav:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
    transform: translateY(-50%) scale(1.05);
}

.wallet-connected-carousel-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.wallet-connected-carousel-nav:disabled {
    cursor: wait;
    opacity: 0.55;
}

.wallet-connected-carousel.has-controls .wallet-account-body {
    padding-inline: 38px;
}

/* Linha 2: o banner define o tamanho padrão do slot principal. O cartão
   conectado ocupa exatamente a mesma largura e altura, sem alterar Exchange. */
.wallet-grid-bank-row {
    align-items: stretch;
}

.wallet-bank-slot {
    display: grid;
    min-width: 0;
    min-height: 240px;
}

.wallet-bank-slot > *,
.wallet-bank-slot .wallet-connected-carousel,
.wallet-bank-slot .wallet-account-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 240px;
    box-shadow: none;
}

.wallet-grid-bank-row > .wallet-promo {
    min-height: 240px;
}

/* banner largo + promo estreita — a coluna da direita tem exatamente a largura
   de uma coluna da Linha 1 (1/3 menos os gaps), para Quotes, Exchange e
   Gestão Financeira ficarem alinhados na mesma coluna. */
.wallet-grid-2a {
    /* = largura da 3.ª coluna da Linha 1: (100% - 2 gaps) × 0.8 / 2.8 */
    grid-template-columns: minmax(0, 1fr) calc((100% - 40px) * 0.8 / 2.8);
}

.wallet-grid-1-16 {
    /* A coluna esquerda nunca encolhe abaixo do que a linha "Selecione o
       período" precisa; quem cede largura ao reduzir a janela é o gráfico
       (minmax(0, …) deixa o card encolher além do min-content do SVG). */
    grid-template-columns: minmax(400px, 1fr) minmax(0, 1.7fr);
}

.wallet-grid-14-1 {
    /* Proporção do Figma: transações ≈ 690px × cartões ≈ 505px. */
    grid-template-columns: 1.37fr 1fr;
}

.wallet-grid-3col {
    /* Proporções do Figma (~275 × 820 × 370 px): KPIs estreitos, o gráfico
       leva a maior parte da largura. */
    grid-template-columns: 0.75fr 2.2fr 1fr;
}

.wallet-grid-06-2 {
    /* Mesma largura de coluna dos KPIs do Overview (0.75/3.95 ≈ 19%). */
    grid-template-columns: 0.75fr 3.2fr;
}

.wallet-grid-1-12 {
    grid-template-columns: 1fr 1.25fr;
}

.wallet-grid-tokens {
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}

/* ---------- Card base ---------- */
.wallet-card {
    background: var(--card-bg);
    border: none;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.wallet-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wallet-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.wallet-card-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.wallet-card-add:hover {
    background: #f3f4f6;
}

.wallet-card-update {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Card escuro (JRBank) — gradiente preto → azul, horizontal (frame 1/3) */
.wallet-card-dark {
    background: linear-gradient(105deg, #0b1220 0%, #10263c 45%, #1e88c7 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Card azul (saldo total FIAT/Crypto) */
.wallet-card-blue {
    background: linear-gradient(135deg, #1e88c7 0%, #0b3a5c 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Card laranja (conta bancária — Inter, frame 3) */
.wallet-card-orange {
    background: linear-gradient(120deg, #ff8a3d 0%, #f2661a 55%, #e2540d 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.wallet-card-dark::after,
.wallet-card-orange::after,
.wallet-card-blue::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 55%);
    pointer-events: none;
}

.wallet-card-dark > *,
.wallet-card-orange > *,
.wallet-card-blue > * {
    position: relative;
    z-index: 1;
}

.wallet-card-dark .wallet-card-title,
.wallet-card-orange .wallet-card-title,
.wallet-card-blue .wallet-card-title {
    color: #fff;
}

.wallet-card-dark .wallet-card-add,
.wallet-card-orange .wallet-card-add,
.wallet-card-blue .wallet-card-add {
    background: rgba(255, 255, 255, 0.95);
    border-color: transparent;
    color: var(--text-color);
}

/* ---------- Tipografia de valores/labels ---------- */
.wallet-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wallet-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color);
    margin: 6px 0 0;
    letter-spacing: -0.5px;
}

.wallet-value small {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 6px;
    letter-spacing: 0;
}

.wallet-card-dark .wallet-value,
.wallet-card-orange .wallet-value,
.wallet-card-blue .wallet-value {
    color: #fff;
}

.wallet-card-dark .wallet-label,
.wallet-card-orange .wallet-label,
.wallet-card-blue .wallet-label {
    color: rgba(255, 255, 255, 0.75);
}

.wallet-subcard {
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
}

.wallet-card-blue .wallet-subcard {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
}

.wallet-subvalue {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0 0;
    color: var(--text-color);
}

.wallet-card-blue .wallet-subvalue {
    color: #fff;
}

/* Tendência */
.wallet-up {
    color: #16a34a;
    font-weight: 600;
}

.wallet-down {
    color: #ef4444;
    font-weight: 600;
}

/* ---------- Chips de moeda / filtros ---------- */
.wallet-coins {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.wallet-coin {
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.wallet-coin.is-active {
    background: #1e88c7;
    color: #fff;
}

.wallet-card-dark .wallet-coin,
.wallet-card-blue .wallet-coin {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.wallet-card-dark .wallet-coin.is-active,
.wallet-card-blue .wallet-coin.is-active {
    background: var(--card-bg);
    color: #0b3a5c;
}

/* ---------- Cotações (Quotes) ---------- */
.wallet-quotes-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 30.72px;
    text-align: center;
    color: #4B5563; /* cool-gray-600 */
    margin: 0 0 14px;
}

.wallet-mini-table,
.wallet-tx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wallet-mini-table th,
.wallet-tx-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
}

.wallet-mini-table td,
.wallet-tx-table td {
    padding: 12px 8px;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

.wallet-mini-table tr:last-child td,
.wallet-tx-table tr:last-child td {
    border-bottom: none;
}

/* ---------- Conta bancária destaque (laranja, frame 3) ---------- */
.wallet-acc-country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.wallet-acc-flag {
    width: 22px;
    height: auto;
    border-radius: 3px;
}

.wallet-acc-info {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-size: 12px;
}

.wallet-acc-bankrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 13px;
    opacity: 0.95;
}

.wallet-acc-bank {
    font-weight: 600;
}

.wallet-acc-dots {
    display: inline-flex;
    gap: 4px;
    font-size: 6px;
    align-items: center;
}

.wallet-acc-body {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.wallet-acc-logo {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-weight: 700;
    font-size: 24px;
    flex: 0 0 auto;
}

.wallet-acc-balance {
    margin: 0;
    font-size: 30px;
}

.wallet-acc-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.wallet-btn-white {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.wallet-btn-white:hover {
    background: var(--card-bg);
}

/* ---------- Banner Open Finance (frame 1) ---------- */
.wallet-banner {
    position: relative;
    border-radius: 16px;
    padding: 36px 40px;
    color: #fff;
    background-color: #0b3a5c;
    background-size: cover;
    background-position: center right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 240px;
    justify-content: center;
    overflow: hidden;
}

.wallet-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 30, 50, 0.92) 0%, rgba(9, 30, 50, 0.55) 45%, rgba(9, 30, 50, 0) 75%);
}

.wallet-banner > * {
    position: relative;
    z-index: 1;
}

.wallet-banner-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 500;
}

.wallet-banner-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    max-width: 22ch;
}

.wallet-banner-text {
    font-size: 14px;
    margin: 0;
    opacity: 0.92;
    max-width: 42ch;
    line-height: 1.5;
}

.wallet-banner-text b {
    font-weight: 700;
}

/* ---------- Promo (Investimentos / Exchange / Gestão Financeira) ---------- */
.wallet-promo {
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.wallet-promo-img {
    height: 118px;
    background-size: cover;
    background-position: center;
    background-color: #cbd5e1;
}

/* Em laptop/desktop, Investimentos divide a linha com os cards de saldo e fica
   mais alto que as promos laterais. A imagem ocupa melhor essa altura sem
   alterar o reflow de tablet/mobile (onde a terceira coluna já desce). */
@media (min-width: 1024px) {
    .wallet-grid-3 > .wallet-promo .wallet-promo-img {
        height: 150px;
    }
}

.wallet-promo-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    flex: 1;
}

.wallet-promo-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.wallet-promo-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 5px 0 0;
    line-height: 1.4;
}

.wallet-promo-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #1f2937;
    color: #fff;
    cursor: pointer;
}

.wallet-promo-go:hover {
    background: #111827;
}

/* ---------- Cards de saldo (FIAT / Crypto) — layout de referência ---------- */
/* Título numa só linha, botão sem quebra, "última atualização" em itálico à
   direita, valor grande com a moeda pequena ao lado e o seletor de moeda
   segmentado (uma linha, 5 colunas iguais). */
.wallet-balance-card .wallet-card-head {
    align-items: flex-start;
}
.wallet-balance-card .wallet-card-title {
    min-width: 0;
    /* Encolhe um pouco em ecrãs mais estreitos (3 colunas apertadas) antes de
       recorrer às reticências. */
    font-size: clamp(15px, 1.4vw, 20px);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.wallet-balance-card .wallet-card-add,
.wallet-account-card .wallet-card-add {
    white-space: nowrap;
    font-weight: 500;
    font-size: 12px;
    padding: 6px 10px;
    gap: 5px;
    border-radius: 3px;
}
.wallet-balance-card .wallet-card-update {
    margin-top: 14px;
    text-align: right;
    font-style: italic;
}
.wallet-balance-card .wallet-balance-label {
    margin-top: 18px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
}
.wallet-balance-card .wallet-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

/* O cartão Open Finance usa a mesma escala tipográfica dos demais saldos. */
.wallet-account-card .wallet-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
    color: #fff;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.wallet-fiat-balance-card {
    border-radius: 10px;
}
.wallet-balance-card .wallet-value small {
    margin-left: 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
}
.wallet-balance-card .wallet-balance-select {
    margin-top: 28px;
    font-weight: 600;
    color: var(--text-color);
}
.wallet-coins-seg {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin-top: 8px;
    padding: 4px;
    border-radius: 4px;
    background: #f3f4f6;
}
.wallet-coins-seg.wallet-coins-seg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wallet-coins-seg .wallet-coin {
    min-width: 0;
    height: 28px;
    padding: 0 2px;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    letter-spacing: -0.1px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .16s ease, color .16s ease;
}
.wallet-coins-seg .wallet-coin:hover {
    color: #4b5563;
}
.wallet-coins-seg .wallet-coin.is-active {
    background: #0ea5e9;
    color: #fff;
}
/* Variante escura (Crypto/JRBank): gradiente preto → azul, ícone de info azul, linha
   "JRBank + pontos + setas" abaixo da atualização, ícone da moeda junto ao
   valor, seletor num tabuleiro branco. */
.wallet-card-dark.wallet-balance-card {
    background: linear-gradient(90deg, #011017 0%, #08638c 50%, #3eb7ed 100%);
}
.wallet-card-head-end {
    justify-content: flex-end;
}
.wallet-balance-card .wallet-acc-info {
    width: 32px;
    height: 32px;
    border: none;
    background: #0ea5e9;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.wallet-balance-card .wallet-acc-info:hover {
    background: #3eb7ed;
}
.wallet-card-dark.wallet-balance-card .wallet-value small,
.wallet-card-dark.wallet-balance-card .wallet-balance-select,
.wallet-card-dark.wallet-balance-card .wallet-card-update {
    color: rgba(255, 255, 255, 0.9);
}
.wallet-bank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    color: #fff;
}
.wallet-bank-name {
    font-size: 18px;
    font-weight: 400;
}
.wallet-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #cfedfb;
    transition: width .2s ease;
}
.wallet-dot.is-active {
    width: 24px;
    background: #0b84ba;
}
.wallet-balance-card .wallet-carousel {
    margin-left: 0;
}
.wallet-balance-card .wallet-carousel button {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
}
.wallet-balance-card .wallet-carousel button:hover {
    background: rgba(255, 255, 255, 0.2);
}
/* Com ícone: ícone centrado verticalmente com o número; a moeda continua
   junto à linha de base do número. (Especificidade igual à do .wallet-value
   do card, declarado acima, para vencer o align-items: baseline.) */
.wallet-balance-card .wallet-value-icon {
    align-items: center;
}
.wallet-balance-card .wallet-value-icon small {
    align-self: flex-end;
    margin-bottom: 5px;
}
.wallet-balance-token-icon {
    width: 44px;
    height: 44px;
    margin-right: 10px;
    border-radius: 50%;
    background: transparent; /* o PNG já traz o círculo */
    object-fit: contain;
    flex: 0 0 auto;
}
.wallet-card-dark .wallet-coins-seg {
    background: var(--card-bg);
}
.wallet-card-dark .wallet-coins-seg .wallet-coin {
    background: transparent;
    color: var(--text-secondary);
}
.wallet-card-dark .wallet-coins-seg .wallet-coin.is-active {
    background: #0ea5e9;
    color: #fff;
}

/* ---------- Quotes (aba Todas): tabela compacta ---------- */
/* Sem linhas separadoras, texto mais junto e só as 3 primeiras cotações
   (a 4.ª fica escondida para o card não crescer). */
.wallet-mini-table th {
    padding: 4px 4px 6px;
    border-bottom: none;
}
.wallet-mini-table td {
    padding: 3px 4px;
    font-size: 12px;
    line-height: 1.25;
    border-bottom: none;
}
.wallet-mini-table tbody tr:nth-child(n + 4) {
    display: none;
}
/* Filtros do card Quotes (Todas/Forex/CRYPTO/Ações): chips retangulares
   compactos do Figma (valores arredondados; ~21px de altura), sem largura
   fixa para não quebrarem em telas estreitas. */
.wallet-grid-3 > .wallet-card:last-child .wallet-coins:not(.wallet-coins-seg) {
    width: 100%;
    gap: 6px;
}

/* flex: 1 divide a largura do card por igual entre os quatro filtros
   (como no Figma); em telas estreitas eles continuam podendo envolver. */
.wallet-grid-3 > .wallet-card:last-child .wallet-coins:not(.wallet-coins-seg) .wallet-coin {
    flex: 1 1 0;
    padding: 8px;
    border-radius: 8px;
    font-family: Manrope, Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.wallet-grid-3 > .wallet-card:last-child .wallet-coins:not(.wallet-coins-seg) .wallet-coin.is-active {
    background: rgba(14, 165, 233, 1);
}

/* Título do grupo de cotações (JR Stocks) centrado no card. O display
   block anula o inline-flex do .wallet-label, que encolheria a caixa e
   deixaria o text-align sem efeito. */
.wallet-quotes-group {
    display: block;
    text-align: center;
    font-family: 'SF Pro Display', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14.4px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(55, 65, 81, 1);
    margin: 20px 0 12px; /* respiro até os filtros acima e até a tabela */
}

/* Cabeçalho da tabela de cotações (Symbol/Bid/Ask/Day %) no spec do
   Figma: caixa normal, sem o uppercase/espaçamento do th padrão. */
.wallet-grid-3 > .wallet-card:last-child .wallet-mini-table th {
    font-family: 'SF Pro Display', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(55, 65, 81, 1);
}

/* As quatro colunas repartem a largura do card por igual (como os
   filtros acima): layout fixo, Symbol encostado à esquerda e as colunas
   numéricas (Bid/Ask/Day %) alinhadas à direita, como no Figma. */
.wallet-grid-3 > .wallet-card:last-child .wallet-mini-table {
    table-layout: fixed;
}

.wallet-grid-3 > .wallet-card:last-child .wallet-mini-table th,
.wallet-grid-3 > .wallet-card:last-child .wallet-mini-table td {
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-grid-3 > .wallet-card:last-child .wallet-mini-table th:first-child,
.wallet-grid-3 > .wallet-card:last-child .wallet-mini-table td:first-child {
    text-align: left;
    padding-left: 0;
}

.wallet-grid-3 > .wallet-card:last-child .wallet-mini-table th:last-child,
.wallet-grid-3 > .wallet-card:last-child .wallet-mini-table td:last-child {
    text-align: right;
    padding-right: 0;
}

/* ---------- Transações ---------- */
.wallet-tx-head,
.wallet-donut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.wallet-tx-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.wallet-tx-link:hover {
    color: #1e88c7;
}

.wallet-tx-who {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--text-color);
}

/* 32px como o badge circular do histórico do dApp. */
.wallet-tx-photo,
.wallet-tx-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    font-size: 13px;
    flex: 0 0 auto;
}

/* Cores de valor no padrão do dApp: entrada verde-esmeralda; saída cinza
   neutro (saída é direção, não "perda" — por isso não é vermelho). */
.wallet-tx-table td.wallet-tx-in {
    color: #059669;
    font-weight: 500;
}

.wallet-tx-table td.wallet-tx-out {
    color: #6B7280;
    font-weight: 500;
}

/* Bloco compacto "Últimas Transações": a tabela alinha com o card — a ação
   começa onde começa o título e o badge de status termina onde termina o
   "Ver todas" (sem o respiro lateral da primeira/última célula). */
.wallet-tx-flush td:first-child {
    padding-left: 0;
}

.wallet-tx-flush td:last-child {
    padding-right: 0;
    text-align: right;
}

/* Hover de linha como no histórico do dApp. */
.wallet-tx-table tbody tr {
    transition: background-color 0.15s ease;
}

.wallet-tx-table tbody tr:hover td {
    background: #F9FAFB;
}

/* Só solicitações de pagamento do feed combinado são tickets interativos.
   A classe nunca é aplicada a movimentos FIAT nem às demais atividades Crypto. */
.wallet-tx-table tbody tr.wallet-tx-request-row {
    cursor: pointer;
}

.wallet-tx-table tbody tr.wallet-tx-request-row:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

/* ---------- Badges de status (pill) ----------
   Padrão do histórico do dApp: pill retangular arredondada, largura mínima
   para as colunas alinharem, verde-menta no sucesso e pêssego no pendente. */
.wallet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.wallet-badge-success {
    background: #EBFFF3;
    color: #61BB84;
}

.wallet-badge-pending {
    background: #FFF1ED;
    color: #FFAA90;
}

.wallet-badge-warning {
    background: #fee2e2;
    color: #ef4444;
}

.wallet-badge-gray,
.wallet-badge-secondary {
    background: #f3f4f6;
    color: #4b5563;
}

/* ---------- Seções / período ---------- */
.wallet-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin: 8px 0 0;
}

/* Estado vazio (conta sem tokens / sem atividade): mensagem discreta no lugar da lista. */
.wallet-empty-state {
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
    padding: 32px 16px;
}

/* Figma: as caixas de data ESTICAM até o fim da coluna (data à esquerda,
   chevron à direita). A coluna tem largura mínima garantida pelo grid, então
   a linha nunca quebra em duas colunas; o wrap fica só de último recurso. */
.wallet-period {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wallet-period > .wallet-label {
    white-space: nowrap;
    flex: 0 0 auto;
    /* Figma: Work Sans 400 14px, cinza escuro. */
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #374151;
}
.wallet-period-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    /* Caixas curtas o bastante para o rótulo caber na mesma linha (Figma). */
    max-width: 330px;
}
.wallet-period-range .wallet-period-box {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.wallet-period-box {
    padding: 8px 10px;
    /* Figma: borda cinza clara fixa (D1D5DB), raio 8. */
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: var(--card-bg);
    /* Figma: data em SF Pro Display 500 14px (stack com fallback, como nos minis). */
    font-family: 'SF Pro Display', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-color);
    white-space: nowrap;
}

/* Seta do Figma (Union.svg, 12×9) entre as caixas do período. */
.wallet-period-arrow {
    width: 12px;
    height: 9px;
    flex: 0 0 auto;
}

/* Calendário próprio do período (o popup nativo do input[date] não estila).
   Âncora no range; a variante .is-fim alinha o popup à caixa da direita. */
.wallet-period-range {
    position: relative;
}
.wallet-period-cal {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: 258px;
    padding: 14px 12px 10px;
    background: var(--card-bg);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
    white-space: normal;
}
.wallet-period-cal.is-fim {
    left: auto;
    right: 0;
}
.wallet-period-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 12px;
}
.wallet-period-cal-title-group {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
/* Mês e ano independentes, como no calendário Crypto. */
.wallet-period-cal-title {
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 4px 6px;
    cursor: pointer;
    font-family: Inter, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: #374151;
    text-transform: capitalize;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.wallet-period-cal-title:hover {
    background: #f3f4f6;
}
.wallet-period-cal-title:focus-visible {
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.4);
}
.wallet-period-cal-title.is-open {
    background: #e0f2fe;
    color: #0369a1;
}

/* Mês ou ano ocupa sozinho o corpo do popup. */
.wallet-period-cal-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0;
    max-height: min(360px, calc(100vh - 160px));
}
.wallet-period-cal-options.is-years {
    gap: 4px;
    padding: 8px 0;
}
.wallet-period-cal-options::-webkit-scrollbar {
    width: 6px;
}
.wallet-period-cal-options::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 10px;
}
.wallet-period-cal-options::-webkit-scrollbar-thumb {
    background: #0ea5e9;
    border-radius: 10px;
}
.wallet-period-cal-options::-webkit-scrollbar-thumb:hover {
    background: #0284c7;
}
.wallet-period-cal-options::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
@supports not selector(::-webkit-scrollbar) {
    .wallet-period-cal-options {
        scrollbar-width: thin;
        scrollbar-color: #0ea5e9 #e5e7eb;
    }
}
.wallet-period-cal-options button {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    min-height: 28px;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 4px 12px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.25;
    color: #4b5563;
    cursor: pointer;
    text-align: center;
    text-transform: capitalize;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.wallet-period-cal-options button:hover:not(:disabled) {
    background: #f3f4f6;
}
.wallet-period-cal-options button:focus-visible {
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.4);
}
.wallet-period-cal-options button:disabled {
    color: #d1d5db;
    cursor: default;
}
.wallet-period-cal-options button.is-on,
.wallet-period-cal-options button.is-on:hover {
    background: #0ea5e9;
    color: #fff;
    font-weight: 600;
}

/* ---------- Modal "Ver Relatório" (Entradas x Saídas) ---------- */
/* Moldura à la Transfer Receipt do dApp: título grande escuro, divisórias
   a sangrar até às bordas e rodapé em faixa clara. Selector composto: a
   regra base .patrimony-modal vem mais abaixo no arquivo e venceria. */
.patrimony-modal.wallet-report-modal {
    max-width: 560px;
    gap: 0;
    padding: 24px 0 0;
}
.wallet-report-modal > * {
    padding-left: 24px;
    padding-right: 24px;
}
/* Modal de opções do relatório: mesma moldura do de cima, corpo estreito
   (título menor para caber numa linha). */
.patrimony-modal.wallet-report-opts-modal {
    max-width: 400px;
}
.wallet-report-opts-modal .wallet-report-title {
    font-size: 20px;
}
.wallet-report-opts {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
    padding-bottom: 20px;
}
.wallet-report-opts-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wallet-report-opts-field .wallet-range-seg {
    align-self: flex-start;
}
.wallet-report-opts-label {
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}
.wallet-report-opts-checks {
    display: flex;
    gap: 18px;
}
.wallet-report-opts-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}
.wallet-report-opts-check input {
    width: 15px;
    height: 15px;
    accent-color: #0ea5e9;
    cursor: pointer;
}
.wallet-report-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.wallet-report-title {
    margin: 0;
    font-family: 'Work Sans', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #1e293b;
}
.wallet-report-ident {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-top: 1px solid #eef1f4;
    border-bottom: 1px solid #eef1f4;
}
/* Círculo azul claro com a carterinha (mask reaproveitado, recolorido). */
.wallet-report-ident-ico {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f2fe;
}
.wallet-report-ident-ico .wallet-fiat-cards-ico {
    width: 20px;
    height: 17px;
    background: #0284c7;
}
.wallet-report-ident-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-family: Inter, sans-serif;
}
.wallet-report-ident-txt small {
    font-size: 12px;
    color: var(--text-secondary);
}
.wallet-report-ident-txt strong {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}
/* Seta (Union.svg) entre as datas do período do relatório gerado. */
.wallet-report-ident-txt strong .wallet-period-arrow {
    margin: 0 4px;
}
.wallet-report-details {
    padding-top: 14px;
    padding-bottom: 6px;
}
.wallet-report-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-family: Inter, sans-serif;
}
.wallet-report-row span {
    font-size: 14px;
    color: var(--text-secondary);
}
.wallet-report-row strong {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}
.wallet-report-row strong.is-in {
    color: #16a34a;
}
.wallet-report-row.is-total strong {
    font-size: 18px;
    font-weight: 700;
}
/* Painel cinza (como o bloco Status/Receipt ID do comprovante). */
.wallet-report-meta {
    margin: 6px 24px 14px;
    /* Vence o padding lateral herdado de .wallet-report-modal > * (mesma
       especificidade, regra posterior). */
    padding: 6px 16px;
    border-radius: 10px;
    background: #f1f5f9;
}
.wallet-report-meta .wallet-report-row strong {
    font-weight: 600;
    font-size: 13px;
}
.wallet-report-scroll {
    max-height: 280px;
    overflow-y: auto;
    /* Área de scroll SEM moldura: a moldura fica no .wallet-report-frame,
       dentro dela, e a barra corre por fora do quadro da tabela. O padding
       à direita é o respiro entre o quadro e a barra (motores clássicos
       desenham a barra dentro do padding, daí a folga generosa). */
    margin: 0 24px 16px;
    padding: 0 14px 0 0;
}
/* Moldura da tabela (rola junto com ela, como um cartão contínuo). */
.wallet-report-frame {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
/* Mesma scrollbar do calendário de período: SÓ regras ::-webkit-* (declarar
   scrollbar-width/color junto faz o Chrome ignorá-las e desenhar a barra
   nativa COM setas); Firefox usa o fallback no @supports abaixo. */
.wallet-report-scroll::-webkit-scrollbar { width: 6px; }
.wallet-report-scroll::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 10px; }
.wallet-report-scroll::-webkit-scrollbar-thumb { background: #0ea5e9; border-radius: 10px; }
.wallet-report-scroll::-webkit-scrollbar-thumb:hover { background: #0284c7; }
.wallet-report-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
    .wallet-report-scroll {
        scrollbar-width: thin;
        scrollbar-color: #0ea5e9 #e5e7eb;
    }
}
.wallet-report-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #374151;
}
.wallet-report-table th {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    padding: 8px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid #e5e7eb;
}
.wallet-report-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
}
.wallet-report-table tr:last-child td {
    border-bottom: 0;
}
.wallet-report-table .num {
    text-align: right;
    white-space: nowrap;
}
/* "Tipo" só carrega a pílula Entrada/Saída: coluna encolhida ao conteúdo. */
.wallet-report-table th.tipo {
    width: 1%;
    white-space: nowrap;
}
.wallet-report-tipo {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
}
.wallet-report-tipo.is-in {
    background: #dcfce7;
    color: #15803d;
}
.wallet-report-tipo.is-out {
    background: #fee2e2;
    color: #b91c1c;
}
.wallet-report-empty {
    margin: 0;
    padding: 18px 24px;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
}
/* Rodapé com os CTAs à direita, no mesmo branco do resto do modal (a faixa
   cinza do receipt saiu a pedido do cliente). */
.wallet-report-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
    background: var(--card-bg);
    border-radius: 0 0 12px 12px;
}
.wallet-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    text-decoration: none;
}
.wallet-report-btn:hover {
    background: #f3f4f6;
}
.wallet-report-btn.is-dark {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}
.wallet-report-btn.is-dark:hover {
    background: #111827;
}
.wallet-report-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Impressão ("Imprimir ou salvar"): só o modal entra na página — o resto
   fica invisível mas mantém o layout; a tabela abre por inteiro. */
@media print {
    body * {
        visibility: hidden;
    }
    .wallet-report-modal,
    .wallet-report-modal * {
        visibility: visible;
    }
    .patrimony-modal-overlay {
        position: absolute;
        inset: 0;
        padding: 0;
        background: #fff;
        align-items: flex-start;
    }
    .wallet-report-modal {
        max-width: 100%;
        box-shadow: none;
    }
    .wallet-report-scroll {
        max-height: none;
        overflow: visible;
    }
    .wallet-report-foot {
        display: none;
    }
    .patrimony-modal-close {
        display: none;
    }
}
.wallet-period-cal-nav-button,
.wallet-period-cal-nav-spacer {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
}
.wallet-period-cal-nav-button {
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #4b5563;
    cursor: pointer;
    outline: none;
}
.wallet-period-cal-nav-button:hover:not(:disabled) {
    background: #f3f4f6;
}
.wallet-period-cal-nav-button:focus-visible {
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.4);
}
.wallet-period-cal-nav-button:disabled {
    color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.3;
}
.wallet-period-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 4px;
    justify-items: center;
    text-align: center;
}
.wallet-period-cal-dow {
    padding: 4px 0 6px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
}
.wallet-period-cal-dia {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    outline: none;
}
.wallet-period-cal-dia:hover:not(:disabled) {
    background: #f3f4f6;
}
.wallet-period-cal-dia:focus-visible {
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.4);
}
/* Dias vizinhos (mês anterior/seguinte) e dias fora do teto (futuro). */
.wallet-period-cal-dia.is-fora {
    color: #d1d5db;
}
.wallet-period-cal-dia:disabled {
    color: #d1d5db;
    cursor: not-allowed;
    background: transparent;
}
.wallet-period-cal-dia.is-range:not(.is-sel):not(:disabled) {
    background: #e0f2fe;
    color: #0369a1;
}
.wallet-period-cal-dia.is-range:not(.is-sel):not(:disabled):hover {
    background: #bae6fd;
}
.wallet-period-cal-dia.is-sel {
    background: #0ea5e9;
    color: #fff;
    font-weight: 600;
}
.wallet-period-cal-dia.is-sel:hover {
    background: #0ea5e9;
    color: #fff;
}

/* ---------- Aba FIAT: Resumo (Figma) ---------- */
/* Coluna esquerda: card escuro compacto (mesmo gradiente do JRBank) e, por
   baixo, Entradas/Saídas em dois cards brancos independentes. */
/* Figma: demais subtítulos da aba FIAT no mesmo Work Sans 600 cinza —
   seções (Overview/Empréstimos) a 24px, títulos de card (Transações/
   Cartões) a 20px; ambos com leading ~27.76. */
.wallet-fiat-sec-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    color: #4b5563;
    /* Figma: ~44px de respiro antes de cada seção nova (o pai já dá 24px
       de gap; os 20px aqui completam o total). */
    margin-top: 20px;
}
.wallet-fiat-card-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #4b5563;
}
/* Card "Meus Cartões" (Figma): título com mais ar antes do cartão e o
   seletor "Cartão JRBank" com fundo translúcido + borda fina cinza. */
.wallet-fiat-cards-card .wallet-card-head {
    margin-bottom: 18px;
}
.wallet-fiat-cards-card .wallet-card-add {
    background: rgba(209, 213, 219, 0.12);
    border: 0.66px solid #d1d5db;
    color: #374151;
    font-weight: 500;
}
/* Mesma carterinha do pill de contas, recolorida em #374151 via mask. */
.wallet-fiat-cards-ico {
    width: 17px;
    height: 14px;
    flex: 0 0 auto;
    background: #374151;
    -webkit-mask: url('../../img/wallet/CarteiraFiat.svg') no-repeat center / contain;
    mask: url('../../img/wallet/CarteiraFiat.svg') no-repeat center / contain;
}
.wallet-fiat-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.wallet-fiat-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    /* Os filhos do card escuro ganham z-index 1 (ficam sobre o fundo
       decorativo); a cabeceira sobe mais para o dropdown de contas não
       ficar pintado por baixo do rótulo/valor que vêm depois no DOM. */
    z-index: 5;
}
/* Amortecedor: se o card do gráfico ficar uns px mais alto (ex.: botões do
   cabeçalho quebram em telas ~1000px), o herói absorve a diferença e os
   fundos das colunas continuam a ras. Na maioria das larguras a coluna
   esquerda é quem manda na altura e isto não tem efeito. */
.wallet-fiat-hero {
    flex: 1 0 auto;
    container-type: inline-size;
    /* Coluna interna para o bloco rótulo+valor poder centrar na vertical
       entre o pill e o fundo (margens auto). */
    display: flex;
    flex-direction: column;
}
/* Tipografia do Figma: rótulo Work Sans 500, valor Work Sans 600 grande.
   O bloco rótulo+valor centra na VERTICAL entre o pill e o fundo do card
   (margens auto num flex-column); na horizontal segue à esquerda. */
.wallet-fiat-hero-label {
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 32.5px;
    letter-spacing: 0;
    margin: auto 0 0;
}
.wallet-fiat-hero .wallet-fiat-hero-value {
    margin-bottom: auto;
}
/* Duas classes: o .wallet-balance-card .wallet-value (40px) venceria o
   seletor simples. */
.wallet-fiat-hero .wallet-fiat-hero-value {
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    /* Fallback por viewport + ajuste pela largura real do card. */
    font-size: clamp(28px, 8vw, 48px);
    font-size: clamp(28px, 11cqw, 48px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.wallet-fiat-minis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* Minis compactos como no Figma (~90px de altura), com borda clara e raio 12. */
.wallet-fiat-mini {
    padding: 18px 20px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
}
/* .wallet-label é inline-flex e encolhe: esticado, a seta vai para a direita.
   Tipografia do Figma: rótulo SF Pro Display 500 (mesmo stack do
   .wallet-quotes-group — no Windows cai para Segoe UI), valor Inter 600. */
.wallet-fiat-mini .wallet-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'SF Pro Display', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14.4px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: #69717d;
}
.wallet-fiat-mini .wallet-label i {
    font-size: 15px;
}
.wallet-fiat-mini .wallet-subvalue {
    font-family: Inter, sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: #4b5563;
    margin-top: 8px;
}
/* Botões do gráfico: retângulos arredondados brancos com borda; o ativo é o
   azul de sempre — em vez das pílulas cinzentas genéricas.
   Figma: raio 4, stroke D1D5DB, texto Inter 500 cinza-escuro. */
.wallet-fiat-actions .wallet-coin {
    background: var(--card-bg);
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #374151;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    /* Figma: botões bem mais largos que o texto e baixinhos. */
    padding: 5px 32px;
}
.wallet-fiat-actions .wallet-coin.is-active {
    background: #0ea5e9;
    border-color: transparent;
    color: #fff;
}
/* Hover sutil dos retângulos brancos (ex.: "Ver Relatório"). */
.wallet-fiat-actions .wallet-coin {
    transition: background-color .16s ease;
}
.wallet-fiat-actions .wallet-coin:not(.is-active):hover {
    background: #f3f4f6;
}
.wallet-fiat-balance {
    font-size: 24px;
}
.wallet-fiat-delta {
    font-size: 13px;
    margin: 2px 0 0;
}
/* Delta inline ao lado do valor (Saldo Atual / Evolução do Portfólio):
   maior que o delta solto e alinhado pela BASELINE do valor (alinhamento
   óptico dos dois textos). */
.wallet-fiat-balance .wallet-fiat-delta {
    margin-left: 8px;
    font-size: 15px;
    /* Sobe um tico da baseline do valor (alinhamento óptico). */
    vertical-align: 2px;
}
/* Bloco "Saldo Atual" e o seletor de período do gráfico na mesma linha,
   como no Figma: valor à esquerda, D/W/M/Y/Custom à direita centrado na
   altura do valor (não colado nos botões de cima). O bloco fica mais perto
   do gráfico que do título (Figma): ar em cima, pouco embaixo. */
.wallet-fiat-chart-head {
    display: flex;
    /* Seletor de período na MESMA linha do valor (o rótulo fica acima);
       vale igual para os cards de Entradas x Saídas e do Portfólio. */
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}
/* A linha do valor termina no espaço dos descendentes da fonte; o seletor
   sobe uns pixels para o alinhamento ÓPTICO com os números. */
.wallet-fiat-chart-head .wallet-range-seg {
    margin-bottom: 8px;
}
/* Figma: título alinhado pelo TOPO com os botões Entradas/Saídas, em
   Work Sans 600 20px cinza. */
.wallet-fiat-chart-card .wallet-card-head {
    align-items: flex-start;
}
.wallet-fiat-chart-card .wallet-card-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
    color: #4b5563;
}
/* Menos respiro entre os rótulos do eixo X e o fundo do card. */
.wallet-fiat-chart-card {
    padding-bottom: 10px;
}
/* Card do gráfico em flex-column: o wrapper do gráfico leva flex: 1 e o
   Apex (Height 100%) preenche exatamente o espaço restante — fundo do card
   sempre a ras dos minis, sem espaço morto, em qualquer largura.
   (Seletor composto: a seção "Gráficos" vem DEPOIS no arquivo e senão o
   min-height 240 genérico vence.) */
.wallet-fiat-chart-card {
    display: flex;
    flex-direction: column;
    /* Figma: cantos de 19px neste card (o .wallet-card base tem 16). */
    border-radius: 19px;
}
.wallet-chart.wallet-fiat-chart {
    /* Ancora o véu de skeleton da primeira carga (inset: 0). */
    position: relative;
    flex: 1;
    /* Gráfico mais alto que o mínimo do flex (Figma); a coluna esquerda
       acompanha via herói flex:1, então a diferença vai para o Saldo Total. */
    min-height: 230px;
    margin-top: 6px;
    /* O desenho do Apex fica ~18px/11px para dentro do container (coluna dos
       rótulos do eixo Y + folga do último rótulo X). Margens negativas esticam
       o SVG até o alinhamento do título e dos botões, dentro do padding do card. */
    margin-left: -18px;
    margin-right: -12px;
}
.wallet-fiat-chart-scroll-content {
    width: 100%;
    height: 100%;
    min-height: inherit;
}
/* Cuadrícula do gráfico com traço fino (Figma: 0.70). O Apex não expõe o
   grosor das linhas de grid nas opções, só a cor — daí via CSS. */
.wallet-fiat-chart .apexcharts-gridline {
    stroke-width: 0.7;
}
/* Tooltip escuro (Figma): caixa navy arredondada, valor + variação na
   primeira linha e o rótulo do período embaixo. O HTML interno vem do
   Tooltip.Custom nas opções do gráfico. (Com a classe de tema no seletor:
   o CSS do Apex usa .apexcharts-tooltip.apexcharts-theme-light e ganharia
   o empate de especificidade no background.) */
.wallet-fiat-chart .apexcharts-tooltip.apexcharts-theme-light,
.wallet-fiat-chart .apexcharts-tooltip.apexcharts-theme-dark,
.wallet-inv-chart .apexcharts-tooltip.apexcharts-theme-light,
.wallet-inv-chart .apexcharts-tooltip.apexcharts-theme-dark,
.wallet-chart-donut .apexcharts-tooltip.apexcharts-theme-light,
.wallet-chart-donut .apexcharts-tooltip.apexcharts-theme-dark {
    background: #131a2b;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .35);
    color: #fff;
    overflow: visible; /* o bico sai da caixa */
}
.wallet-fiat-tip {
    position: relative;
    padding: 10px 14px;
}
/* Bico do balão — quadradinho girado 45° meio para fora da borda de BAIXO,
   como o tooltip do gráfico crypto do dApp (caixa fica em cima do ponto).
   O Tooltip.Custom posiciona a caixa e seta --tip-beak-x (x do ponto,
   clampado para dentro da caixa) e a classe --below quando a caixa não
   cabe em cima e vai para baixo do ponto (bico sobe para a borda de cima). */
.wallet-fiat-tip::before {
    content: "";
    position: absolute;
    left: var(--tip-beak-x, 50%);
    bottom: -5px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: #131a2b;
    transform: rotate(45deg);
}
.wallet-fiat-tip--below::before {
    bottom: auto;
    top: -5px;
}
/* Variante do donut: o Apex posiciona esse tooltip junto ao cursor (não há
   ponto fixo para o bico apontar), então a caixa vai sem bico. */
.wallet-fiat-tip-donut::before {
    display: none;
}
.wallet-fiat-tip-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: 13px;
    font-weight: 700;
}
.wallet-fiat-tip-pct {
    font-weight: 600;
}
.wallet-fiat-tip-date {
    margin-top: 4px;
    font-size: 12px;
    color: #9aa3b2;
    font-weight: 500;
}
/* Bolita de hover da linha Entradas: mesmo degradê da linha (def
   #walletFiatDotGradient no razor) com aro branco. O marker da série 0
   (Saídas) é transparente via opções — só a laranja ganha bolita.
   (O data:realIndex fica no grupo -wrap, não no .apexcharts-series-markers.) */
.wallet-fiat-chart .apexcharts-series-markers-wrap[data\:realIndex="1"] .apexcharts-marker {
    fill: url(#walletFiatDotGradient);
}
/* Coluna única (grid colapsado): não há vizinho para dar altura ao card,
   então o gráfico volta a ter uma altura mínima própria. */
@media (max-width: 992px) {
    .wallet-chart.wallet-fiat-chart {
        min-height: 220px;
    }
}
/* Skeleton da primeira carga: shimmer no lugar dos valores até a primeira
   resposta das APIs (o "—" e o gráfico zerado não chegam a aparecer). Cada
   modificador tem o tamanho aproximado do valor final: o layout não pula. */
.wallet-skel {
    display: inline-block;
    vertical-align: middle;
    border-radius: 6px;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 45%, #e5e7eb 65%);
    background-size: 200% 100%;
    animation: wallet-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes wallet-skel-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
/* No card escuro o cinza claro grita; shimmer branco translúcido. */
.wallet-card-dark .wallet-skel {
    background: linear-gradient(90deg, rgba(255, 255, 255, .16) 25%, rgba(255, 255, 255, .30) 45%, rgba(255, 255, 255, .16) 65%);
    background-size: 200% 100%;
}
.wallet-skel-hero { width: 220px; height: 44px; border-radius: 10px; }
.wallet-skel-mini { width: 100px; height: 20px; }
.wallet-skel-balance { width: 90px; height: 16px; }
/* Véu por cima do gráfico (o Apex fica montado por baixo). */
.wallet-skel-chart {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: 12px;
    animation-duration: 1.8s;
}
/* Primeira carga: o Apex ainda está com as opções DEFAULT (toolbar visível,
   altura própria de centenas de px) e inflava a fila inteira — herói e card
   do gráfico esticavam juntos. Trava DURA: o wrapper fica FIXO em 230px e o
   div do componente inteiro sai do fluxo e some (não importa que estilo
   inline o Apex aplique lá dentro); só o véu de skeleton aparece. */
.wallet-fiat-chart.is-carregando {
    height: 230px;
    flex: 0 0 auto;
    overflow: hidden;
}
.wallet-fiat-chart.is-carregando > div:not(.wallet-skel) {
    position: absolute;
    inset: 0;
    visibility: hidden;
    overflow: hidden;
}
/* Mesmo flash no gráfico de investimentos (o wrapper absoluto já impede a
   inflação de altura; só falta esconder o desenho default). */
.wallet-inv-chart.is-carregando > div {
    visibility: hidden;
}
[data-theme="dark"] .wallet-skel {
    background: linear-gradient(90deg, #2c333b 25%, #3a424b 45%, #2c333b 65%);
    background-size: 200% 100%;
}
/* Seletor de intervalo D/W/M/Y/Custom: controle segmentado unido (Figma) —
   caixas brancas coladas com borda partilhada, ativo em cinza claro.
   Figma: raio 3 nas pontas, stroke D1D5DB, texto Inter 500 SEMPRE #374151
   (ativo e inativo — só o fundo muda). */
.wallet-range-seg {
    display: inline-flex;
    gap: 0;
    margin: 0;
}
.wallet-range-seg .wallet-coin {
    background: var(--card-bg);
    border: 1px solid #d1d5db;
    border-radius: 0;
    color: #374151;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    padding: 5px 18px;
}
.wallet-range-seg .wallet-coin + .wallet-coin {
    border-left: 0;
}
.wallet-range-seg .wallet-coin:first-child {
    border-radius: 3px 0 0 3px;
}
.wallet-range-seg .wallet-coin:last-child {
    border-radius: 0 3px 3px 0;
}
.wallet-range-seg .wallet-coin.is-active {
    background: rgba(148, 163, 184, 0.22);
    color: #374151;
}
/* Herói FIAT: mesmo card do JRBank mas com a rampa do Figma — metade esquerda
   quase preta, azul só a acender no terço direito. Borda clara e raio 10. */
.wallet-card-dark.wallet-fiat-hero {
    background: linear-gradient(90deg, #05080d 0%, #082033 45%, #10608e 75%, #3eb7ed 100%);
    border: 1px solid #d1d5db;
    border-radius: 10px;
}
/* ---------- Overview dos Investimentos (Figma) ---------- */
/* KPIs: rótulo com a seta na borda direita, valor à direita; os 3 cards
   repartem a altura da linha ditada pelo card do gráfico. */
.wallet-inv-kpis {
    display: flex;
    flex-direction: column;
    /* Figma: 18px FIXOS entre uma caixa e a seguinte; a sobra da coluna vai
       para DENTRO das caixas (flex:1), que ficam mais encorpadas. */
    gap: 18px;
    min-width: 0;
}
.wallet-inv-kpis .wallet-kpi {
    /* Caixa do Figma: estica para repartir a coluna, com o conteúdo centrado
       (título + 12 + valor), 18px mínimos de respiro, moldura própria e SEM
       a sombra do .wallet-card. */
    flex: 1 1 auto;
    /* Título no topo, valor na base (a sobra vai para o meio): mesmo estilo
       em Investimentos e Empréstimos — as de Empréstimos só saem mais altas
       porque a fila da seção delas é maior. */
    justify-content: space-between;
    gap: 12px;
    /* Vertical mais curto (4 caixas na coluna de investimentos): a coluna
       encolhe e a fila da seção vem junto. Sem outline (pedido do cliente):
       o card branco sobre o fundo cinza já separa. */
    padding: 12px 18px;
    border: none;
    box-shadow: none;
}
/* Empréstimos: o card da TABELA quase sem padding vertical — é ele que dita
   a altura da fila, então a seção encolhe e os KPIs vêm junto (eles mantêm o
   padding interno de 12px da regra base para o texto não colar nas bordas).
   O respiro de 10px no topo evita a primeira linha colada na borda. */
.wallet-card.wallet-loan-card {
    padding-top: 10px;
    padding-bottom: 0;
}
/* Tipografia das caixinhas (Figma): título SF Pro Display 500 ~14.5/12.5
   cinza-azulado; valor Inter 600 ~22/19.5 #4b5563. Vale para os KPIs de
   Investimentos e de Empréstimos (mesmas classes). */
.wallet-inv-kpis .wallet-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'SF Pro Display', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 14.5px;
    line-height: 12.5px;
    letter-spacing: 0;
    color: #69717d;
}
.wallet-inv-kpis .wallet-value {
    font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 19.5px;
    letter-spacing: 0;
    color: #4b5563;
    text-align: right;
    /* O gap de 12px do card é a distância toda; sem o margin-top do base. */
    margin: 0;
}
/* Card do gráfico: flex-column, o gráfico preenche o resto (Apex Height 100%). */
.wallet-inv-chart-card {
    display: flex;
    flex-direction: column;
}
.wallet-chart.wallet-inv-chart {
    /* O desenho preenche o resto do card (sem espaço morto embaixo); quem
       dita a altura da fila são os KPIs/lista, então o gráfico não puxa a
       seção — o mínimo segura a legibilidade em filas curtas. */
    flex: 1;
    min-height: 150px;
    position: relative;
    margin-top: 8px;
    /* Como no gráfico de Entradas x Saídas: o desenho do Apex fica para
       dentro do container (coluna dos rótulos Y + folga direita); as margens
       negativas alinham o grid com o título e o botão do card (medido: plot
       a ~18px do bordo esquerdo — os rótulos Y ficam ao ras — e a ras à
       direita, igual ao outro gráfico). */
    margin-left: -24px;
    margin-right: -12px;
}
/* Cuadrícula com traço fino (Figma) — o Apex não expõe o grosor via opções. */
.wallet-inv-chart .apexcharts-gridline {
    stroke-width: 0.7;
}
/* O wrapper do Apex sai do fluxo (absolute): a altura que o SVG fixa ao
   renderizar NUNCA conta para o tamanho natural do card — sem isso, cada
   re-render (ex.: toggle do Demo) re-inflava a fila da seção. O Apex
   (Height 100%) mede exatamente a caixa do .wallet-inv-chart. */
.wallet-inv-chart > div {
    position: absolute;
    inset: 0;
}
@media (max-width: 992px) {
    .wallet-chart.wallet-inv-chart {
        min-height: 220px;
    }
}
/* Coluna "Pagar" dos empréstimos: título e botão colados ao bordo direito
   da tabela. O botão é uma pill de largura FIXA (Figma: pontas redondas,
   stroke e texto #374151) e o título usa um span com a mesma largura para
   começar exatamente na esquerda do botão. */
.wallet-tx-table .wallet-loan-pay-col {
    text-align: right;
}
.wallet-tx-table td.wallet-loan-pay-col .wallet-card-add {
    width: 100px;
    padding: 8px 0;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #374151;
    color: #374151;
}
.wallet-tx-table th.wallet-loan-pay-col span {
    display: inline-block;
    width: 100px;
    text-align: left;
}
/* Reparto das colunas: Nº e Juros compactas, Duração média, largura fixa
   para a pill; Valor/Restante/Parcela dividem o resto por igual. */
.wallet-loan-table {
    table-layout: fixed;
}
/* Títulos do cabeçalho no cinza-escuro do Figma. */
.wallet-loan-table th {
    color: #374151;
}
.wallet-loan-table th:nth-child(1) { width: 44px; }
.wallet-loan-table th:nth-child(2) { width: 20%; }
.wallet-loan-table th:nth-child(3) { width: 20%; }
.wallet-loan-table th:nth-child(4) { width: 15%; }
.wallet-loan-table th:nth-child(5) { width: 11%; }
.wallet-loan-table th:nth-child(7) { width: 116px; }
/* Estado vazio dos empréstimos: ícone + frase centrados no cartão (mesma
   base do estado vazio dos investimentos). */
.wallet-inv-empty.wallet-loan-empty {
    min-height: 260px;
    font-size: 17px;
    gap: 22px;
}
/* Âncora do "Ver todos os Empréstimos" (flutua acima do card, à direita —
   mesmo padrão do "Ver todas as Cotas"). */
.wallet-loan-card {
    position: relative;
}
/* Modal dos empréstimos: a tabela de 7 colunas pede moldura larga. */
.patrimony-modal.wallet-emprestimos-modal {
    max-width: 860px;
}
.wallet-loan-empty img {
    width: 72px;
    height: 72px;
}
/* Empty state das transações da aba FIAT: mesmo desenho dos outros empty
   states, preenchendo a altura que a tabela ocuparia no card. */
.wallet-inv-empty.wallet-tx-empty {
    font-size: 15px;
    gap: 16px;
}
.wallet-tx-empty img {
    width: 64px;
    height: 64px;
}
.wallet-inv-chart-card .wallet-fiat-delta {
    margin-left: 8px;
}
/* Lista de investimentos: cada linha é um card solto (sem card contentor).
   Linhas compactas — a lista é quem dita a altura da fila do grid, e os KPIs
   e o gráfico esticam junto com ela. */
.wallet-inv-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Mesmo gap das caixas KPI da esquerda: com os cards em flex:1, as duas
       colunas repartem a mesma altura e alinham fila a fila. */
    gap: 18px;
    min-width: 0;
    /* Ancora o "Ver todas" absoluto (flutua por cima da coluna). */
    position: relative;
}
.wallet-inv-list .wallet-inv-row {
    padding: 11px 14px;
    border-bottom: none;
    /* Figma: mesmas esquinas dos quadrados dos logos (11). */
    border-radius: 11px;
    /* Cada card estica igual (mesma altura das caixas KPI da esquerda). */
    flex: 1 1 auto;
    align-items: center;
}
/* Vaga vazia (menos de 4 cotas): moldura tracejada com a frase centrada. */
.wallet-inv-list .wallet-inv-row-vazia {
    justify-content: center;
    border: 1.5px dashed #d1d5db;
    background: transparent;
    box-shadow: none;
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
}
/* Nome/categoria truncam com reticências em vez de quebrar linha (a quebra
   engordava as filas e desalinhava as colunas do grid em larguras médias). */
.wallet-inv-list .wallet-inv-info {
    min-width: 0;
}
.wallet-inv-list .wallet-inv-name,
.wallet-inv-list .wallet-inv-cat {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Colunas de valor/retorno com largura mínima FIXA: sem ela cada coluna
   encolhe ao próprio conteúdo e a borda direita dos valores dança de linha
   em linha ("€4.150,00" ficava fora do prumo dos "$25.000,00"). */
.wallet-inv-list .wallet-inv-vals {
    min-width: 84px;
}
.wallet-inv-list .wallet-inv-vals:last-child {
    min-width: 58px;
}
/* Estado vazio da lista: a caixa preenche a coluna, com a frase e o CTA
   "Investir" centrados. */
.wallet-inv-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    padding: 24px 16px;
}
/* CTA azul do estado vazio, por baixo da frase, dentro da própria caixa. */
.wallet-inv-investir {
    background: #0ea5e9;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.wallet-inv-investir:hover {
    background: #0284c7;
}
/* Link "Ver todas" FORA do fluxo da coluna: flutua acima da primeira caixa,
   à direita (como nas transações, mas sem card), e a primeira caixa fica a
   ras do topo do card do gráfico. */
.wallet-inv-vertodas {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
}
/* Modal das Ações: moldura do relatório, lista nas linhas da coluna (as
   divisórias vêm do .wallet-inv-row base). Scroll fora do conteúdo, barra
   fina descolada — mesmo padrão da tabela do relatório. */
.patrimony-modal.wallet-acoes-modal {
    max-width: 480px;
}
.wallet-acoes-scroll {
    max-height: 420px;
    overflow-y: auto;
    /* Respiro entre o título "Minhas Ações" e a primeira linha. */
    margin: 14px 24px 24px;
    padding: 0 14px 0 0;
}
/* Mesma scrollbar do calendário de período (ver .wallet-report-scroll). */
.wallet-acoes-scroll::-webkit-scrollbar { width: 6px; }
.wallet-acoes-scroll::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 10px; }
.wallet-acoes-scroll::-webkit-scrollbar-thumb { background: #0ea5e9; border-radius: 10px; }
.wallet-acoes-scroll::-webkit-scrollbar-thumb:hover { background: #0284c7; }
.wallet-acoes-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
    .wallet-acoes-scroll {
        scrollbar-width: thin;
        scrollbar-color: #0ea5e9 #e5e7eb;
    }
}

/* Últimas Transações (FIAT): o card estica junto com o de Meus Cartões
   (comportamento do grid); a tabela preenche a altura e o navegador reparte
   a sobra igualmente entre as linhas — nada de vazio acumulado embaixo. */
.wallet-fiat-tx-card {
    display: flex;
    flex-direction: column;
}
/* Quem estica no flex é o wrapper (uma <table> como flex item mantém a
   altura natural em parte dos motores e sobrava vazio embaixo); a tabela
   ocupa 100% dele e as linhas repartem a sobra. */
.wallet-tx-stretch {
    flex: 1;
}
.wallet-fiat-tx-card .wallet-tx-table {
    height: 100%;
}

/* "Ver todas" da aba FIAT: modal próprio, sem reutilizar o histórico Crypto.
   A tabela conserva as quatro colunas em mobile com scroll só dentro dela. */
.patrimony-modal.wallet-fiat-history-modal {
    max-width: 860px;
}
.wallet-fiat-history-scroll {
    max-height: min(520px, 65vh);
    margin: 0 24px 24px;
    padding-right: 8px;
    overflow: auto;
}
.wallet-fiat-history-table {
    min-width: 620px;
}
.wallet-fiat-history-table th {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}
.wallet-fiat-history-empty {
    min-height: 230px;
    margin: 0 24px 24px;
}
.wallet-fiat-history-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.wallet-fiat-history-scroll::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 10px; }
.wallet-fiat-history-scroll::-webkit-scrollbar-thumb { background: #0ea5e9; border-radius: 10px; }
.wallet-fiat-history-scroll::-webkit-scrollbar-thumb:hover { background: #0284c7; }
.wallet-fiat-history-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
    .wallet-fiat-history-scroll {
        scrollbar-width: thin;
        scrollbar-color: #0ea5e9 #e5e7eb;
    }
}
/* Cartão de crédito e donut lado a lado (Figma). Em larguras apertadas o
   donut desce para baixo do cartão em vez de o esmagar. */
.wallet-cc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.wallet-cc-row .wallet-credit-card {
    /* Figma: cartão de ~292px; encolhe se a coluna apertar, não estica. */
    flex: 0 1 292px;
    min-width: 250px;
}
/* Coluna do donut: anel + legenda 2×2 por baixo (Figma). O overlay do total
   fica centrado no furo do anel. */
.wallet-cc-row .wallet-donut-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Legenda colada ao anel (o SVG do Apex já deixa ~13px de folga interna);
       o alvo é a coluna do donut fechar na MESMA altura do cartão (178px). */
    gap: 0;
}
/* O canvas do Apex sai ~7px mais alto que os 138 pedidos: a legenda sobe
   esses 7px para a coluna fechar nos 178 do cartão (medido em vivo). */
.wallet-cc-row .wallet-donut-legend {
    margin-top: -7px;
}
.wallet-cc-row .wallet-chart-donut {
    width: 100%;
    margin-top: 0;
    min-height: 0;
    position: relative;
}
/* Sem dados: a coluna estica à altura do cartão e o anel fica CENTRADO
   (não há mais CTA embaixo — o "Adicionar Cartão" vive no pill do topo);
   o container encolhe ao diâmetro exato do anel. */
.wallet-cc-row .wallet-donut-col.is-vazio {
    align-self: stretch;
    justify-content: center;
}
.wallet-cc-row .wallet-chart-donut.is-vazio {
    height: 126px;
    min-height: 126px;
    overflow: hidden;
    /* A fatia-fantasma do gráfico fica atrás do anel cinza: sem hover nem
       tooltip enquanto não há dados de verdade. */
    pointer-events: none;
}
/* O canvas da fatia-fantasma sai maior que o container (145px) e aparecia
   cortado por baixo do overlay; o anel visível do estado vazio é SÓ o
   .wallet-donut-vazio. O canvas fica no DOM (o ciclo do Apex não muda),
   apenas invisível. */
.wallet-cc-row .wallet-chart-donut.is-vazio .apexcharts-canvas {
    visibility: hidden;
}
.wallet-donut-vazio {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 126px;
    height: 126px;
    /* Mesmo diâmetro (~126) e grossura (~25px) do anel do Apex com dados. */
    border: 25px solid #e5e7eb;
    border-radius: 50%;
}
.wallet-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
}
/* Tipografia do Figma: SF Pro Display 500 (mesmo stack dos minis). */
.wallet-donut-center strong {
    font-family: 'SF Pro Display', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 18.5px;
    color: var(--text-color);
}
.wallet-donut-center .wallet-up {
    font-family: 'SF Pro Display', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    line-height: 14px;
}
.wallet-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Linhas mais juntas (18px entre colunas segue o Figma). */
    gap: 4px 18px;
    font-size: 12px;
    color: var(--text-secondary);
}
.wallet-donut-legend li {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.wallet-donut-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    flex: 0 0 auto;
}
/* Dropdown do pill de Meus Cartões: o pill fica encostado ao bordo direito
   do card, então o menu abre alinhado pela direita para não vazar. */
.wallet-fiat-conta-menu.wallet-fiat-cartao-menu {
    left: auto;
    right: 0;
}
.wallet-fiat-cartao-menu button .fas {
    font-size: 11px;
    margin-right: 4px;
}
/* Bolinha JR compacta ao lado do saldo responsivo. */
.wallet-fiat-hero .wallet-balance-token-icon {
    width: 42px;
    height: 42px;
}
.wallet-period-box .fa-chevron-down {
    font-size: 11px;
    color: #a5b4cb;
    margin-left: 8px;
}
/* Input de data nativo dentro da caixa do período, sem moldura própria.
   Sem o anel de foco do navegador: quem sinaliza o foco é a borda da caixa. */
.wallet-period-box {
    cursor: pointer;
}
/* Seletor do Resumo: clique em QUALQUER ponto da caixinha abre o calendário
   custom — o input deixa de capturar o clique (a edição por teclado saiu a
   pedido; o calendário cobre tudo) — e nada de seleção de texto. Só aqui:
   nos modais de relatório o clique no input abre o picker nativo. */
.wallet-period .wallet-period-box {
    user-select: none;
    -webkit-user-select: none;
}
.wallet-period .wallet-period-box input[type="date"] {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.wallet-period-box input[type="date"] {
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0;
    cursor: pointer;
    /* A largura intrínseca do input (~106px) reserva espaço do ícone nativo
       mesmo escondido; fixa curta para o rótulo caber na mesma linha. */
    width: 90px;
}
/* Figma usa só o chevron: o ícone de calendário nativo do input sai de cena
   (o showPicker no onclick da caixa continua abrindo o calendário). */
.wallet-period-box input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}
.wallet-period-box input[type="date"]:focus,
.wallet-period-box input[type="date"]:focus-visible {
    outline: none;
    box-shadow: none;
}
.wallet-period-box:focus-within {
    border-color: #0ea5e9;
}
/* Dropdown próprio de contas do herói (o popup nativo do select ignora
   estilos no Windows). O card escuro corta overflow por padrão: o herói
   libera para o menu poder flutuar por cima. */
.wallet-card-dark.wallet-fiat-hero {
    overflow: visible;
}
.wallet-fiat-conta-box {
    position: relative;
    display: inline-flex;
}
/* Pill de contas do herói: azul petróleo sólido com texto azul-claro (pedido
   do cliente), no lugar do vidro translúcido do .wallet-topbar-ctx base. */
.wallet-fiat-conta-box .wallet-topbar-ctx {
    background: #1e475c;
    border-color: #1e475c;
    border-radius: 5px;
    color: #ace5ff;
    font-family: 'Inter', sans-serif;
    /* Bem mais fino que o .wallet-topbar-ctx base (Figma: ~4.5px verticais). */
    padding: 4.5px 10px;
}
/* Pill mais fino pede chevron menor para manter a proporção. */
.wallet-fiat-conta-box .wallet-topbar-ctx .fa-chevron-down {
    font-size: 9px;
}
/* Carterinha do Figma no pill (SVG já vem em #ACE5FF, cor do texto). */
.wallet-fiat-conta-ico {
    width: 17px;
    height: 14px;
    flex: 0 0 auto;
}
.wallet-fiat-conta-box .wallet-topbar-ctx:hover {
    background: #25566f;
}
.wallet-fiat-conta-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: transparent;
}
.wallet-fiat-conta-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 100%;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.wallet-fiat-conta-menu button {
    border: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.wallet-fiat-conta-menu button:hover {
    background: #f3f4f6;
}
.wallet-fiat-conta-menu button.is-active {
    background: #e0f2fe;
    color: #0369a1;
}

/* ---------- Gráficos ---------- */
.wallet-chart {
    margin-top: 16px;
    min-height: 240px;
}

.wallet-chart-donut {
    min-height: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ---------- Cartão de crédito ---------- */
.wallet-credit-card {
    /* Figma: diagonal #2D60FF → #539BFF (canto sup. esq. → inf. dir.),
       ~292×178 com a faixa do número (53px) encostada na base. */
    background: linear-gradient(135deg, #2d60ff 0%, #539bff 100%);
    border-radius: 8px;
    padding: 22px;
    height: 178px;
    display: flex;
    flex-direction: column;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.wallet-cc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* Tipografia do Figma: rótulos Lato 400 10.5 a 70% de branco; valores
   (saldo, titular, validade) Work Sans 500 15 brancos — nada em bold no
   cartão, peso máximo medium. */
.wallet-credit-card .wallet-label {
    font-family: 'Lato', 'Work Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.7);
}
.wallet-cc-balance {
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    margin: 5px 0 0;
}

.wallet-cc-chip {
    width: 35px;
    height: auto;
    flex: 0 0 auto;
    border-radius: 5px;
}

/* Faixa inferior do cartão (Figma): número à esquerda e uma cápsula
   puramente decorativa à direita; fundo translúcido a sangrar até às bordas. */
.wallet-cc-num {
    /* Figma: número em Lato ~15.5 (peso máximo medium no cartão; a Lato não
       tem 500 — o navegador resolve para a 400) e faixa de 53px colada à base. */
    font-family: 'Lato', 'Work Sans', sans-serif;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 53px;
    margin: auto -22px -22px;
    padding: 0 22px;
    /* Figma: véu branco que esmaece de cima para baixo na faixa do número. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Elipses decorativas (bottom_Card.svg) no canto inferior direito. */
.wallet-cc-brand {
    width: 35px;
    height: 21px;
    flex: 0 0 auto;
}

.wallet-cc-foot {
    display: flex;
    justify-content: space-between;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    margin-top: 14px;
}

.wallet-cc-foot small {
    display: inline-block;
    font-family: 'Lato', 'Work Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

/* ---------- KPI cards ---------- */
.wallet-kpi {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---------- Lista de investimentos ---------- */
.wallet-inv-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-color);
}

.wallet-inv-row:last-child {
    border-bottom: none;
}

.wallet-inv-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wallet-inv-name {
    font-size: 14px;
    font-weight: 600;
    /* Figma: linha de cima (nome e valor) em #232323. */
    color: #232323;
}

.wallet-inv-cat {
    font-size: 12px;
    /* Figma: linha de baixo (categoria e legendas) em azul-acinzentado. */
    color: #718ebf;
}

.wallet-inv-vals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.wallet-inv-value {
    font-size: 14px;
    font-weight: 700;
    color: #232323;
}

/* ---------- Tokens (Crypto) ---------- */
.wallet-token {
    padding: 18px;
}

.wallet-token-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.wallet-token-flag {
    width: 24px;
    height: auto;
    border-radius: 3px;
}

.wallet-token-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.wallet-jr-badge {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1e88c7;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================
   Responsivo — reflow real (breakpoints 1440 / 1024 / 600)
   ============================================================ */
/* 1439–1024: a janela ainda é laptop/tablet, mas descontando a sidebar e os
   paddings o conteúdo não comporta as colunas largas do Figma. Mantém a
   disposição que já funciona em 1024px para toda esta faixa. */
@media (max-width: 1439px) {
    .wallet-grid-1-16,
    .wallet-grid-14-1,
    .wallet-grid-06-2 {
        grid-template-columns: 1fr;
    }

    .wallet-grid-3col {
        grid-template-columns: 1fr 1fr;
    }
    /* A lista de cotas desce para a linha inteira, sob KPIs + gráfico. */
    .wallet-grid-3col > .wallet-inv-list {
        grid-column: 1 / -1;
    }

    /* KPIs de Empréstimos em fila: empilhados na vertical viravam uma torre
       com a tabela (larga) embaixo. */
    .wallet-grid-06-2 .wallet-inv-kpis {
        flex-direction: row;
    }

    /* Os links "Ver todas as Cotas"/"Ver todos os Empréstimos" flutuam acima
       do bloco âncora. Empilhados, precisam de uma margem que reserve a altura
       do próprio link e ainda deixe ~24px livres até a seção anterior. */
    .wallet-grid-3col > .wallet-inv-list,
    .wallet-grid-06-2 .wallet-loan-card {
        margin-top: 30px;
    }
}

/* Todas as Carteiras: abaixo de laptop, os três cards da primeira linha
   deixam de formar uma grade parcial de duas colunas e ocupam uma linha cada. */
@media (max-width: 1023px) {
    .wallet-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .wallet-grid-connected-top,
    .wallet-grid-3col {
        grid-template-columns: 1fr 1fr;
    }

    .wallet-grid-2,
    .wallet-grid-2a,
    .wallet-grid-1-16,
    .wallet-grid-14-1,
    .wallet-grid-06-2,
    .wallet-grid-1-12 {
        grid-template-columns: 1fr;
    }

    .wallet-greet-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .wallet-tabs {
        width: 100%;
        justify-content: space-between;
    }
}

/* Aba FIAT abaixo de 1024px: antecipa a disposição comprovada no mobile sem
   alterar Todas as Carteiras, Crypto ou o chrome geral do portal. */
@media (max-width: 1023px) {
    .wallet-grid-3col {
        grid-template-columns: 1fr;
    }

    .wallet-fiat-hero .wallet-fiat-hero-value {
        line-height: 1.1;
    }

    /* Entradas x Saídas: relatório na linha do título, séries abaixo e valores
       compactos, exatamente como no breakpoint mobile já aprovado. */
    .wallet-fiat-chart-card {
        min-width: 0;
        max-width: 100%;
    }

    .wallet-fiat-chart-card > .wallet-card-head {
        display: block;
        position: relative;
    }

    .wallet-fiat-chart-card > .wallet-card-head > .wallet-card-title {
        box-sizing: border-box;
        margin-bottom: 8px;
        padding-right: 112px;
    }

    .wallet-fiat-chart-card > .wallet-card-head .wallet-fiat-actions {
        flex-wrap: nowrap;
    }

    .wallet-fiat-chart-card > .wallet-card-head .wallet-fiat-actions .wallet-coin:nth-child(3) {
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 12px;
        padding-left: 12px;
    }

    .wallet-fiat-chart-card .wallet-fiat-balance {
        font-size: 22px;
    }

    .wallet-fiat-chart-card .wallet-fiat-balance .wallet-fiat-delta {
        display: block;
        margin-top: 4px;
        margin-left: 0;
        font-size: 12px;
        line-height: 1.25;
        white-space: nowrap;
        vertical-align: 0;
    }

    .wallet-fiat-chart-card .wallet-fiat-chart-head {
        gap: 8px;
    }

    .wallet-fiat-chart-card .wallet-range-seg {
        flex-wrap: nowrap;
    }

    .wallet-fiat-chart-card .wallet-range-seg .wallet-coin {
        padding-right: 8px;
        padding-left: 8px;
    }

    .wallet-chart.wallet-fiat-chart:not(.is-carregando) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-right: 0;
        margin-left: 0;
        padding-bottom: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .wallet-fiat-chart:not(.is-carregando) > div:not(.wallet-skel) {
        min-width: 620px;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar {
        height: 6px;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar-track {
        background: #e5e7eb;
        border-radius: 10px;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar-thumb {
        background: #0ea5e9;
        border-radius: 10px;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar-thumb:hover {
        background: #0284c7;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    @supports not selector(::-webkit-scrollbar) {
        .wallet-chart.wallet-fiat-chart:not(.is-carregando) {
            scrollbar-width: thin;
            scrollbar-color: #0ea5e9 #e5e7eb;
        }
    }

    /* Meus Cartões: cartão e donut em duas linhas, centralizados e contidos. */
    .wallet-grid-14-1,
    .wallet-grid-14-1 > .wallet-card,
    .wallet-fiat-cards-card {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .wallet-fiat-cards-card > .wallet-card-head {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    .wallet-fiat-cards-card > .wallet-card-head .wallet-fiat-conta-box {
        max-width: 100%;
        margin-left: auto;
    }

    .wallet-fiat-cards-card > .wallet-card-head .wallet-card-add {
        box-sizing: border-box;
        max-width: 100%;
        white-space: nowrap;
    }

    .wallet-fiat-cards-card .wallet-cc-row {
        width: 100%;
        min-width: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }

    .wallet-fiat-cards-card .wallet-credit-card {
        box-sizing: border-box;
        width: min(100%, 292px);
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        align-self: center;
    }

    .wallet-fiat-cards-card .wallet-donut-col {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        align-self: stretch;
    }

    .wallet-fiat-cards-card .wallet-chart-donut {
        width: 100%;
        max-width: 100%;
    }

    /* Só as tabelas FIAT recebem scroll local nesta faixa. */
    .wallet-fiat-tx-card .wallet-tx-table,
    .wallet-grid-06-2 .wallet-tx-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Overview e Empréstimos passam à coluna única do mobile. */
    .wallet-grid-06-2,
    .wallet-grid-06-2 > .wallet-inv-kpis,
    .wallet-grid-06-2 > .wallet-loan-card,
    .wallet-grid-06-2 .wallet-kpi {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .wallet-grid-06-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .wallet-grid-06-2 .wallet-loan-table {
        width: 100%;
        max-width: 100%;
    }

    .wallet-grid-06-2 .wallet-inv-kpis {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .wallet-topbar {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
    }

    .wallet-topbar-spacer {
        display: none;
    }

    .wallet-inner {
        padding: 20px 16px 18px;
        gap: 18px;
    }

    .wallet-footer {
        padding: 0 16px;
    }

    .wallet-greet-title {
        font-size: 24px;
    }

    .wallet-grid-3,
    .wallet-grid-connected-top,
    .wallet-grid-3col,
    .wallet-grid-tokens {
        grid-template-columns: 1fr;
    }

    .wallet-value {
        font-size: 26px;
    }

    .wallet-fiat-hero .wallet-fiat-hero-value {
        line-height: 1.1;
    }

    /* Todas as Carteiras — a tabela de transações tem conteúdo largo e fazia
       o track 1fr crescer pelo min-content, levando também a coluna de promos
       para fora da viewport. A grade e todos os filhos ficam realmente
       limitados ao card; só a tabela conserva scroll horizontal local. */
    .wallet-grid-2a,
    .wallet-grid-2a > *,
    .wallet-grid-connected-top,
    .wallet-grid-connected-top > * {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .wallet-grid-2a {
        grid-template-columns: minmax(0, 1fr);
    }

    .wallet-grid-2a > .wallet-card .wallet-tx-table {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .wallet-grid-2a > .wallet-card .wallet-tx-head {
        min-width: 0;
        flex-wrap: wrap;
    }

    .wallet-grid-2a > .wallet-card .wallet-tx-link {
        margin-left: auto;
    }

    .wallet-grid-2a .wallet-promo,
    .wallet-grid-2a .wallet-promo-body,
    .wallet-grid-2a .wallet-promo-body > div {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .wallet-grid-2a .wallet-promo-text {
        overflow-wrap: anywhere;
    }

    /* Entradas x Saídas: no mobile o relatório fica na linha do título e os
       toggles das séries descem juntos para a linha seguinte. O terceiro
       botão é o relatório; o escopo no card evita atingir Investimentos. */
    .wallet-fiat-chart-card {
        min-width: 0;
        max-width: 100%;
    }

    .wallet-fiat-chart-card > .wallet-card-head {
        display: block;
        position: relative;
    }

    .wallet-fiat-chart-card > .wallet-card-head > .wallet-card-title {
        box-sizing: border-box;
        margin-bottom: 8px;
        padding-right: 112px;
    }

    .wallet-fiat-chart-card > .wallet-card-head .wallet-fiat-actions {
        flex-wrap: nowrap;
    }

    .wallet-fiat-chart-card > .wallet-card-head .wallet-fiat-actions .wallet-coin:nth-child(3) {
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 12px;
        padding-left: 12px;
    }

    /* Saldo e delta mais discretos; o seletor D/S/M/A perde padding lateral
       e não quebra, para os quatro botões caberem na mesma linha. */
    .wallet-fiat-chart-card .wallet-fiat-balance {
        font-size: 22px;
    }

    .wallet-fiat-chart-card .wallet-fiat-balance .wallet-fiat-delta {
        display: block;
        margin-top: 4px;
        margin-left: 0;
        font-size: 12px;
        line-height: 1.25;
        white-space: nowrap;
        vertical-align: 0;
    }

    .wallet-fiat-chart-card .wallet-fiat-chart-head {
        gap: 8px;
    }

    .wallet-fiat-chart-card .wallet-range-seg {
        flex-wrap: nowrap;
    }

    .wallet-fiat-chart-card .wallet-range-seg .wallet-coin {
        padding-right: 8px;
        padding-left: 8px;
    }

    /* O Apex ganha largura própria: o card vira a janela de visualização e a
       scrollbar fica logo abaixo do gráfico. As margens negativas usadas no
       desktop são neutralizadas só aqui. */
    .wallet-chart.wallet-fiat-chart:not(.is-carregando) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-right: 0;
        margin-left: 0;
        padding-bottom: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .wallet-fiat-chart:not(.is-carregando) > div:not(.wallet-skel) {
        min-width: 620px;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar {
        height: 6px;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar-track {
        background: #e5e7eb;
        border-radius: 10px;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar-thumb {
        background: #0ea5e9;
        border-radius: 10px;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar-thumb:hover {
        background: #0284c7;
    }

    .wallet-fiat-chart:not(.is-carregando)::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    /* Fallback Firefox. No Chrome estas propriedades não podem ficar na regra
       base: fariam o motor ignorar ::-webkit-* e recuperar a barra com setas. */
    @supports not selector(::-webkit-scrollbar) {
        .wallet-chart.wallet-fiat-chart:not(.is-carregando) {
            scrollbar-width: thin;
            scrollbar-color: #0ea5e9 #e5e7eb;
        }
    }

    /* Meus Cartões: no mobile o conjunto lateral cartão+donut ultrapassa a
       viewport. Mantém o cartão com a largura do Figma e leva o donut/legenda
       para uma segunda linha, ambos contidos no card branco. */
    .wallet-grid-14-1,
    .wallet-grid-14-1 > .wallet-card {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .wallet-fiat-cards-card {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Título e seletor permanecem na mesma linha quando houver espaço; em
       viewports menores o seletor quebra inteiro para a linha seguinte e se
       alinha à direita, sempre dentro do padding do card. */
    .wallet-fiat-cards-card > .wallet-card-head {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    .wallet-fiat-cards-card > .wallet-card-head .wallet-fiat-conta-box {
        max-width: 100%;
        margin-left: auto;
    }

    .wallet-fiat-cards-card > .wallet-card-head .wallet-card-add {
        box-sizing: border-box;
        max-width: 100%;
        white-space: nowrap;
    }

    .wallet-fiat-cards-card .wallet-cc-row {
        width: 100%;
        min-width: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }

    .wallet-fiat-cards-card .wallet-credit-card {
        box-sizing: border-box;
        width: min(100%, 292px);
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        align-self: center;
    }

    .wallet-fiat-cards-card .wallet-donut-col {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        align-self: stretch;
    }

    .wallet-fiat-cards-card .wallet-chart-donut {
        width: 100%;
        max-width: 100%;
    }

    /* tabelas rolam dentro do card; a página nunca rola na horizontal */
    .wallet-mini-table,
    .wallet-tx-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Quotes tem só quatro colunas compactas e cabe inteiro: não deve herdar
       o display:block de tabelas largas. Mantendo display:table + layout fixo,
       Symbol toca a esquerda, Day % toca a direita e Bid/Ask repartem o meio. */
    .wallet-grid-3 > .wallet-card:last-child .wallet-mini-table {
        display: table;
        width: 100%;
        table-layout: fixed;
        overflow: visible;
        white-space: normal;
    }

    /* A fila de KPIs de Empréstimos do breakpoint 1200 não cabe a 3 no
       mobile — volta à coluna. */
    .wallet-grid-06-2,
    .wallet-grid-06-2 > .wallet-inv-kpis,
    .wallet-grid-06-2 > .wallet-loan-card,
    .wallet-grid-06-2 .wallet-kpi {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* A tabela larga não pode definir o min-content da grade inteira: fica
       contida no próprio card e mantém o scroll horizontal local já previsto
       para tabelas no mobile. */
    .wallet-grid-06-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .wallet-grid-06-2 .wallet-loan-table {
        width: 100%;
        max-width: 100%;
    }

    .wallet-grid-06-2 .wallet-inv-kpis {
        flex-direction: column;
    }

}

/* ===== Ajustes de botões conforme o Figma (2026) ===== */

/* Botão de refresh (recarrega cotação) ao lado de "Última atualização" */
.wallet-refresh-btn {
    background: none;
    border: none;
    padding: 0 0 0 6px;
    cursor: pointer;
    color: #0ea5e9;
    font-size: 13px;
    vertical-align: middle;
}
.wallet-card-dark .wallet-refresh-btn { color: #7dd3fc; }
.wallet-refresh-btn:hover { color: #0284c7; }

/* Agrupa ações à direita do cabeçalho do card (info + adicionar saldo) */
.wallet-card-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Setas de carrossel no card JRBank */
.wallet-carousel {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
}
.wallet-carousel button {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
}
.wallet-carousel button:hover { background: rgba(255, 255, 255, 0.28); }

/* Busca dos Quotes (input com lupa) */
.wallet-quotes-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    color: var(--text-secondary);
}
.wallet-quotes-search i { font-size: 13px; }
.wallet-quotes-search-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    color: var(--text-color);
    background: transparent;
}
.wallet-quotes-search:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Menu do topbar na aba Crypto (Dashboard/Exchange/Staking) */
.wallet-topbar-nav {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 4px;
}
.wallet-topbar-nav .wallet-tab {
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}
.wallet-topbar-nav .wallet-tab.is-active {
    background: var(--card-bg);
    color: #0369a1;
}

/* Módulo Wallet ocupa a área de conteúdo inteira: sem a moldura de 10px do
   .main-content (Layout.css) em volta da página — só nesta página, via :has(),
   para não mexer no layout das outras. */
.main-content:has(.wallet-dash) {
    padding: 0;
}

/* Rodapé do módulo: faixa de 38px, filho direto do .wallet-dash — ocupa a
   largura inteira da área de conteúdo (não fica preso ao max-width do
   .wallet-inner) e o flex da página o mantém colado à base. Mesmo visual
   do rodapé do dApp (fundo #F3F4F6, filete superior, texto #6B7280). */
.wallet-footer {
    margin: 0;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* texto à esquerda, como no Figma */
    padding: 0 32px;
    border-top: 0.5px solid rgba(75, 85, 99, 0.5); /* cool-gray-600 a 50% */
    background: #F3F4F6; /* cool-gray-100 */
    color: #6B7280;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
}

/* Aba Crypto: dApp da carteira cripto embutido, "sangrado" até as bordas
   laterais e até o rodapé (o dApp já traz o próprio padding interno e o mesmo
   fundo #E5E7EB da página, então não há costura visível). A altura REAL vem
   do próprio dApp: em modo embed ele cresce até à altura natural do conteúdo
   e envia-a por postMessage (`ark-embed:height`); o módulo walletCryptoEmbed
   aplica-a inline ao iframe, para que nada role lá dentro e a página inteira
   role com uma única barra — a do portal. A altura por viewport abaixo é só
   o fallback até a primeira mensagem chegar (ou para um dApp antigo que não
   a envie, que volta a rolar dentro do frame). As margens negativas anulam o
   padding lateral de 32px do .wallet-inner e o gap de 24px antes do rodapé. */
.wallet-crypto-embed {
    display: block;
    width: calc(100% + 64px);
    margin: 0 -32px -24px;
    height: calc(100dvh - 230px);
    min-height: 520px;
    border: 0;
    background: #E5E7EB;
    /* Cortina da 1.ª carga: invisível (o fundo da página é o mesmo cinza) até
       o dApp avisar que hidratou (ark-embed:ready) — o módulo JS põe .is-ready
       e o iframe entra com um fade curto, sem mostrar os esqueletos. */
    opacity: 0;
    transition: opacity .15s ease;
}
.wallet-crypto-embed.is-ready {
    opacity: 1;
}
/* Noutras abas o iframe fica montado mas oculto (o display:block acima
   venceria o [hidden] do navegador). */
.wallet-crypto-embed[hidden] {
    display: none;
}
/* No móvel o padding lateral do .wallet-inner cai para 16px (e o gap antes do
   rodapé para 18px): o sangrado de -32px passaria 16px de cada borda e
   "comeria" a margem interna do dApp, colando o conteúdo à tela. Depois da
   regra base de propósito — mesma especificidade, vence pela ordem. */
@media (max-width: 600px) {
    .wallet-crypto-embed {
        width: calc(100% + 32px);
        margin: 0 -16px -18px;
    }
}

/* Exchange do dApp a ecrã inteiro (2.º iframe, só o modal — página transparente):
   por cima de sidebar (1000) e do véu do dashboard (2000); oculto até o módulo
   JS lhe pôr .is-open. Enquanto aberto, a página do portal não rola. */
.wallet-crypto-exchange {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    z-index: 2500;
    display: none;
}
.wallet-crypto-exchange.is-open {
    display: block;
}
html.wallet-crypto-exchange-open {
    overflow: hidden;
}

/* ===== Modal Atualizar Patrimônio ===== */
.patrimony-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 16px;
}
.patrimony-modal {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.patrimony-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.patrimony-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}
.patrimony-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 18px;
}
.patrimony-modal-close:hover { color: #111827; }

/* Escolha PF/PJ antes de abrir o fluxo Open Finance. */
.wallet-account-type-modal {
    max-width: 420px;
}
.wallet-account-type-text {
    margin: -4px 0 2px;
    color: var(--text-secondary);
    font-size: 14px;
}
.wallet-account-type-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.wallet-account-type-option {
    min-width: 0;
    min-height: 92px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.wallet-account-type-option i {
    color: #0ea5e9;
    font-size: 22px;
}
.wallet-account-type-option:hover {
    border-color: #0ea5e9;
    background: rgba(14, 165, 233, 0.06);
}
.wallet-account-type-option:active {
    transform: translateY(1px);
}
.wallet-account-type-option:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}
@media (max-width: 420px) {
    .wallet-account-type-options {
        grid-template-columns: 1fr;
    }
}
.patrimony-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}
.patrimony-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}
.patrimony-input {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--text-color);
    background: var(--card-bg);
}
.patrimony-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.patrimony-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.patrimony-btn-primary {
    background: #0ea5e9;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.patrimony-btn-primary:hover { background: #0284c7; }
.patrimony-btn-secondary {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.patrimony-btn-secondary:hover { background: #f3f4f6; }

/* ============================================================
   DARK MODE — acompanha o tema do app ([data-theme="dark"]).
   Overrides só das superfícies/textos/bordas; o CSS Day acima
   fica intacto. As cores de destaque (azul/laranja/verde/roxo)
   e os badges funcionam nos dois temas, não são sobrescritos.
   ============================================================ */
[data-theme="dark"] .wallet-dash {
    background: #151a20;
    color: #e8ecf0;
}

[data-theme="dark"] .wallet-payment-toast {
    border-color: #374151;
    background: #1e2329;
    color: #c5ccd6;
}

[data-theme="dark"] .wallet-payment-toast-copy strong {
    color: #f3f4f6;
}

/* Superfícies (cards, subcards, tabelas) */
[data-theme="dark"] .wallet-card {
    background: #1e2329;
}
[data-theme="dark"] .wallet-subcard {
    background: #232a31;
    border-color: #2c333b;
}
[data-theme="dark"] .wallet-card-add {
    background: #1e2329;
    border-color: #2c333b;
    color: #e8ecf0;
}
[data-theme="dark"] .wallet-card-add:hover {
    background: #2c333b;
}

/* Textos: título/valor → claro; secundário/mudo mantém o cinza (legível no escuro) */
[data-theme="dark"] .wallet-greet-title,
[data-theme="dark"] .wallet-card-title,
[data-theme="dark"] .wallet-value,
[data-theme="dark"] .wallet-section-title,
[data-theme="dark"] .wallet-subvalue {
    color: #e8ecf0;
}
[data-theme="dark"] .wallet-mini-table td,
[data-theme="dark"] .wallet-tx-table td {
    color: #c5ccd6;
    border-bottom-color: #2c333b;
}

[data-theme="dark"] .wallet-tx-table tbody tr:hover td {
    background: #232a31;
}

[data-theme="dark"] .wallet-tx-table td.wallet-tx-in {
    color: #34d399;
}

[data-theme="dark"] .wallet-tx-table td.wallet-tx-out {
    color: #9ca3af;
}

/* Tabs / chips de moeda no escuro */
[data-theme="dark"] .wallet-tab {
    color: var(--text-secondary);
}
[data-theme="dark"] .wallet-coin {
    background: #232a31;
    color: #c5ccd6;
}

/* Cartão de conexão (WalletAccountCard) e headings herdados */
[data-theme="dark"] .wallet-accounts-heading {
    color: #e8ecf0;
}

/* Erro inline continua legível sobre fundo escuro */
[data-theme="dark"] .wallet-inline-error {
    background: #3b1d1d;
    color: #fca5a5;
}