.controle-tema .sol-indicador,
.controle-tema .lua-indicador {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Modo claro */
.controle-tema .sol-indicador {
  opacity: 1;
  transform: scale(1);
}
.controle-tema .lua-indicador {
  opacity: 0.25;
  transform: scale(0.9);
}

/* Modo escuro */
.controle-tema input:checked + .trilha .sol-indicador {
  opacity: 0.25;
  transform: scale(0.9);
}
.controle-tema input:checked + .trilha .lua-indicador {
  opacity: 1;
  transform: scale(1.05);
}

/* Movimento do botão */
.controle-tema input:checked + .trilha .botao {
  transform: translateX(32px);
  background-color: rgb(51 65 85);
}

@layer utilities {
  .scroll-personalizado::-webkit-scrollbar {
    width: 8px;
    overflow-y: scroll;
  }

  .scroll-personalizado::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    overflow-y: scroll;
  }

  .scroll-personalizado::-webkit-scrollbar-thumb {
    background-color: #a855f7; /* violet-500 */
    border-radius: 4px;
    cursor: pointer;
    overflow-y: scroll;
  }

  .dark .scroll-personalizado::-webkit-scrollbar-track {
    background: #0f172a; /* slate-800 */
    cursor: pointer;
  }

  .dark .scroll-personalizado::-webkit-scrollbar-thumb {
    background-color: #8b5cf6; /* violet-400 */
    cursor: pointer;
  }

  .dark .scroll-personalizado::-webkit-scrollbar-thumb:hover {
    background-color: #8b5cf6; /* violet-300 */
    cursor: pointer;
  }
}

#aviso-cookies.visivel {
  opacity: 1;
  transform: translateY(0);
}

#aviso-cookies.oculto {
  opacity: 0;
  transform: translateY(100%);
}

#campo-unico {
  text-align: left;
  text-align-last: center;
}

#campo-unico::placeholder {
  transition: opacity 0.2s ease;
}

#campo-massa {
  text-align: left;
  text-align-last: left;
}

#campo-massa::placeholder {
  transition: opacity 0.2s ease;
}

.efeito-onda::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.5);
  animation: none;
  pointer-events: none;
}

/* Camada base do efeito */
.efeito-onda-base { position: relative; overflow: hidden; }

/* Cores da onda para cada tipo de botão */
.efeito-onda-claro { /* botões SEM fundo (border/ghost) */
  --onda: rgba(99, 102, 241, 0.32);   /* violeta visível no light */
}
.dark .efeito-onda-claro {
  --onda: rgba(167, 139, 250, 0.45);  /* lilás no dark */
}

.efeito-onda-escuro { /* botões COM fundo sólido */
  --onda: rgba(255, 255, 255, 0.50);  /* branco translúcido no light */
}
.dark .efeito-onda-escuro {
  --onda: rgba(255, 255, 255, 0.45);  /* branco translúcido no dark */
}

/* Bolha da onda (injetada via TS) */
.efeito-onda-circulo {
  position: absolute;
  width: 1.25rem;  /* ~20px */
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--onda);
  transform: scale(0);
  animation: efeitoOnda .6s linear;
  pointer-events: none;
  z-index: 0; /* deixa texto/ícones acima da onda */
}

/* Animação */
@keyframes efeitoOnda {
  to { transform: scale(12); opacity: 0; }
}