@import './tokens.css';

/* === Top Navbar === */
/* Estilização completa da navbar sem depender de .is-primary do Bulma.
   Isso evita conflitos com variáveis HSL internas do Bulma 1.0.4. */
.navbar.is-fixed-top {
  background-color: var(--bg-surface) !important;
  min-height: 4rem;
}

.navbar.is-fixed-top .navbar-brand,
.navbar.is-fixed-top .navbar-menu,
.navbar.is-fixed-top .navbar-start,
.navbar.is-fixed-top .navbar-end {
  background-color: transparent;
}

.navbar.is-fixed-top .navbar-item {
  color: var(--text-primary);
}

.navbar.is-fixed-top .navbar-item:hover,
.navbar.is-fixed-top .navbar-item:focus {
  background-color: var(--hover-purple);
  color: var(--text-primary);
}

/* Brand (logo) não muda no hover */
.navbar.is-fixed-top .navbar-brand .navbar-item:hover,
.navbar.is-fixed-top .navbar-brand .navbar-item:focus {
  background-color: transparent;
}

.navbar.is-fixed-top .navbar-link {
  color: var(--text-primary);
}

.navbar.is-fixed-top .navbar-link:hover,
.navbar.is-fixed-top .navbar-link:focus {
  background-color: var(--hover-purple);
  color: var(--text-primary);
}

.navbar.is-fixed-top .navbar-burger {
  color: var(--text-primary);
}

.navbar.is-fixed-top .navbar-burger:hover {
  background-color: var(--hover-purple);
}

/* Menu mobile */
.navbar.is-fixed-top .navbar-menu.is-active {
  background-color: var(--bg-surface);
}

/* Dropdown */
.navbar.is-fixed-top .navbar-dropdown {
  background-color: var(--bg-surface);
  border-top: 2px solid var(--primary);
}

.navbar.is-fixed-top .navbar-dropdown .navbar-item {
  color: var(--text-primary);
}

.navbar.is-fixed-top .navbar-dropdown .navbar-item:hover {
  background-color: var(--bg-surface-secondary);
  color: var(--text-primary);
}

.navbar.is-fixed-top .navbar-brand .navbar-item img {
  max-height: 52px;
}

/* === Bottom Navbar === */
.bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10000;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

/* Cada item */
.bottom-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  padding: 0.35rem 0;
  transition: color 0.15s, background-color 0.15s;
}

.bottom-item i {
  font-size: 1.35rem;
  margin-bottom: 4px;
  line-height: 1;
}

/* Remove visual padrão de link azul */
.bottom-item,
.bottom-item:link,
.bottom-item:visited {
  color: inherit;
  text-decoration: none;
}

.bottom-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.bottom-item.is-active {
  color: var(--primary);
  font-weight: 600;
}

/* === Scrollbar Personalizada Reutilizável === */
/* Classe utilitária para scrollbar moderna e elegante (estilo macOS).
   Funciona em modo claro e escuro. Aplique .custom-scrollbar em qualquer
   elemento com overflow para obter uma barra fina e semi-transparente.
   A barra só aparece ao passar o mouse (hover) ou ao arrastar no mobile. */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.custom-scrollbar:hover {
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 20px;
  transition: background-color 0.3s;
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb:hover {
  background-color: rgba(155, 155, 155, 0.7);
}

/* Scrollbar personalizada no modo escuro — mesmo comportamento: só aparece no hover */
[data-theme="dark"] .custom-scrollbar {
  scrollbar-color: transparent transparent;
}

[data-theme="dark"] .custom-scrollbar:hover {
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

[data-theme="dark"] .custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .custom-scrollbar:hover::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
  .custom-scrollbar {
    scrollbar-color: transparent transparent;
  }

  .custom-scrollbar:hover {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  }

  .custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
  }

  .custom-scrollbar:hover::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
}

/* === Dashboard Cards === */

/* Corrige overflow horizontal causado pelas margens negativas do .columns
   no contexto de renderização da v2 (com premium-guard Shadow DOM).
   Na v2, o Shadow DOM do premium-guard cria uma boundary que impede a
   contenção natural do overflow das margens negativas do Bulma.
   A solução limita a largura do .columns a 100% do container, forçando
   o recálculo do layout interno. O padding das colunas (espaçamento entre
   cards) é preservado via box-sizing: border-box. */
dashboard-page .container .columns {
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

.dashboard-card .card {
  height: 140px !important;
  overflow: hidden;
}

.dashboard-card .card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: calc(100% - 52px);
  padding-top: 1rem;
}

/* Card grande do dashboard: usa flexbox para manter header, content e footer
   dentro da altura fixa de 320px sem que o footer vaze para fora */
.dashboard-card-large .card {
  height: 320px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-card-large .card-header {
  flex-shrink: 0;
}

.dashboard-card-large .card-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0; /* Necessário para overflow funcionar com flex */
}

.dashboard-card-large .card-footer {
  flex-shrink: 0;
}

/* Espaçamento dos ícones nos cards do dashboard */
.dashboard-card .card-header .icon {
  margin-right: 1rem;
  margin-top: 0.5rem;
}

.dashboard-card-large .card-header .icon {
  margin-right: 1rem;
  margin-top: 0.5rem;
}

/* Estilos para todos os cards do dashboard */
dashboard-page .card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
}

dashboard-page .card-header {
  background-color: var(--bg-surface-secondary);
  border-bottom: 1px solid var(--border);
}

dashboard-page .card-header-title {
  color: var(--text-primary);
}

/* === Página de Login === */
/* Background da página de login usa o token de fundo principal do tema.
   O card-header exibe o gradiente da marca (gradient-brand) para destaque visual.
   Textos do header usam branco para contraste com o gradiente. */
login-page .hero {
  background-color: var(--bg-primary);
}

login-page .card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
}

login-page .card-header {
  background: var(--gradient-brand);
  border-bottom: 1px solid var(--border);
}

login-page .card-header-title {
  color: var(--text-primary);
}

login-page .card-header-title .title {
  color: var(--text-primary);
}

login-page .card-header-title .title.has-text-primary {
  color: var(--text-primary);
}

login-page .card-content .label {
  color: var(--text-primary);
}

login-page .card-content .input {
  background-color: var(--bg-surface-secondary);
  border-color: var(--border);
  color: var(--text-primary);
}

login-page .card-content .input::placeholder {
  color: var(--text-disabled);
}

login-page .button.is-primary {
  background-color: var(--primary);
}

/* === Bottom Navbar — Modo claro === */
[data-theme="light"] .bottom-navbar {
  background-color: var(--bg-surface) !important;
  border-top-color: var(--border) !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .bottom-item {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .bottom-item.is-active {
  color: var(--primary) !important;
}

[data-theme="light"] .bottom-item:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* === Bottom Navbar — Modo escuro === */
[data-theme="dark"] .bottom-navbar {
  background-color: var(--bg-surface) !important;
  border-top-color: var(--border) !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .bottom-item {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .bottom-item.is-active {
  color: var(--info) !important;
}

[data-theme="dark"] .bottom-item:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* === Modal Transação === */
.flex-1 {
  flex: 1;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

/* Tema claro forçado para modal */
[data-theme="light"] .modal .card {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .modal .card-header {
  background-color: var(--bg-surface-secondary) !important;
  border-bottom-color: var(--border) !important;
}

[data-theme="light"] .modal .card-header-title {
  color: var(--text-primary) !important;
}

[data-theme="light"] .modal .input,
[data-theme="light"] .modal .select select {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .modal .input::placeholder {
  color: var(--text-disabled) !important;
}

[data-theme="light"] .modal .label {
  color: var(--text-primary) !important;
}

[data-theme="light"] .modal .button:not(.is-primary) {
  background-color: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .modal .button:not(.is-primary):hover {
  background-color: var(--bg-surface-secondary) !important;
}

[data-theme="light"] .modal .box {
  background-color: var(--bg-surface-secondary) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .modal .has-background-white {
  background-color: var(--bg-surface) !important;
}

[data-theme="light"] .modal .has-background-light {
  background-color: var(--bg-surface-secondary) !important;
}

[data-theme="light"] .modal .notification.is-warning {
  background-color: #fff3cd !important;
  color: #856404 !important;
}

[data-theme="light"] .modal .notification.is-success {
  background-color: #d4edda !important;
  color: #155724 !important;
}

/* Tema escuro para modal */
[data-theme="dark"] .modal .card {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}

[data-theme="dark"] .modal .card-header {
  background-color: var(--bg-surface-secondary) !important;
  border-bottom-color: var(--border);
}

[data-theme="dark"] .modal .card-header-title {
  color: var(--text-primary);
}

[data-theme="dark"] .modal .input,
[data-theme="dark"] .modal .select select {
  background-color: var(--bg-surface-secondary);
  border-color: var(--border);
  color: var(--text-primary);
}

[data-theme="dark"] .modal .input::placeholder {
  color: var(--text-disabled);
}

[data-theme="dark"] .modal .label {
  color: var(--text-primary);
}

[data-theme="dark"] .modal .button:not(.is-primary) {
  background-color: var(--bg-surface-secondary);
  border-color: var(--border);
  color: var(--text-primary);
}

[data-theme="dark"] .modal .button:not(.is-primary):hover {
  background-color: var(--bg-surface-secondary);
}

[data-theme="dark"] .modal .box {
  background-color: var(--bg-surface-secondary) !important;
  border-color: var(--border);
}

[data-theme="dark"] .modal .has-background-white {
  background-color: var(--bg-surface-secondary) !important;
}

[data-theme="dark"] .modal .has-background-light {
  background-color: var(--bg-surface-secondary) !important;
}

[data-theme="dark"] .modal .notification.is-warning {
  background-color: rgba(255, 221, 87, 0.1);
  color: var(--warning);
}

[data-theme="dark"] .modal .notification.is-success {
  background-color: rgba(72, 199, 142, 0.1);
  color: var(--success);
}

[data-theme="dark"] .modal .tag.is-primary {
  background-color: var(--primary);
  color: white;
}

[data-theme="dark"] .modal .tag.is-primary .delete {
  background-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .modal .tag.is-primary .delete:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Botões de tipo de transação no modo escuro */
[data-theme="dark"] .modal .button.is-danger {
  background-color: var(--danger) !important;
  color: white !important;
}

[data-theme="dark"] .modal .button.is-danger.is-light {
  background-color: rgba(220, 53, 69, 0.2) !important;
  color: var(--danger) !important;
}

[data-theme="dark"] .modal .button.is-success {
  background-color: var(--success) !important;
  color: white !important;
}

[data-theme="dark"] .modal .button.is-success.is-light {
  background-color: rgba(40, 167, 69, 0.2) !important;
  color: var(--success) !important;
}

[data-theme="dark"] .modal .button.is-link {
  background-color: var(--info) !important;
  color: white !important;
}

[data-theme="dark"] .modal .button.is-link.is-light {
  background-color: rgba(0, 123, 255, 0.2) !important;
  color: var(--info) !important;
}

/* Botões de tipo de transação no modo claro */
[data-theme="light"] .modal .button.is-danger {
  background-color: var(--danger) !important;
  color: white !important;
}

[data-theme="light"] .modal .button.is-danger.is-light {
  background-color: #f8d7da !important;
  color: #721c24 !important;
}

[data-theme="light"] .modal .button.is-success {
  background-color: var(--success) !important;
  color: white !important;
}

[data-theme="light"] .modal .button.is-success.is-light {
  background-color: #d4edda !important;
  color: #155724 !important;
}

[data-theme="light"] .modal .button.is-link {
  background-color: var(--info) !important;
  color: white !important;
}

[data-theme="light"] .modal .button.is-link.is-light {
  background-color: #cce7ff !important;
  color: #004085 !important;
}

/* === Página de Transações === */
.space-y-2 > * + * {
  margin-top: 0.5rem;
}

.is-clickable:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Tema escuro para página de transações */
[data-theme="dark"] .is-clickable:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* === Página de Orçamento === */
.progress-container {
  background-color: var(--bg-surface-secondary);
}

.progress-bar {
  transition: width 0.3s ease;
}

[data-cy="budget-card"]:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

[data-theme="dark"] [data-cy="budget-card"]:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* === Página de Relatórios === */
relatorios-page .columns {
  align-items: stretch !important;
}

relatorios-page .column {
  display: flex !important;
  flex-direction: column !important;
}

[data-cy="card-gastos-categoria"],
[data-cy="card-divisao-gastos"],
[data-cy="card-evolucao-patrimonio"],
[data-cy="card-receita-despesa"] {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

[data-cy="card-gastos-categoria"] .card,
[data-cy="card-divisao-gastos"] .card,
[data-cy="card-evolucao-patrimonio"] .card,
[data-cy="card-receita-despesa"] .card {
  height: 100% !important;
  min-height: 400px !important;
  display: flex !important;
  flex-direction: column !important;
}

[data-cy="card-gastos-categoria"] .card-content {
  flex: 1 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[data-cy="card-divisao-gastos"] .card-content {
  flex: 1 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem !important;
}

[data-cy="card-evolucao-patrimonio"] .card-content,
[data-cy="card-receita-despesa"] .card-content {
  flex: 1 !important;
}

/* === Switch Toggle === */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--text-disabled);
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* No modo escuro, slider inativo usa surface-secondary ao invés de text-disabled */
[data-theme="dark"] .slider {
  background-color: var(--bg-surface-secondary);
}

/* === Validação de Campos === */
/* Destaque para campos obrigatórios com erro */
.input.is-danger,
.select select.is-danger {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25) !important;
  animation: shake 0.5s ease-in-out;
}

.input.is-danger:focus,
.select select.is-danger:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.4) !important;
}

/* Animação de shake para chamar atenção */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* Tema escuro para campos com erro — usa rgba diferente para melhor contraste */
[data-theme="dark"] .input.is-danger,
[data-theme="dark"] .select select.is-danger {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 0.125em rgba(255, 107, 150, 0.25) !important;
}

[data-theme="dark"] .input.is-danger:focus,
[data-theme="dark"] .select select.is-danger:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 0.125em rgba(255, 107, 150, 0.4) !important;
}

/* === Tokens de Border-Radius === */
.card {
  border-radius: var(--radius-card);
}

.button {
  border-radius: var(--radius-button);
}

.input,
.select select {
  border-radius: var(--radius-input);
}

.tag,
.badge {
  border-radius: var(--radius-badge);
}

/* === Sombra para Cards === */
.card {
  box-shadow: var(--shadow-card);
}

.modal .card {
  box-shadow: var(--shadow-card);
}

/* === Classe Utilitária .glass (Glassmorphism) === */
/* Aplica efeito de vidro fosco com blur, transparência e borda sutil.
   No dark mode usa fundo azulado semi-transparente; no light mode usa branco semi-transparente.
   Uso: adicionar classe .glass em qualquer container que precise do efeito glassmorphism. */
.glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(21, 28, 48, 0.6);
  border: 1px solid var(--border);
}

[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.7);
}

/* === Overrides Bulma — Tokens do Design System === */
/* Sobrescreve cores padrão do Bulma com tokens CSS do Design System.
   Usa seletores [data-theme] para ganhar especificidade sem !important.
   Garante que as classes Bulma respondam à troca de tema automaticamente. */

/* --- Botões Bulma --- */
[data-theme] .button.is-primary {
  background-color: var(--primary);
}

[data-theme] .button.is-success {
  background-color: var(--success);
}

[data-theme] .button.is-danger {
  background-color: var(--danger);
}

[data-theme] .button.is-warning {
  background-color: var(--warning);
}

[data-theme] .button.is-info {
  background-color: var(--info);
}

[data-theme] .button.is-link {
  background-color: var(--secondary);
}

/* --- Classes utilitárias de cor Bulma --- */
[data-theme] .has-background-primary {
  background-color: var(--primary);
}

[data-theme] .has-text-primary {
  color: var(--primary);
}

[data-theme] .has-text-danger {
  color: var(--danger);
}

/* --- Classes utilitárias de background que respondem ao tema --- */
/* .has-background-light e .has-background-white refletem os tokens de surface
   correspondentes ao tema ativo, mantendo comportamento funcional original
   (aplicam exclusivamente background-color sem efeitos colaterais). */
[data-theme] .has-background-light {
  background-color: var(--bg-surface-secondary);
}

[data-theme] .has-background-white {
  background-color: var(--bg-surface);
}

/* --- Notificações Bulma --- */
/* Usa backgrounds semi-transparentes baseados nas cores semânticas
   para funcionar em ambos os temas sem necessidade de override por tema. */
[data-theme] .notification.is-success {
  background-color: rgba(53, 211, 25, 0.1);
  color: var(--success);
}

[data-theme] .notification.is-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

[data-theme] .notification.is-warning {
  background-color: rgba(255, 184, 77, 0.1);
  color: var(--warning);
}

/* --- Tags Bulma --- */
[data-theme] .tag.is-info {
  background-color: var(--info);
  color: white;
}

/* === Background Global das Páginas === */
/* Aplica o fundo do Design System a toda a aplicação,
   sobrescrevendo o branco/cinza padrão do Bulma */
body,
html {
  background-color: var(--bg-primary) !important;
}

.hero,
.section {
  background-color: var(--bg-primary) !important;
}

/* Container principal da aplicação */
.app-container {
  background-color: var(--bg-primary);
  min-height: 100vh;
}

/* === Cards Globais — Design System === */
/* Aplica tokens a TODOS os cards da aplicação (não só dashboard) */
[data-theme] .card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
}

[data-theme] .card-header {
  background-color: var(--bg-surface-secondary);
  border-bottom: 1px solid var(--border);
}

[data-theme] .card-header-title {
  color: var(--text-primary);
}

[data-theme] .card-content {
  color: var(--text-primary);
}

[data-theme] .card-footer {
  border-top: 1px solid var(--border);
}

/* === Boxes Globais — Design System === */
[data-theme] .box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
}

/* === Texto Global — Design System === */
[data-theme] .title,
[data-theme] .subtitle {
  color: var(--text-primary);
}

[data-theme] .label {
  color: var(--text-primary);
}

[data-theme] .content {
  color: var(--text-primary);
}

/* === Inputs Globais — Design System === */
[data-theme] .input,
[data-theme] .textarea,
[data-theme] .select select {
  background-color: var(--bg-surface-secondary);
  border-color: var(--border);
  color: var(--text-primary);
}

[data-theme] .input::placeholder,
[data-theme] .textarea::placeholder {
  color: var(--text-disabled);
}

/* === Botão Primário — Contraste de texto === */
/* No fundo roxo (--primary), o texto usa a cor final do gradiente (--secondary / cyan)
   para harmonia visual e bom contraste em ambos os temas. */
[data-theme] .button.is-primary {
  color: var(--secondary) !important;
}

/* Botão flutuante e botões com fundo --primary: texto sempre cyan */
[data-theme="light"] .button.is-primary {
  color: var(--secondary) !important;
}

/* === Títulos de Página com Gradiente === */
/* Aplica o gradiente da marca nos títulos principais das páginas
   para identidade visual consistente em toda a aplicação */
[data-theme] .page-title,
[data-theme] h1.title {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}