/* Visual Aurora (E13, aprovado por Darlan em 28/10/2026; protótipo em prototipos/cards/).
   Tudo aqui vale só com :root[data-look="aurora"]; o Sereno (o visual de sempre) não é tocado por este arquivo.
   A cor do assunto nasce dentro do card (nunca passa do canto arredondado), a borda acende em degradê, ícones suaves.
   Cores só por tokens: o fundo do Cripto no Aurora (Pedra) está em app/design_tokens.php (aurora-cripto--) e sai em
   assets/theme.php. As regras dos cards entram na P03; botões, menus e janelas na P04. */

/* ===================================================================================================================
   P03 · Cards e KPIs. Uma "casca Aurora" comum: borda em degradê que acende no canto do ícone (--aur), a cor do assunto
   nascendo dentro do card no canto superior esquerdo e um fio de luz no topo (camada de fundo, sem pseudo-elemento, para
   não disputar com enfeites que alguns cards já têm). Cada família só diz qual é a sua cor.
   =================================================================================================================== */
:root[data-look="aurora"] :is(.wallet-kpi:not(.is-face-dark), .balance-meter, .dashboard-expense-chart, .chart-insight, .view-market .dashboard-section, .mkt-home-card, .mkt-kpi:not(.is-btc):not(.is-eth), .market-card, .wallet-stack-total, .fiat-form-card, .goal-card, .crypto-goal-card, .backup-card, .transaction-day-card, .center-item, .category-parent, .category-presets-card, .more-list, .distribution, .balance-column-list, .chart-donut-panel, .chart-root-list, .crypto-token-market, .crypto-allocation, .crypto-asset-list, .crypto-portrait-card, .crypto-loan-gauge, .crypto-ladder-card, .crypto-history-card) {
  --aur: var(--c-accent);
  position: relative; isolation: isolate;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--aur) 85%, var(--c-on-color)), transparent) 22px 0 / 42% 1px no-repeat padding-box,
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--aur) 14%, transparent), transparent 70%) padding-box,
    linear-gradient(var(--n-0), var(--n-0)) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--aur) 70%, transparent), color-mix(in srgb, var(--n-150) 92%, transparent) 30%, color-mix(in srgb, var(--n-150) 92%, transparent) 70%, color-mix(in srgb, var(--aur) 28%, transparent)) border-box;
  box-shadow: 0 16px 34px -28px color-mix(in srgb, var(--aur) 70%, var(--c-deep-900));
}
/* O círculo do canto do Sereno não entra no Aurora (o desenho de detalhe ocupa o canto). */
:root[data-look="aurora"] :is(.wallet-kpi:not(.is-face-dark), .balance-meter, .dashboard-expense-chart, .chart-insight)::after { display: none; }
:root[data-look="aurora"] .wallet-kpi { --aur: var(--wallet-kpi-tone); }
:root[data-look="aurora"] .balance-meter { --aur: var(--balance-tone); }
:root[data-look="aurora"] .dashboard-expense-chart { --aur: var(--c-danger); }

/* Ícone do card: suave (fundo claro na cor do assunto, contorno fino), no lugar do chip cheio. */
:root[data-look="aurora"] .wallet-kpi-chip { background: color-mix(in srgb, var(--wallet-kpi-tone, var(--c-accent)) 12%, var(--n-0)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wallet-kpi-tone, var(--c-accent)) 32%, transparent); color: color-mix(in srgb, var(--wallet-kpi-tone, var(--c-accent)) 85%, var(--n-900)); }
:root[data-look="aurora"] .wallet-kpi-hero .wallet-kpi-chip { background: color-mix(in srgb, var(--c-on-color) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-on-color) 22%, transparent); color: var(--c-on-color); }

/* Linhas de apoio do KPI em pílulas, com a cor do assunto ao fundo (o "fundo atrás dos dados" do B). */
:root[data-look="aurora"] .wallet-kpi footer { gap: 6px; padding-top: 4px; border-top: 0; }
:root[data-look="aurora"] .wallet-kpi:not(.is-face-dark) footer span { padding: 8px 11px; border-radius: 12px; background: color-mix(in srgb, var(--wallet-kpi-tone) 7%, var(--n-100)); }
:root[data-look="aurora"] .wallet-ring { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wallet-kpi-tone, var(--c-accent)) 40%, transparent)); }

/* Destaque escuro (saldo): contorno de luz, fio no topo e a aurora no canto oposto. */
:root[data-look="aurora"] .wallet-kpi-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--c-accent) 32%, transparent), transparent 70%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--c-accent) 50%, transparent), transparent 60%),
    linear-gradient(150deg, var(--c-deep-800), var(--c-deep-900));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 38%, transparent), 0 26px 50px -30px color-mix(in srgb, var(--c-accent) 60%, var(--c-deep-900));
}
:root[data-look="aurora"] .wallet-kpi-hero::before { content: ""; position: absolute; z-index: 2; left: 26px; right: 45%; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 90%, var(--c-on-color)), transparent); }

/* Mercado e telas com seções em card: a aurora na cor do lado. */
:root[data-look="aurora"] .view-market .dashboard-section { box-shadow: 0 16px 34px -30px color-mix(in srgb, var(--aur) 60%, var(--c-deep-900)); }
:root[data-look="aurora"] .category-parent { --aur: var(--deco-tone, var(--c-accent)); }
:root[data-look="aurora"] .crypto-loan-gauge { --aur: var(--c-success); }

/* ===================================================================================================================
   P04 · O resto da interface no Aurora: botões, menus, abas, barra de baixo, janelas, calendário e calculadora.
   =================================================================================================================== */
/* Botões: o principal ganha profundidade (degradê, reflexo no topo, brilho curto); o secundário, a borda de luz. */
:root[data-look="aurora"] .btn-primary:not(:disabled) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 88%, var(--c-on-color)), var(--c-accent) 55%, color-mix(in srgb, var(--c-accent) 86%, var(--c-deep-900)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-on-color) 35%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--c-accent) 85%, transparent);
}
:root[data-look="aurora"] .btn-secondary:not(:is(.crypto-banner, .wallet-kpi-hero, .is-face-dark, .profile-hero, .passkey-offer, .backup-offer) *) { /* nos destaques escuros o secundário continua translúcido */
  border: 1px solid transparent;
  background: linear-gradient(var(--n-0), var(--n-0)) padding-box, linear-gradient(140deg, color-mix(in srgb, var(--c-accent) 45%, transparent), var(--n-150) 40%, var(--n-150) 70%, color-mix(in srgb, var(--c-accent) 22%, transparent)) border-box;
}

/* Linhas de menu (Mais, perfil): o ícone suave com contorno, como nos cards. */
:root[data-look="aurora"] .more-row-icon { background: color-mix(in srgb, var(--c-accent) 11%, var(--n-0)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 30%, transparent); color: color-mix(in srgb, var(--c-accent) 85%, var(--n-900)); }

/* Abas e chips de seção: a escolhida acende (degradê e brilho curto); as outras com a borda fina de luz no foco. */
:root[data-look="aurora"] :is(.transaction-mode-tabs, .pending-filter-tabs) a.is-active,
:root[data-look="aurora"] :is(.section-nav, .mkt-nav) a.is-current {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 85%, var(--c-on-color)), var(--c-accent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-on-color) 30%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--c-accent) 80%, transparent);
}

/* Barra de baixo: fio de luz no topo, borda que acende nas pontas e o item ativo como pílula suave com contorno. */
:root[data-look="aurora"] .mobile-nav { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 22%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--c-accent) 55%, var(--c-deep-900)); }
:root[data-look="aurora"] .mobile-nav::after { content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 85%, var(--c-on-color)), transparent); }
:root[data-look="aurora"] .mobile-nav-item.is-active { background: color-mix(in srgb, var(--c-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 34%, transparent); }

/* Janelas (meia janela, centrais, seletores, menu lateral, calendário, calculadora): a aurora no canto e o contorno. */
:root[data-look="aurora"] :is(.transaction-modal, .picker-modal, .transaction-picker, .entity-picker, .action-sheet, .wallet-dialog, .app-picker, .transaction-detail-sheet, .account-drawer) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 24%, transparent), 0 30px 70px -30px color-mix(in srgb, var(--c-deep-900) 70%, transparent);
}
:root[data-look="aurora"] .app-calendar-days button.is-chosen { background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 85%, var(--c-on-color)), var(--c-accent)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c-accent) 80%, transparent); }
:root[data-look="aurora"] .app-calendar-days button.is-today { box-shadow: inset 0 0 0 1.5px var(--c-accent), 0 0 12px -4px var(--c-accent); }
/* Calculadora: teclas com o contorno fino; as de operação acendem na cor do lado. */
:root[data-look="aurora"] .app-calc-keys button { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--n-300) 45%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-on-color) 40%, transparent); }
:root[data-look="aurora"] .app-calc-keys button.is-op { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 38%, transparent); }
/* O "+" da barra: um halo fino na cor do lado. */
:root[data-look="aurora"] .entry-trigger { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 16%, transparent), 0 12px 26px -10px color-mix(in srgb, var(--c-accent) 85%, transparent); }

/* KPIs de face escura (texto claro): no Aurora ganham o tratamento do destaque escuro, não a casca clara. */
:root[data-look="aurora"] .wallet-kpi.is-face-dark { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wallet-kpi-tone) 40%, transparent), 0 20px 40px -28px color-mix(in srgb, var(--wallet-kpi-tone) 70%, var(--c-deep-900)); }
:root[data-look="aurora"] .wallet-kpi.is-face-dark::before { content: ""; position: absolute; z-index: 2; left: 22px; right: 45%; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wallet-kpi-tone) 90%, var(--c-on-color)), transparent); }
:root[data-look="aurora"] .wallet-kpi.is-face-dark .wallet-kpi-chip { background: color-mix(in srgb, var(--c-on-color) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-on-color) 22%, transparent); color: var(--c-on-color); }

/* ===================================================================================================================
   Rodada 2 · Aurora em profundidade: os blocos claros que não tinham a casca ganham a mesma, por lista fixa (antes um
   script varria a página depois de carregar; a lista é o que ele achava em todas as telas, 29/10). O segundo grupo
   perde o círculo do canto do Sereno.
   =================================================================================================================== */
:root[data-look="aurora"] :is(.crypto-holding, .balance-detail-transaction, .transaction-cancel-block, .wallet-disclosure.help-section, .transaction-picker-options,
  .transaction-detail-sheet > .search-form, .workspace-content > .wallet-notice.demo-strip, .dashboard-section.crypto-month-section, .import-step, .tag-manager-list > article,
  .crypto-loan-brands > a, .pj-support-give, .support-meter, .conv-option, .tlc-step.has-detail, .adj-group, .pj-trail-more, .tl-step > div,
  .picker-modal, .transaction-modal.transaction-delete-options) {
  --aur: var(--deco-tone, var(--c-accent));
  isolation: isolate;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--aur) 85%, var(--c-on-color)), transparent) 22px 0 / 42% 1px no-repeat padding-box,
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--aur) 12%, transparent), transparent 70%) padding-box,
    linear-gradient(var(--n-0), var(--n-0)) padding-box,
    linear-gradient(140deg, color-mix(in srgb, var(--aur) 60%, transparent), color-mix(in srgb, var(--n-150) 92%, transparent) 30%, color-mix(in srgb, var(--n-150) 92%, transparent) 70%, color-mix(in srgb, var(--aur) 24%, transparent)) border-box;
  box-shadow: inset 0 0 0 1px transparent, 0 14px 30px -26px color-mix(in srgb, var(--aur) 65%, var(--c-deep-900));
}
:root[data-look="aurora"] :is(.picker-modal, .transaction-modal.transaction-delete-options)::after { display: none !important; }