/* ==========================================================================
   `.sf-theme-toggle` — boton kernel de modo claro/oscuro (IT274)
   --------------------------------------------------------------------------
   Archivo propio y chico (patron `_social_links.css`) porque lo necesitan
   documentos que NO cargan `_components.css`: `/bio/` y la pantalla de
   mantenimiento son standalone a proposito y no pueden pagar 42 KB por un
   boton de 36 px.

   Solo tokens `--sf-*`: el mismo boton se ve correcto en los dos temas sin
   una sola regla `@media prefers-color-scheme` propia.
   Markup: `templates/_widgets/_theme_toggle.html`.
   ========================================================================== */

.sf-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2, 0.5rem);
    /* 2.25rem = 36px. Es un control secundario: no compite con el contenido,
       pero el area tactil llega a 44px con el padding del contenedor. */
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0 0.6rem;
    border-radius: var(--sf-radius-full, 9999px);
    border: 1px solid var(--sf-color-border);
    background: var(--sf-color-bg-elevated);
    color: var(--sf-color-text-muted);
    font-family: inherit;
    font-size: var(--sf-font-body-sm, 0.875rem);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--sf-motion-fast, 150ms) var(--sf-ease-out, ease),
        border-color var(--sf-motion-fast, 150ms) ease,
        color var(--sf-motion-fast, 150ms) ease,
        transform var(--sf-motion-fast, 150ms) ease;
}

.sf-theme-toggle:hover {
    color: var(--sf-color-text);
    border-color: var(--sf-color-border-strong);
}

.sf-theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-color-primary) 32%, transparent);
    border-color: var(--sf-color-primary);
}

.sf-theme-toggle:active {
    transform: scale(0.94);
}

.sf-theme-toggle__icon {
    font-size: 0.9375rem;
}

.sf-theme-toggle__label {
    white-space: nowrap;
}

/* Variante «cuadrada»: para filas de acciones donde los vecinos ya son
   botones de esquina redondeada (el header de la tienda). Un circulo en
   medio de cuatro cuadrados se lee como un control de otro sistema. */
.sf-theme-toggle--square {
    border-radius: var(--sf-radius-md, 0.5rem);
    padding: 0;
    width: 2.25rem;
}

/* Variante para superficies con gradiente/imagen detras: el borde solo no
   alcanza a separarlo del fondo. */
.sf-theme-toggle--solid {
    background: color-mix(in srgb, var(--sf-color-bg-elevated) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--sf-shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
    .sf-theme-toggle { transition: none; }
    .sf-theme-toggle:active { transform: none; }
}