/*
 * Botón de sol y luna, en la esquina de la cabecera: cambia entre el tema de día y
 * el de noche. Muestra el tema al que lleva: la luna de día y el sol de noche.
 *
 * Es discreto a propósito (contorno fino, sin relleno): a su lado está el botón de
 * WhatsApp, que es la acción de la página y debe seguir mandando.
 *
 * Cuándo se ve:
 * - Sin JavaScript no se ve: no podría funcionar, y la página sigue al dispositivo.
 * - Con JavaScript, js/theme-boot.js reserva su hueco antes del primer pintado
 *   (<html data-theme-toggle-state="reserved">), así la cabecera no salta.
 * - js/modules/theme-toggle.js lo muestra cuando ya funciona ("ready").
 */
@layer components {
  .theme-toggle {
    display: none;
    position: relative;
    flex: none;
    place-items: center;
    inline-size: 2.75rem; /* 44 px: cómodo para el dedo */
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
    background-color: transparent;
    color: var(--color-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--duration-fast) ease,
      border-color var(--duration-fast) ease;
  }

  :root[data-theme-toggle-state] .theme-toggle {
    display: inline-grid;
    visibility: hidden;
  }

  :root[data-theme-toggle-state="ready"] .theme-toggle {
    visibility: visible;
  }

  /* Solo con puntero: en una pantalla táctil el «hover» se queda pegado tras el toque. */
  @media (hover: hover) {
    .theme-toggle:hover {
      border-color: var(--color-ink-soft);
      background-color: color-mix(in oklab, var(--color-ink) 6%, transparent);
    }
  }

  /* El anillo de foco general redondea poco; aquí sigue la curva del botón. */
  .theme-toggle:focus-visible {
    border-radius: var(--radius-control);
  }

  /* Los dos dibujos ocupan el mismo sitio; se ve uno a la vez. */
  .theme-toggle__icon {
    grid-area: 1 / 1;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    pointer-events: none;
  }

  /* De día (o mientras no se sabe), la luna: lleva a la noche. */
  .theme-toggle__icon--sun {
    opacity: 0;
    rotate: -70deg;
    scale: 0.55;
  }

  /* De noche, el sol: lleva al día. */
  .theme-toggle[data-next-theme="light"] .theme-toggle__icon--sun {
    opacity: 1;
    rotate: 0deg;
    scale: 1;
  }

  .theme-toggle[data-next-theme="light"] .theme-toggle__icon--moon {
    opacity: 0;
    rotate: 70deg;
    scale: 0.55;
  }

  /* Al pulsar, un dibujo gira y se va mientras el otro gira y llega. */
  @media (prefers-reduced-motion: no-preference) {
    .theme-toggle__icon {
      transition:
        opacity 0.2s ease,
        rotate 0.4s var(--ease-out),
        scale 0.4s var(--ease-out);
    }
  }

  /* Contraste forzado (Windows): el contorno y el dibujo toman los colores del sistema. */
  @media (forced-colors: active) {
    .theme-toggle {
      border-color: ButtonText;
      color: ButtonText;
    }
  }
}