/*
 * Selector de tema del pie: automático, de día o de noche.
 * Son tres botones de opción nativos; el aspecto de «interruptor» lo da el texto
 * que sigue a cada uno. Lo activa js/modules/theme-switch.js.
 */
@layer components {
  .theme-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-xs);
    color: var(--color-ink-soft);
    font-size: var(--step--1);
  }

  .theme-switch__options {
    display: inline-flex;
    gap: var(--space-3xs);
    padding: var(--space-3xs);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-control);
  }

  .theme-switch__option {
    position: relative; /* ancla el botón de opción, que está oculto a la vista */
    display: inline-flex;
    cursor: pointer;
  }

  .theme-switch__text {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem; /* área táctil cómoda */
    padding-inline: var(--space-xs);
    /* Radio interior = radio del marco menos su relleno, para que las curvas sean paralelas. */
    border-radius: calc(var(--radius-control) - var(--space-3xs));
    font-weight: var(--weight-medium);
    transition:
      background-color var(--duration-fast) ease,
      color var(--duration-fast) ease;
  }

  .theme-switch__option:hover .theme-switch__text {
    color: var(--color-ink);
  }

  /* Opción elegida: tinta sobre el escritorio, invertidos. */
  .theme-switch__input:checked + .theme-switch__text {
    background-color: var(--color-ink);
    color: var(--color-desk);
  }

  .theme-switch__input:focus-visible + .theme-switch__text {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
  }

  /* Contraste forzado (Windows): la opción elegida se marca con los colores del sistema. */
  @media (forced-colors: active) {
    .theme-switch__input:checked + .theme-switch__text {
      background-color: Highlight;
      color: HighlightText;
    }
  }
}