/**
 * Viviendax · theme-toggle.css
 *
 * Botón sol/luna del header público. Convive con el sistema existente:
 *  - Modo light (default)               → tokens claros, muestra luna (acción: ir a oscuro)
 *  - html[data-theme="dark"]            → tokens oscuros, muestra sol (acción: ir a claro)
 *  - prefers-color-scheme:dark (sin tag)→ tokens oscuros, muestra sol
 *
 * Se carga globalmente en frontend excepto en /panel/* (que tiene su propio
 * sistema dark/light en .vx-panel[data-theme]).
 */

.vx-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
	flex: none;
}

.vx-theme-toggle:hover {
	background: var(--background-soft);
	border-color: var(--primary);
	color: var(--primary);
}

.vx-theme-toggle:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.vx-theme-toggle:active {
	transform: scale(0.95);
}

.vx-theme-toggle .vx-theme-icon {
	transition: opacity .15s ease, transform .25s ease;
}

/* Mostrar el icono OPUESTO al tema actual: el botón indica acción, no estado.
   Default (sin data-theme y sin preferencia oscura del SO): luna visible.
   Modo oscuro: sol visible.
   Reglas con `.vx-theme-toggle` como ancestro para empatar especificidad
   con `.vx-theme-toggle .vx-theme-icon`. */
.vx-theme-toggle .vx-theme-icon-sun  { display: none; }
.vx-theme-toggle .vx-theme-icon-moon { display: block; }

html[data-theme="dark"] .vx-theme-toggle .vx-theme-icon-sun  { display: block; }
html[data-theme="dark"] .vx-theme-toggle .vx-theme-icon-moon { display: none; }

/* Si el SO está en oscuro y el user no ha tocado el toggle, también mostrar sol. */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .vx-theme-toggle .vx-theme-icon-sun  { display: block; }
	html:not([data-theme]) .vx-theme-toggle .vx-theme-icon-moon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vx-theme-toggle,
	.vx-theme-toggle .vx-theme-icon {
		transition: none;
	}
}

@media (max-width: 640px) {
	.vx-theme-toggle {
		width: 34px;
		height: 34px;
	}
	.vx-theme-toggle .vx-theme-icon {
		width: 18px;
		height: 18px;
	}
}