.theme-toggle{
  appearance:none;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.theme-toggle:hover{
  color:var(--ink);
  background:var(--soft);
}
.theme-toggle:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.theme-toggle svg{
  grid-area:1/1;
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:opacity .18s ease,transform .18s ease;
}
.theme-toggle__sun{
  opacity:0;
  transform:scale(.72) rotate(-12deg);
}
.theme-toggle__moon{
  opacity:1;
  transform:scale(1);
}
html[data-theme="dark"] .theme-toggle__sun{
  opacity:1;
  transform:scale(1) rotate(0);
}
html[data-theme="dark"] .theme-toggle__moon{
  opacity:0;
  transform:scale(.72);
}
html[data-theme="dark"] .theme-toggle{
  border-color:#35405a;
}
html[data-theme="dark"] .theme-toggle:hover{
  color:#dce3ef;
  background:#182134;
}
@media(max-width:850px){
  .theme-toggle{width:34px;height:34px}
  .theme-toggle svg{width:16px;height:16px}
}

/* Transición claro/oscuro aprobada: disolvencia suave sin estrellas ni meteoros. */
html.ha-theme-transitioning body,
html.ha-theme-transitioning body *{
  transition-property:background-color,border-color,box-shadow!important;
  transition-duration:900ms!important;
  transition-timing-function:cubic-bezier(.22,.61,.36,1)!important;
}

/* Sincronización de títulos de listas durante la transición.
   Estos enlaces heredaban el color animado del contenedor y, al tener además
   su propia transición global, quedaban visualmente rezagados. Darles el color
   de tema directamente evita esa doble interpolación. */
.archive-row h3 a{
  color:var(--ink);
}

/* El eslogan tiene ambos colores explícitos: evita que al volver al tema
   claro pase de un color propio a otro heredado del panel. */
.side-panel .tagline{color:#fff}
html[data-theme="dark"] .side-panel .tagline{color:#1d2a4d}

html.ha-theme-transitioning [data-ha-color-owner]{transition-property:background-color,color,border-color,box-shadow!important;}

/* Evitar la doble interpolación de color en textos que heredan el color
   de un contenedor que ya participa de la transición global de 900 ms.
   Los títulos con color propio (.hero-copy h1, .cd2-title, .cd2-event h3)
   mantienen la animación común sin alteraciones. */
html.ha-theme-transitioning .cd-title,
html.ha-theme-transitioning .cd-moon-summary strong,
html.ha-theme-transitioning .hero-copy h1 a,
html.ha-theme-transitioning .side-panel .tagline a,
html.ha-theme-transitioning .cd2-planets .cd2-planet,
html.ha-theme-transitioning .cd2-next-item{
  transition-property:none!important;
}


.theme-transition{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
}
.theme-transition__atmosphere,
.theme-transition__haze{
  position:absolute;
  inset:0;
  opacity:0;
}
.theme-transition__atmosphere{
  background:linear-gradient(
    to bottom,
    rgba(14,22,40,.03) 0%,
    rgba(20,43,86,.14) 15%,
    rgba(36,76,146,.23) 31%,
    rgba(79,78,162,.27) 47%,
    rgba(121,84,165,.24) 62%,
    rgba(132,86,136,.17) 78%,
    rgba(25,31,59,.08) 100%
  );
}
.theme-transition__haze{
  background:linear-gradient(
    to bottom,
    rgba(255,166,72,0) 0%,
    rgba(255,166,72,0) 38%,
    rgba(112,92,170,.03) 49%,
    rgba(118,98,181,.08) 57%,
    rgba(245,130,20,.13) 65%,
    rgba(255,170,78,.26) 73%,
    rgba(184,117,197,.20) 80%,
    rgba(98,130,214,.12) 86%,
    rgba(245,130,20,.12) 92%,
    rgba(245,130,20,.08) 97%,
    rgba(245,130,20,.04) 100%
  );
}
.theme-transition.is-darkening,
.theme-transition.is-lightening{
  animation:haTwilightLayer 1500ms cubic-bezier(.24,.62,.32,1) both;
}
.theme-transition.is-darkening .theme-transition__atmosphere{
  animation:haAtmosphereDarken 1500ms cubic-bezier(.24,.62,.32,1) both;
}
.theme-transition.is-lightening .theme-transition__atmosphere{
  animation:haAtmosphereLighten 1500ms cubic-bezier(.24,.62,.32,1) both;
}
.theme-transition.is-darkening .theme-transition__haze{
  animation:haHazeDarken 1500ms cubic-bezier(.24,.62,.32,1) both;
}
.theme-transition.is-lightening .theme-transition__haze{
  animation:haHazeLighten 1500ms cubic-bezier(.24,.62,.32,1) both;
}
@keyframes haTwilightLayer{
  0%{opacity:0}
  18%{opacity:.28}
  48%{opacity:.36}
  76%{opacity:.26}
  100%{opacity:0}
}
@keyframes haAtmosphereDarken{
  0%{opacity:0}
  18%{opacity:.26}
  46%{opacity:.52}
  72%{opacity:.46}
  100%{opacity:0}
}
@keyframes haAtmosphereLighten{
  0%{opacity:.50}
  22%{opacity:.44}
  52%{opacity:.28}
  80%{opacity:.12}
  100%{opacity:0}
}
@keyframes haHazeDarken{
  0%{opacity:0}
  22%{opacity:.15}
  50%{opacity:.62}
  74%{opacity:.46}
  100%{opacity:0}
}
@keyframes haHazeLighten{
  0%{opacity:.58}
  24%{opacity:.50}
  58%{opacity:.30}
  84%{opacity:.11}
  100%{opacity:0}
}

@media(prefers-reduced-motion:reduce){
  html.ha-theme-transitioning body,
  html.ha-theme-transitioning body *{transition-duration:200ms!important}
  .theme-transition.is-darkening,
  .theme-transition.is-lightening{animation:haTwilightReduced .24s ease both}
  .theme-transition__haze{display:none!important}
  @keyframes haTwilightReduced{0%{opacity:.20}100%{opacity:0}}
}