/* css/theme-switcher.css (VERSÃO FINAL E CORRIGIDA) */
.switch {
  position: relative; display: inline-block; width: 60px; height: 34px;
}
.switch #theme-toggle {
  opacity: 0; width: 0; height: 0;
}
.slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #58a6ff;
  transition: .4s;
  z-index: 0; overflow: hidden;
}
.sun-moon {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fdd835; 
  transition: transform 0.4s ease-in-out !important;
}

/* --- ESTADO "CHECKED" (QUANDO ESTÁ ATIVO) --- */
#theme-toggle:checked + .slider {
  background-color: #2c3e50;
}

#theme-toggle:checked + .slider .sun-moon {
  /* Usamos !important para garantir que esta regra vença qualquer conflito */
  transform: translateX(26px) !important; 
  
  background-color: #f0f0f0;
  animation: rotate-center 0.10s ease-in-out both;
}

/* O resto dos estilos de animação e decoração */
.slider.round { border-radius: 34px; }
.slider.round .sun-moon { border-radius: 50%; }
.moon-dot { opacity: 0; transition: .4s; fill: #aaa; }
#theme-toggle:checked + .slider .sun-moon .moon-dot { opacity: 1; }
#moon-dot-1 { left: 10px; top: 3px; position: absolute; width: 6px; height: 6px; z-index: 4; }
#moon-dot-2 { left: 2px; top: 10px; position: absolute; width: 10px; height: 10px; z-index: 4; }
#moon-dot-3 { left: 16px; top: 18px; position: absolute; width: 3px; height: 3px; z-index: 4; }
.stars { transform: translateY(-32px); opacity: 0; transition: .4s; }
.star { fill: white; position: absolute; transition: .4s; animation: star-twinkle 2s infinite; }
#theme-toggle:checked + .slider .stars { transform: translateY(0); opacity: 1; }
#star-1 { width: 20px; top: 2px; left: 3px; animation-delay: 0.3s; }
#star-2 { width: 6px; top: 16px; left: 3px; }
#star-3 { width: 12px; top: 20px; left: 10px; animation-delay: 0.6s; }
#star-4 { width: 18px; top: 0px; left: 18px; animation-delay: 1.3s; }
@keyframes star-twinkle { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 80% { transform: scale(0.8); } 100% { transform: scale(1); } }
@keyframes rotate-center { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }