/**
 * Tokens de diseño compartidos (gestión + panel).
 * Colores de marca (--depol-mr-navy*, etc.) se inyectan vía wp_add_inline_style.
 */

:root {
	--textsub: #5c6470;
	--muted: var(--textsub);
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-pill: 999px;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	/* Breakpoints literales preferentes en CSS: 520px, 720px, 960px. */
	--bp-sm: 520px;
	--bp-md: 720px;
	--bp-lg: 960px;
	--depol-mr-pct-low: var(--danger);
	--depol-mr-pct-mid: var(--warning);
	--depol-mr-pct-ok: var(--success);
	--depol-mr-bar-track: rgba(var(--navy2-rgb), 0.08);
	--depol-mr-bar-fill: var(--navy2);
	--depol-mr-pass: var(--success);
	--depol-mr-fail: var(--danger);
	--depol-mr-pass-bg: var(--success-bg);
	--depol-mr-fail-bg: var(--danger-bg);
	--depol-mr-chart-pass: var(--success);
	--depol-mr-chart-fail: var(--danger);
	--depol-mr-chart-pct-h: 300px;
	--depol-mr-touch-min: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.depol-mr-app *,
	.depol-mr-app *::before,
	.depol-mr-app *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}