/* theme-toggle.css — interruptor sol/luna (js/theme.js) y transición de tema.

   El cielo del botón es el MISMO en los dos temas de la página: el estado lo
   pinta aria-checked, nunca html.dark. Todo lo interno escala con --s.

   Animación por transiciones (no keyframes) para que un clic a mitad de camino
   se devuelva desde donde va. Cada sentido tiene su propia curva: una
   transición usa la regla del estado al que VA, así que las de «hacia claro»
   viven en [aria-checked="false"] y las de «hacia oscuro» en
   [aria-checked="true"]. */

[data-theme-toggle] { display: inline-flex; line-height: 0; }

.hs-tt {
  --s: 32px;
  --dur: 1100ms;
  position: relative;
  flex-shrink: 0;
  width: var(--s);
  height: var(--s);
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: #0D1020;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .18);
  -webkit-tap-highlight-color: transparent;
}
.hs-tt--lateral { --s: 34px; }
/* Primer cuadro tras montar: sin animar (js/theme.js lo quita en el siguiente). */
.hs-tt--quieto { --dur: 0ms; }

.hs-tt:focus { outline: none; }
.hs-tt:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.hs-tt__escena,
.hs-tt__cielo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.hs-tt__escena { overflow: hidden; }

/* ── Cielos: la noche siempre debajo; el día se funde encima por opacidad
   (fundir las dos capas dejaría ver el fondo a mitad de camino). ── */
.hs-tt__cielo--noche {
  background:
    radial-gradient(circle at 24% 20%, #2A3352 0, transparent 62%),
    linear-gradient(160deg, #1A2033, #0D1020);
}
.hs-tt__cielo--dia {
  background:
    radial-gradient(circle at 78% 82%, #FFF6EE 0, transparent 60%),
    linear-gradient(160deg, #FCE9E2, #F4C7B8);
  opacity: 0;
  transition: opacity var(--dur) ease;
}

/* ── Estrellas: 1 a 2 px, posiciones fijas ── */
.hs-tt__estrellas { position: absolute; inset: 0; }
.hs-tt__estrellas i {
  position: absolute;
  border-radius: 50%;
  background: #fff;
}
.hs-tt__estrellas i:nth-child(1) { left: 22%; top: 24%; width: 2px;   height: 2px; }
.hs-tt__estrellas i:nth-child(2) { left: 68%; top: 18%; width: 1.5px; height: 1.5px; }
.hs-tt__estrellas i:nth-child(3) { left: 78%; top: 58%; width: 1px;   height: 1px; }
.hs-tt__estrellas i:nth-child(4) { left: 30%; top: 70%; width: 1.5px; height: 1.5px; }
.hs-tt__estrellas i:nth-child(5) { left: 52%; top: 40%; width: 1px;   height: 1px; }

/* ── Luna: 46 % de --s, centrada, tres cráteres y halo ── */
.hs-tt__luna,
.hs-tt__sol {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}
.hs-tt__luna {
  width: calc(var(--s) * .46);
  height: calc(var(--s) * .46);
  background:
    radial-gradient(circle at 34% 36%, #D2CBBE 0 12%, transparent 13%),
    radial-gradient(circle at 66% 30%, #D2CBBE 0 8%, transparent 9%),
    radial-gradient(circle at 58% 68%, #D2CBBE 0 11%, transparent 12%),
    #ECE7DD;
  box-shadow: 0 0 calc(var(--s) * .18) rgba(236, 231, 221, .35);
}

/* ── Sol: disco y ocho rayos en forma de llama (SVG de js/theme.js), al 74 %
   de --s. El espacio entre disco y rayos deja ver el cielo. Sin halo: el
   anillo difuminado de antes hacía que el sol pareciera un huevo frito. ── */
.hs-tt__sol {
  width: calc(var(--s) * .74);
  height: calc(var(--s) * .74);
  border-radius: 0;
}
.hs-tt__sol svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hs-tt__disco { fill: #EDB548; }
.hs-tt__rayo { fill: #E39E44; }

/* ── Oscuro (aria-checked="true") y las transiciones HACIA oscuro ── */
.hs-tt[aria-checked="true"] .hs-tt__sol {
  transform: translate(150%, 150%) scale(.6);
  transition: transform calc(var(--dur) * .7) cubic-bezier(.6, 0, .8, .4);
}
.hs-tt[aria-checked="true"] .hs-tt__luna {
  transform: none;
  transition: transform calc(var(--dur) * .7) cubic-bezier(.2, 1.1, .4, 1) calc(var(--dur) * .3);
}
.hs-tt[aria-checked="true"] .hs-tt__estrellas {
  opacity: 1;
  transform: none;
  transition: opacity calc(var(--dur) * .45) ease calc(var(--dur) * .55),
              transform calc(var(--dur) * .45) ease calc(var(--dur) * .55);
}

/* ── Claro (aria-checked="false") y las transiciones HACIA claro ── */
.hs-tt[aria-checked="false"] .hs-tt__cielo--dia { opacity: 1; }
.hs-tt[aria-checked="false"] .hs-tt__luna {
  transform: translate(-170%, 170%) rotate(-40deg);
  transition: transform calc(var(--dur) * .75) cubic-bezier(.7, 0, .6, 1);
}
.hs-tt[aria-checked="false"] .hs-tt__sol {
  transform: none;
  transition: transform calc(var(--dur) * .7) cubic-bezier(.2, 1.25, .4, 1) calc(var(--dur) * .3);
}
.hs-tt[aria-checked="false"] .hs-tt__estrellas {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity calc(var(--dur) * .3) ease, transform calc(var(--dur) * .3) ease;
}

/* ── Fila de la barra lateral: «Modo oscuro» + interruptor ── */
.hs-tt-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 4px 12px;
}
.hs-tt-fila__texto { cursor: pointer; user-select: none; }

/* ── Transición de la página al cambiar de tema ──
   Solo mientras <html> lleva .theme-anim (~650 ms tras el clic, js/theme.js)
   y solo en body y superficies principales: nada de selector universal. La
   cápsula de index.html no está: su fondo es el mismo en los dos temas. */
html.theme-anim body,
html.theme-anim header,
html.theme-anim footer,
html.theme-anim main,
html.theme-anim section,
html.theme-anim article,
html.theme-anim aside,
html.theme-anim .bg-card,
html.theme-anim .bg-bg,
html.theme-anim .bg-surface-2 {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease;
}
/* La barra lateral se desliza en celular (transition-transform duration-200):
   la regla de arriba la pisaría, y cerrarla justo tras el clic sería un salto. */
html.theme-anim aside#sidebar {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease,
              transform .2s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hs-tt { --dur: 0ms; }
  html.theme-anim body,
  html.theme-anim header,
  html.theme-anim footer,
  html.theme-anim main,
  html.theme-anim section,
  html.theme-anim article,
  html.theme-anim aside,
  html.theme-anim .bg-card,
  html.theme-anim .bg-bg,
  html.theme-anim .bg-surface-2 { transition: none; }
  html.theme-anim aside#sidebar { transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
}