/**
 * SISTEMA DE TROCA DE TEMAS - VARIÁVEIS CSS
 * ==========================================
 * 
 * Este arquivo define todas as variáveis CSS para os quatro temas disponíveis:
 * - Profissional (padrão): Cores azuis corporativas com Montserrat e Roboto
 * - Criativo: Cores roxas artísticas com Playfair Display e Nunito Sans  
 * - Orgânico: Tons verdes terrosos com Poppins e Inter
 * - Escuro: Tema dark mode com cores escuras e alto contraste
 * 
 * COMO USAR:
 * - Inclua este arquivo após seus estilos principais
 * - Use var(--nome-variavel) em seus CSS
 * - Sempre forneça fallbacks: var(--cor-primaria, #1443b1)
 * 
 * EXEMPLO:
 * .meu-elemento {
 *   color: var(--cor-texto, #2D3748);
 *   background: var(--cor-fundo, #FFFFFF);
 *   font-family: var(--fonte-corpo, 'Roboto', sans-serif);
 * }
 */

/* 
 * IMPORTAÇÃO OTIMIZADA DAS FONTES DO GOOGLE FONTS
 * ===============================================
 * Uma única requisição carrega todas as fontes necessárias para os três temas.
 * O parâmetro display=swap melhora a performance de carregamento.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Playfair+Display:wght@400;500;600;700&family=Nunito+Sans:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* 
 * TEMA PROFISSIONAL (PADRÃO)
 * ===========================
 * Definido no :root para ser o tema padrão quando nenhuma classe específica é aplicada.
 * Características: Cores azuis corporativas, tipografia formal e confiável.
 * Uso: Ideal para ambientes corporativos e profissionais.
 */
:root {
  /* Cores principais - Azuis corporativos que transmitem confiança */
  --cor-primaria: #1443b1;
  /* Azul principal - botões, links importantes */
  --cor-secundaria: #113e8b;
  /* Azul mais escuro - elementos secundários */
  --cor-destaque: #FF9F1C;
  /* Laranja - chamadas para ação, destaques */

  /* Cores de fundo - Tons neutros e limpos */
  --cor-fundo: #FFFFFF;
  /* Branco puro - fundo principal */
  --cor-fundo-secundario: #F7FAFC;
  /* Cinza muito claro - cards, seções alternativas */

  /* Cores de texto - Cinzas com boa legibilidade */
  --cor-texto: #2D3748;
  /* Cinza escuro - texto principal */
  --cor-texto-suave: #647286;
  /* Cinza médio - texto secundário, legendas */

  /* Variáveis RGB para transparências */
  --cor-fundo-rgb: 255, 255, 255;
  /* RGB do fundo para transparências */
  --cor-texto-rgb: 45, 55, 72;
  /* RGB do texto para transparências */
  --cor-primaria-rgb: 20, 67, 177;
  /* RGB da cor primária para transparências */

  /* Cores do sistema (não mudam com temas) */
  --vermelho-sistema: #e74c3c;
  /* Vermelho para erros */
  --amarelo-sistema: #ffc107;
  /* Amarelo para alertas */
  --amarelo-fundo-sistema: #fff3cd;
  /* Fundo amarelo para alertas */
  --preto-sistema: #000000;
  /* Preto para contraste máximo */

  /* ==========================================
     CORES DE SISTEMA EXPANDIDAS
     ========================================== */
  /* Cores básicas do sistema que nunca mudam independente do tema */
  --cor-branco-sistema: #ffffff;
  /* Branco puro para contraste máximo */
  --cor-preto-sistema: #000000;
  /* Preto puro para contraste máximo */
  --cor-vermelho-sistema: #e74c3c;
  /* Vermelho para erros e alertas críticos */
  --cor-amarelo-sistema: #ffc107;
  /* Amarelo para avisos e alertas */
  --cor-amarelo-fundo-sistema: #fff3cd;
  /* Fundo amarelo claro para alertas */
  --cor-amarelo-texto-sistema: #856404;
  /* Texto amarelo escuro para alertas */

  /* Escala de cinzas do sistema */
  --cor-cinza-claro-sistema: #f0f0f0;
  /* Cinza muito claro para fundos neutros */
  --cor-cinza-medio-sistema: #e0e0e0;
  /* Cinza médio para bordas e separadores */
  --cor-cinza-escuro-sistema: #302f2f;
  /* Cinza escuro para elementos de interface */
  --cor-cinza-hover-sistema: #5a5a5a;
  /* Cinza para estados hover */

  /* Cores de ação do sistema */
  --cor-sucesso-sistema: #0ab904;
  /* Verde para ações de sucesso */
  --cor-erro-sistema: #e53935;
  /* Vermelho para ações de erro */

  /* Variáveis RGB do sistema para transparências */
  --cor-branco-sistema-rgb: 255, 255, 255;
  /* RGB do branco para transparências */
  --cor-preto-sistema-rgb: 0, 0, 0;
  /* RGB do preto para transparências */

  /* Cores específicas dos botões de tema (gradientes) */
  --tema-profissional-escuro: #0A2463;
  /* Azul escuro do tema profissional */
  --tema-profissional-claro: #1d8af0;
  /* Azul claro do tema profissional */
  --tema-profissional-hover-claro: #167fc5;
  /* Azul hover do tema profissional */

  --tema-criativo-escuro: #4A26AB;
  /* Roxo escuro do tema criativo */
  --tema-criativo-claro: #b77de6;
  /* Roxo claro do tema criativo */
  --tema-criativo-hover-claro: #946bd6;
  /* Roxo hover do tema criativo */

  --tema-organico-escuro: #fade97;
  /* Verde escuro do tema orgânico */
  --tema-organico-claro: #F2E8CF;
  /* Verde claro do tema orgânico */
  --tema-organico-hover-escuro: #fade97;
  /* Verde hover escuro do tema orgânico */
  --tema-organico-hover-claro: #F2E8CF;
  /* Verde hover claro do tema orgânico */

  --tema-escuro-escuro: #1F2937;
  /* Cinza escuro do tema escuro */
  --tema-escuro-claro: #374151;
  /* Cinza claro do tema escuro */
  --tema-escuro-hover-escuro: #111827;
  /* Cinza hover escuro do tema escuro */

  /* Cores das bordas dos botões de tema */
  --tema-profissional-borda: #d2d7e0;
  /* Borda do botão profissional */
  --tema-profissional-borda-hover: #e4e0db;
  /* Borda hover do botão profissional */
  --tema-criativo-borda: #cfcdd6;
  /* Borda do botão criativo */
  --tema-criativo-borda-hover: #e8f0e9;
  /* Borda hover do botão criativo */
  --tema-organico-borda: #d3e0d5;
  /* Borda do botão orgânico */
  --tema-organico-borda-hover: #ebe5e1;
  /* Borda hover do botão orgânico */
  --tema-escuro-borda: #4B5563;
  /* Borda do botão escuro */
  --tema-escuro-borda-hover: #60A5FA;
  /* Borda hover do botão escuro */

  /* Variáveis RGB para ajustes específicos de tema */
  --tema-criativo-rgb: 74, 38, 171;
  /* RGB do roxo criativo para transparências */
  --tema-organico-rgb: 62, 86, 65;
  /* RGB do verde orgânico para transparências */
  --tema-escuro-fundo-rgb: 31, 41, 55;
  /* RGB do fundo escuro para transparências */
  --tema-escuro-borda-rgb: 75, 85, 99;
  /* RGB da borda escura para transparências */

  /* ==========================================
     CORES DE REDES SOCIAIS
     ========================================== */
  /* Cores oficiais das redes sociais com estados hover para manter identidade visual */

  /* WhatsApp - Verde oficial */
  --whatsapp-primary: #25D366;
  /* Verde principal do WhatsApp */
  --whatsapp-hover: #128C7E;
  /* Verde escuro para hover */

  /* Facebook - Azul oficial */
  --facebook-primary: #1877F2;
  /* Azul principal do Facebook */
  --facebook-hover: #0D5AA7;
  /* Azul escuro para hover */

  /* Twitter/X - Azul oficial */
  --twitter-primary: #1DA1F2;
  /* Azul principal do Twitter */
  --twitter-hover: #0C85D0;
  /* Azul escuro para hover */

  /* ==========================================
     CORES DOS OBJETIVOS DE DESENVOLVIMENTO SUSTENTÁVEL (ODS)
     ========================================== */
  /* Cores oficiais da ONU para os 18 ODS - usadas no verso dos cards flip */
  /* Estas cores são padronizadas internacionalmente e não devem ser alteradas */

  --ods-1: rgb(229, 36, 59);
  /* ODS 1 - Erradicação da Pobreza */
  --ods-2: rgb(221, 168, 58);
  /* ODS 2 - Fome Zero e Agricultura Sustentável */
  --ods-3: rgb(76, 159, 56);
  /* ODS 3 - Saúde e Bem-Estar */
  --ods-4: rgb(197, 25, 45);
  /* ODS 4 - Educação de Qualidade */
  --ods-5: rgb(255, 58, 33);
  /* ODS 5 - Igualdade de Gênero */
  --ods-6: rgb(38, 189, 226);
  /* ODS 6 - Água Potável e Saneamento */
  --ods-7: rgb(252, 195, 11);
  /* ODS 7 - Energia Limpa e Acessível */
  --ods-8: rgb(162, 25, 66);
  /* ODS 8 - Trabalho Decente e Crescimento Econômico */
  --ods-9: rgb(253, 105, 37);
  /* ODS 9 - Indústria, Inovação e Infraestrutura */
  --ods-10: rgb(221, 19, 103);
  /* ODS 10 - Redução das Desigualdades */
  --ods-11: rgb(253, 157, 36);
  /* ODS 11 - Cidades e Comunidades Sustentáveis */
  --ods-12: rgb(191, 139, 46);
  /* ODS 12 - Consumo e Produção Responsáveis */
  --ods-13: rgb(63, 126, 68);
  /* ODS 13 - Ação Contra a Mudança Global do Clima */
  --ods-14: rgb(10, 151, 217);
  /* ODS 14 - Vida na Água */
  --ods-15: rgb(86, 192, 43);
  /* ODS 15 - Vida Terrestre */
  --ods-16: rgb(0, 104, 157);
  /* ODS 16 - Paz, Justiça e Instituições Eficazes */
  --ods-17: rgb(25, 72, 106);
  /* ODS 17 - Parcerias e Meios de Implementação */
  --ods-18: rgb(122, 49, 17);
  /* ODS 18 - Cor adicional para casos especiais */

  /* ==========================================
     CORES DAS COMPETÊNCIAS BNCC
     ========================================== */
  /* Cores específicas para as 10 competências da Base Nacional Comum Curricular */
  /* Usadas no verso dos cards flip para identificação visual das competências */

  --bncc-1: #e51d3c;
  /* Competência 1 - Conhecimento */
  --bncc-2: #233dff;
  /* Competência 2 - Pensamento Científico */
  --bncc-3: #ff671b;
  /* Competência 3 - Repertório Cultural */
  --bncc-4: #0e7d00;
  /* Competência 4 - Comunicação */
  --bncc-5: #5e17eb;
  /* Competência 5 - Cultura Digital */
  --bncc-6: #ff20a9;
  /* Competência 6 - Trabalho e Projeto de Vida */
  --bncc-7: #0097b2;
  /* Competência 7 - Argumentação */
  --bncc-8: #14ab02;
  /* Competência 8 - Autoconhecimento */
  --bncc-9: #ec6964;
  /* Competência 9 - Empatia e Cooperação */
  --bncc-10: #842000;
  /* Competência 10 - Responsabilidade e Cidadania */

  /* Tipografia - Fontes profissionais e legíveis */
  --fonte-titulos: 'Montserrat', sans-serif;
  /* Títulos - moderna e impactante */
  --fonte-corpo: 'Roboto', sans-serif;
  /* Corpo - excelente legibilidade */
}

/* 
 * TEMA CRIATIVO
 * =============
 * Aplicado quando a classe .theme-criativo é adicionada ao body.
 * Características: Cores roxas artísticas, tipografia elegante e criativa.
 * Uso: Ideal para portfolios, sites artísticos e ambientes criativos.
 */
.theme-criativo {
  /* Cores principais - Roxos artísticos que inspiram criatividade */
  --cor-primaria: #7a4ad3;
  /* Roxo vibrante - elementos principais */
  --cor-secundaria: #6b2be2;
  /* Roxo mais intenso - acentos e destaques */
  --cor-destaque: #4be768;
  /* Verde vibrante - contraste e ações */

  /* Cores de fundo - Tons suaves com toque artístico */
  --cor-fundo: #F7F7FF;
  /* Branco levemente azulado - suave aos olhos */
  --cor-fundo-secundario: #EDEDF5;
  /* Lilás muito claro - seções alternativas */

  /* Cores de texto - Pretos intensos para contraste */
  --cor-texto: #222222;
  /* Preto quase puro - máximo contraste */
  --cor-texto-suave: #424242;
  /* Cinza escuro - texto secundário */

  /* Variáveis RGB para transparências */
  --cor-fundo-rgb: 247, 247, 255;
  /* RGB do fundo para transparências */
  --cor-texto-rgb: 34, 34, 34;
  /* RGB do texto para transparências */
  --cor-primaria-rgb: 122, 74, 211;
  /* RGB da cor primária para transparências */

  /* Tipografia - Fontes elegantes e artísticas */
  --fonte-titulos: 'Playfair Display', serif;
  /* Títulos - elegante e sofisticada */
  --fonte-corpo: 'Nunito Sans', sans-serif;
  /* Corpo - moderna e amigável */
}

/* 
 * TEMA ORGÂNICO
 * =============
 * Aplicado quando a classe .theme-organico é adicionada ao body.
 * Características: Tons verdes e terrosos, tipografia natural e acolhedora.
 * Uso: Ideal para sites sustentáveis, naturais e ambientalmente conscientes.
 */
.theme-organico {
  /* Cores principais - Verdes naturais que remetem à natureza */
  --cor-primaria: #30923d;
  /* Verde natural - elementos principais */
  --cor-secundaria: #21631e;
  /* Verde mais escuro - profundidade */
  --cor-destaque: #d1722a;
  /* Laranja terroso - acentos calorosos */

  /* Cores de fundo - Tons terrosos e acolhedores */
  --cor-fundo: #fcecc5;
  /* Bege claro - acolhedor e natural */
  --cor-fundo-secundario: #faf0dc;
  /* Creme - suave e orgânico */

  /* Cores de texto - Verdes e marrons naturais */
  --cor-texto: #2b5c32;
  /* Verde escuro - principal, natural */
  --cor-texto-suave: #b37127;
  /* Marrom ter  roso - secundário, caloroso */

  /* Variáveis RGB para transparências */
  --cor-fundo-rgb: 242, 232, 207;
  /* RGB do fundo para transparências */
  --cor-texto-rgb: 43, 92, 50;
  /* RGB do texto para transparências */
  --cor-primaria-rgb: 48, 146, 61;
  /* RGB da cor primária para transparências */

  /* Tipografia - Fontes modernas e amigáveis */
  --fonte-titulos: 'Poppins', sans-serif;
  /* Títulos - amigável e moderna */
  --fonte-corpo: 'Inter', sans-serif;
  /* Corpo - excelente para leitura */
}

/* 
 * TEMA ESCURO
 * ===========
 * Aplicado quando a classe .theme-escuro é adicionada ao body.
 * Características: Cores escuras com alto contraste, ideal para uso noturno.
 * Uso: Ideal para reduzir fadiga ocular em ambientes com pouca luz.
 */
.theme-escuro {
  /* Cores principais - Tons escuros com acentos claros */
  --cor-primaria: #60A5FA;
  /* Azul claro - elementos principais */
  --cor-secundaria: #3B82F6;
  /* Azul médio - elementos secundários */
  --cor-destaque: #F59E0B;
  /* Amarelo/laranja - destaques e ações */

  /* Cores de fundo - Tons escuros profundos */
  --cor-fundo: #111827;
  /* Cinza muito escuro - fundo principal */
  --cor-fundo-secundario: #1F2937;
  /* Cinza escuro - cards, seções alternativas */

  /* Cores de texto - Tons claros para contraste */
  --cor-texto: #F9FAFB;
  /* Branco quase puro - texto principal */
  --cor-texto-suave: #D1D5DB;
  /* Cinza claro - texto secundário, legendas */

  /* Variáveis RGB para transparências */
  --cor-fundo-rgb: 17, 24, 39;
  /* RGB do fundo para transparências */
  --cor-texto-rgb: 249, 250, 251;
  /* RGB do texto para transparências */
  --cor-primaria-rgb: 96, 165, 250;
  /* RGB da cor primária para transparências */

  /* Tipografia - Fontes otimizadas para leitura em telas escuras */
  --fonte-titulos: 'Inter', sans-serif;
  /* Títulos - excelente legibilidade */
  --fonte-corpo: 'Roboto', sans-serif;
  /* Corpo - otimizada para texto longo */
}

/* ==========================================
   ESTILOS DO SELETOR DE TEMAS
   ========================================== */

/* Container principal do seletor de temas */
.theme-switcher {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0;
  padding: 15px 20px;
  background-color: rgba(var(--cor-branco-sistema-rgb), 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--cor-branco-sistema-rgb), 0.2);
  transition: all 0.3s ease;
}

.theme-switcher:hover {
  background-color: rgba(var(--cor-branco-sistema-rgb), 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--cor-preto-sistema-rgb), 0.15);
}

/* Texto explicativo */
.theme-switcher span {
  color: rgba(var(--cor-branco-sistema-rgb), 0.9);
  font-family: 'Inter', sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Container dos botões */
.theme-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Estilos base dos botões de tema */
.theme-switcher button {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(var(--cor-branco-sistema-rgb), 0.3);
  border-radius: 50%;
  background-color: rgba(var(--cor-branco-sistema-rgb), 0.1);
  color: rgba(var(--cor-branco-sistema-rgb), 0.8);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Efeito hover nos botões */
.theme-switcher button:hover {
  background-color: rgba(var(--cor-branco-sistema-rgb), 0.2);
  border-color: rgba(var(--cor-branco-sistema-rgb), 0.5);
  color: var(--cor-branco-sistema);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(var(--cor-preto-sistema-rgb), 0.2);
}

/* Efeito de foco para acessibilidade */
.theme-switcher button:focus {
  outline: none;
  border-color: var(--cor-branco-sistema);
  box-shadow: 0 0 0 3px rgba(var(--cor-branco-sistema-rgb), 0.3);
}

/* Indicação visual do tema ativo */
.theme-switcher button.active {
  background-color: rgba(var(--cor-branco-sistema-rgb), 0.25);
  border-color: var(--cor-branco-sistema);
  color: var(--cor-branco-sistema);
  transform: scale(1.05);
  box-shadow: 0 0 0 2px rgba(var(--cor-branco-sistema-rgb), 0.4);
}

.theme-switcher button.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background-color: var(--cor-branco-sistema);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 2s infinite;
}

/* Animação de pulso para o tema ativo */
@keyframes pulse {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.2);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Estilos específicos para cada botão de tema */
#theme-profissional {
  background: linear-gradient(135deg, var(--tema-profissional-escuro) 0%, var(--tema-profissional-claro) 100%);
  border-color: var(--tema-profissional-borda);
}

#theme-profissional:hover,
#theme-profissional.active {
  background: linear-gradient(135deg, var(--tema-profissional-escuro) 0%, var(--tema-profissional-hover-claro) 100%);
  border-color: var(--tema-profissional-borda-hover);
}

#theme-criativo {
  background: linear-gradient(135deg, var(--tema-criativo-escuro) 0%, var(--tema-criativo-claro) 100%);
  border-color: var(--tema-criativo-borda);
}

#theme-criativo:hover,
#theme-criativo.active {
  background: linear-gradient(135deg, var(--tema-criativo-escuro) 0%, var(--tema-criativo-hover-claro) 100%);
  border-color: var(--tema-criativo-borda-hover);
}

#theme-organico {
  background: linear-gradient(135deg, var(--tema-organico-escuro) 0%, var(--tema-organico-claro) 100%);
  border-color: var(--tema-organico-borda);
}

#theme-organico:hover,
#theme-organico.active {
  background: linear-gradient(135deg, var(--tema-organico-hover-escuro) 0%, var(--tema-organico-hover-claro) 100%);
  border-color: var(--tema-organico-borda-hover);
}

#theme-escuro {
  background: linear-gradient(135deg, var(--tema-escuro-escuro) 0%, var(--tema-escuro-claro) 100%);
  border-color: var(--tema-escuro-borda);
}

#theme-escuro:hover,
#theme-escuro.active {
  background: linear-gradient(135deg, var(--tema-escuro-hover-escuro) 0%, var(--tema-escuro-escuro) 100%);
  border-color: var(--tema-escuro-borda-hover);
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
  .theme-switcher {
    flex-direction: column;
    gap: 15px;
    padding: 20px 15px;
    text-align: center;
  }

  .theme-switcher span {
    font-size: 0.85em;
    text-align: center;
  }

  .theme-buttons {
    justify-content: center;
    gap: 15px;
  }

  .theme-switcher button {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .theme-switcher {
    margin: 15px 0;
    padding: 15px 10px;
  }

  .theme-buttons {
    gap: 12px;
  }

  .theme-switcher button {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
}

/* Ajustes para temas específicos */
.theme-criativo .theme-switcher {
  background-color: rgba(var(--tema-criativo-rgb), 0.1);
  border-color: rgba(var(--tema-criativo-rgb), 0.2);
}

.theme-criativo .theme-switcher span {
  color: var(--cor-texto);
}

.theme-organico .theme-switcher {
  background-color: rgba(var(--tema-organico-rgb), 0.1);
  border-color: rgba(var(--tema-organico-rgb), 0.2);
}

.theme-organico .theme-switcher span {
  color: var(--cor-texto);
}

.theme-escuro .theme-switcher {
  background-color: rgba(var(--tema-escuro-fundo-rgb), 0.8);
  border-color: rgba(var(--tema-escuro-borda-rgb), 0.5);
}

.theme-escuro .theme-switcher span {
  color: var(--cor-texto);
}

/* Garantir contraste adequado em todos os temas */
.theme-criativo .theme-switcher button,
.theme-organico .theme-switcher button,
.theme-escuro .theme-switcher button {
  border-color: var(--cor-primaria);
  color: var(--cor-texto);
}

.theme-criativo .theme-switcher button:hover,
.theme-organico .theme-switcher button:hover,
.theme-escuro .theme-switcher button:hover {
  color: var(--cor-texto);
}

/* Transições otimizadas - apenas propriedades que não causam reflow */
.theme-switcher {
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-switcher button {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-switcher span {
  transition: color 0.3s ease;
}

/* Acessibilidade - Estados de foco melhorados */
.theme-switcher button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Tooltip personalizado para melhor acessibilidade */
.theme-switcher button[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(var(--cor-preto-sistema-rgb), 0.8);
  color: var(--cor-branco-sistema);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}

.theme-switcher button[title]:hover::after {
  content: '';
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(var(--cor-preto-sistema-rgb, 0, 0, 0), 0.8);
  z-index: 1000;
  pointer-events: none;
}