/**
 * SER UI — tokens visuales (scope obligatorio).
 * Canvas (:root) aplica al marco WordPress bajo shell; el resto bajo [data-ser-ui].
 */

:root {
	--ser-ui-canvas-bg: #f4f5f7;
	--ser-ui-canvas-surface: #ffffff;
	--ser-ui-canvas-max-width: 1200px;
	--ser-ui-canvas-pad-x: 24px;
	--ser-ui-canvas-pad-y: 22px;
}

[data-ser-ui] {
	/* Caja y modelo de caja local (reset mínimo, solo bajo scope) */
	box-sizing: border-box;
}

[data-ser-ui]:not(.ser-module-topbar),
[data-ser-ui]:not(.ser-module-topbar) *,
[data-ser-ui]:not(.ser-module-topbar) *::before,
[data-ser-ui]:not(.ser-module-topbar) *::after {
	box-sizing: inherit;
}

[data-ser-ui].ser-module-topbar,
[data-ser-ui].ser-module-topbar *,
[data-ser-ui].ser-module-topbar *::before,
[data-ser-ui].ser-module-topbar *::after {
	box-sizing: border-box;
}

[data-ser-ui]:not(.ser-module-topbar) {
	/* Colores base */
	--ser-ui-color-bg: #f4f5f7;
	--ser-ui-color-surface: #ffffff;
	--ser-ui-color-surface-muted: #f8f9fb;
	--ser-ui-color-border: rgba(15, 23, 42, 0.12);
	--ser-ui-color-border-strong: rgba(15, 23, 42, 0.2);

	--ser-ui-color-text: #0f172a;
	--ser-ui-color-text-muted: #475569;

	/* Estados */
	--ser-ui-color-success: #166534;
	--ser-ui-color-suite-accent: #336666;
	--ser-ui-color-suite-accent-hover: #3d7575;
	--ser-ui-color-suite-accent-glow: rgba(51, 102, 102, 0.28);
	/* Acento naranja de marca (dashboard / CTAs Sinlio) */
	--ser-ui-accent: #c45c26;
	--ser-ui-accent-hover: #a84a1c;
	--ser-ui-accent-muted: #fff4ed;
	/* Cuenta y suscripción — cabeceras premium (HF10). */
	--ser-account-subscription-header-bg: #1f4a42;
	--ser-account-subscription-header-ink: #ffffff;
	--ser-account-subscription-accent: #2d5f56;
	--ser-ui-account-subscription-header-bg: var(--ser-account-subscription-header-bg);
	--ser-ui-account-subscription-header-ink: var(--ser-account-subscription-header-ink);
	--ser-ui-account-subscription-accent: var(--ser-account-subscription-accent);
	/* Navegación secundaria bajo cabecera Odin — banda verde grisácea suave */
	--ser-ui-section-nav-band-bg: #e8efec;
	--ser-ui-section-nav-band-border: rgba(31, 74, 66, 0.14);
	--ser-ui-section-nav-ink: #1f4a42;
	--ser-ui-section-nav-ink-muted: #4a5058;
	--ser-ui-section-nav-accent: #8b5e45;
	--ser-ui-section-nav-tab-active-bg: #ffffff;
	--ser-ui-section-nav-focus: var(--ser-ui-section-nav-ink);
	--ser-ui-color-warning: #a16207;
	--ser-ui-color-danger: #b91c1c;
	--ser-ui-color-neutral: #475569;

	/* Interacción / foco (HF08) — neutro oscuro; sin azul WP/navegador */
	--ser-ui-interaction-ink: #1a1d21;
	--ser-ui-interaction-ink-muted: #50575e;
	--ser-ui-interaction-ink-strong: #0f172a;
	--ser-ui-focus-ring: #1a1d21;
	--ser-ui-focus-ring-soft: color-mix(in srgb, #1a1d21 55%, #94a3b8 45%);
	--ser-ui-focus: var(--ser-ui-focus-ring);
	--ser-color-focus: var(--ser-ui-focus-ring);
	--ser-accent: var(--ser-ui-color-suite-accent);
	--ser-ui-tap-highlight: rgba(26, 29, 33, 0.12);

	/* Radios */
	--ser-ui-radius-sm: 6px;
	--ser-ui-radius-md: 10px;
	--ser-ui-radius-lg: 14px;

	/* Sombras */
	--ser-ui-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);

	/* Espaciados */
	--ser-ui-space-1: 4px;
	--ser-ui-space-2: 8px;
	--ser-ui-space-3: 12px;
	--ser-ui-space-4: 16px;
	--ser-ui-space-5: 20px;
	--ser-ui-space-6: 24px;

	/* Anchuras */
	--ser-ui-max-width: 1200px;
	--ser-ui-rail-width: 320px;

	/* Tipografía */
	--ser-ui-font-family: inherit;
	/* Stack sans nativo SER — cargado por el SO; no declarar fuentes web sin @font-face (144/146). */
	--ser-ui-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	/* Token oficial títulos SER — Roboto embebida local (147). */
	--ser-ui-title-font-family: "SER Roboto", Arial, sans-serif;
	--ser-ui-font-size-sm: 12px;
	--ser-ui-font-size-md: 14px;
	--ser-ui-font-size-lg: 16px;
	--ser-ui-font-size-xl: 20px;
	--ser-ui-line-height-tight: 1.25;
	--ser-ui-line-height-normal: 1.45;

	/* Controles */
	--ser-ui-control-height: 36px;

	color: var(--ser-ui-color-text);
	font-family: var(--ser-ui-font-family);
	font-size: var(--ser-ui-font-size-md);
	line-height: var(--ser-ui-line-height-normal);
	background: transparent;
}

/* Topbar modular: el propio header lleva data-ser-ui (SER-SUITE-0030 / D-210) */
[data-ser-ui].ser-module-topbar {
	--ser-module-topbar-bg: #1a1f24;
	--ser-module-topbar-accent: #336666;
	--ser-ui-module-topbar-height: 56px;
	background: var(--ser-module-topbar-bg, #1a1f24);
	color: rgba(255, 255, 255, 0.92);
}