/* =========================================================================
   SSM Intranet — Design System tokens + base reset.
   Reproduces the visual language of the approved reference screens
   (institutional blue, white sidebar, card-based dashboard).
   ========================================================================= */

:root {
	/* Brand */
	--ssm-blue-900: #0f2d4d;
	--ssm-blue-700: #14477a;
	--ssm-blue-600: #1d5c96;
	--ssm-blue-500: #2f7ab8;
	--ssm-blue-100: #e9f2fb;
	--ssm-blue-50:  #f2f8fd;
	--ssm-teal-500: #2fb5a0;

	/*
	 * Secondary editorial palette (§3/§9 refinamiento visual). Institutional
	 * blue stays structural; these are for category/module identity, hover
	 * states and banners — never for permanent full-page coloring. Each pair
	 * is a saturated "ink" (~4.5:1+ on white, for text/icons) and a pale
	 * "wash" (for chips/hover backgrounds).
	 */
	--ssm-electric-600: #3350e0; --ssm-electric-100: #eaefff;
	--ssm-celeste-600:  #0284c7; --ssm-celeste-100:  #e3f3fb;
	--ssm-turquoise-600:#0e9488; --ssm-turquoise-100:#e1f7f4;
	--ssm-green-600:    #1f9d55; --ssm-green-100:    #e6f7ec;
	--ssm-violet-600:   #7c3aed; --ssm-violet-100:   #f2e9fe;
	--ssm-coral-600:    #e2523f; --ssm-coral-100:    #fdece9;
	--ssm-orange-600:   #d9720c; --ssm-orange-100:   #fdf0e0;
	--ssm-gold-600:     #b8860f; --ssm-gold-100:     #fbf1da;

	/*
	 * Semantic module map (§9/§16). Sidebar items, card accents and badges
	 * read these — never a raw hex — so the mapping lives in one place.
	 */
	--ssm-mod-home: var(--ssm-blue-600);
	--ssm-mod-news: var(--ssm-celeste-600);
	--ssm-mod-communique: var(--ssm-coral-600);
	--ssm-mod-document: var(--ssm-electric-600);
	--ssm-mod-training: var(--ssm-violet-600);
	--ssm-mod-hospital: var(--ssm-turquoise-600);
	--ssm-mod-org: var(--ssm-electric-600);
	--ssm-mod-union: var(--ssm-violet-600);
	--ssm-mod-mobility: var(--ssm-green-600);
	--ssm-mod-contacts: var(--ssm-celeste-600);
	--ssm-mod-agenda: var(--ssm-electric-600);
	--ssm-mod-community: var(--ssm-celeste-600);
	--ssm-mod-ideas: var(--ssm-gold-600);
	--ssm-mod-helpdesk: var(--ssm-turquoise-600);
	--ssm-mod-wellbeing: var(--ssm-turquoise-600);
	--ssm-mod-benefits: var(--ssm-coral-600);
	--ssm-mod-recognition: var(--ssm-gold-600);

	/* Semantic */
	--ssm-color-primary: var(--ssm-blue-600);
	--ssm-color-primary-dark: var(--ssm-blue-900);
	--ssm-color-primary-light: var(--ssm-blue-100);
	--ssm-color-danger: #e0393e;
	--ssm-color-danger-light: #fdecec;
	--ssm-color-warning: #f0a63a;
	--ssm-color-warning-light: #fdf3e3;
	--ssm-color-success: #2fae60;
	--ssm-color-success-light: #e9f8ef;
	--ssm-color-info: var(--ssm-blue-500);
	--ssm-color-info-light: var(--ssm-blue-50);

	/* Neutrals */
	--ssm-text: #1a2733;
	--ssm-text-muted: #64748b;
	--ssm-text-faint: #94a3b8;
	--ssm-bg: #f3f6f9;
	--ssm-surface: #ffffff;
	--ssm-border: #e4e9ef;
	--ssm-border-strong: #cbd5e1;

	/* Spacing scale */
	--ssm-sp-1: 4px;
	--ssm-sp-2: 8px;
	--ssm-sp-3: 12px;
	--ssm-sp-4: 16px;
	--ssm-sp-5: 20px;
	--ssm-sp-6: 24px;
	--ssm-sp-8: 32px;
	--ssm-sp-10: 40px;

	/* Radii / shadow */
	--ssm-radius-sm: 8px;
	--ssm-radius-md: 12px;
	--ssm-radius-lg: 16px;
	--ssm-radius-full: 999px;
	--ssm-shadow-sm: 0 1px 2px rgba(15, 45, 77, 0.06);
	--ssm-shadow-md: 0 4px 16px rgba(15, 45, 77, 0.08);
	--ssm-shadow-lg: 0 12px 32px rgba(15, 45, 77, 0.14);

	/* Layout */
	--ssm-sidebar-w: 260px;
	--ssm-sidebar-w-collapsed: 76px;
	--ssm-header-h: 72px;
	--ssm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ssm-transition: 160ms ease;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ssm-bg: #0f1720;
		--ssm-surface: #17212c;
		--ssm-border: #263241;
		--ssm-border-strong: #34424f;
		--ssm-text: #e7edf3;
		--ssm-text-muted: #a3b1bf;
		--ssm-text-faint: #74828f;
		--ssm-blue-100: #172a3d;
		--ssm-blue-50: #14273a;
		--ssm-color-info-light: #14273a;
		--ssm-color-warning-light: #3a2f14;
		--ssm-color-danger-light: #3a1717;
		--ssm-color-success-light: #123a24;
		--ssm-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
		--ssm-shadow-md: 0 4px 16px rgba(0,0,0,0.45);
		--ssm-shadow-lg: 0 12px 32px rgba(0,0,0,0.5);

		--ssm-electric-100: #182352; --ssm-celeste-100: #10293a;
		--ssm-turquoise-100:#0f2e2a; --ssm-green-100: #103a24;
		--ssm-violet-100:   #2a1f47; --ssm-coral-100: #3a1c16;
		--ssm-orange-100:   #3a2610; --ssm-gold-100:  #362a0c;
	}
}

/*
 * [data-ssm-color] resolves a semantic color key (used by nav items, cards
 * and WP-admin-authored banners) to --ssm-item / --ssm-item-wash so one
 * component can be recolored per module/category without a CSS rule per key.
 */
[data-ssm-color="home"]        { --ssm-item: var(--ssm-mod-home);       --ssm-item-wash: var(--ssm-blue-100); }
[data-ssm-color="news"]        { --ssm-item: var(--ssm-mod-news);       --ssm-item-wash: var(--ssm-celeste-100); }
[data-ssm-color="communique"]  { --ssm-item: var(--ssm-mod-communique); --ssm-item-wash: var(--ssm-coral-100); }
[data-ssm-color="document"]    { --ssm-item: var(--ssm-mod-document);   --ssm-item-wash: var(--ssm-electric-100); }
[data-ssm-color="training"]    { --ssm-item: var(--ssm-mod-training);   --ssm-item-wash: var(--ssm-violet-100); }
[data-ssm-color="hospital"]    { --ssm-item: var(--ssm-mod-hospital);   --ssm-item-wash: var(--ssm-turquoise-100); }
[data-ssm-color="org"]         { --ssm-item: var(--ssm-mod-org);        --ssm-item-wash: var(--ssm-electric-100); }
[data-ssm-color="union"]       { --ssm-item: var(--ssm-mod-union);      --ssm-item-wash: var(--ssm-violet-100); }
[data-ssm-color="mobility"]    { --ssm-item: var(--ssm-mod-mobility);   --ssm-item-wash: var(--ssm-green-100); }
[data-ssm-color="contacts"]    { --ssm-item: var(--ssm-mod-contacts);   --ssm-item-wash: var(--ssm-celeste-100); }
[data-ssm-color="agenda"]      { --ssm-item: var(--ssm-mod-agenda);     --ssm-item-wash: var(--ssm-electric-100); }
[data-ssm-color="community"]   { --ssm-item: var(--ssm-mod-community);  --ssm-item-wash: var(--ssm-celeste-100); }
[data-ssm-color="ideas"]       { --ssm-item: var(--ssm-mod-ideas);      --ssm-item-wash: var(--ssm-gold-100); }
[data-ssm-color="helpdesk"]    { --ssm-item: var(--ssm-mod-helpdesk);   --ssm-item-wash: var(--ssm-turquoise-100); }
[data-ssm-color="benefits"]    { --ssm-item: var(--ssm-mod-benefits);   --ssm-item-wash: var(--ssm-coral-100); }
[data-ssm-color="recognition"] { --ssm-item: var(--ssm-mod-recognition);--ssm-item-wash: var(--ssm-gold-100); }
[data-ssm-color="violet"]      { --ssm-item: var(--ssm-violet-600);     --ssm-item-wash: var(--ssm-violet-100); }
[data-ssm-color="turquoise"]   { --ssm-item: var(--ssm-turquoise-600);  --ssm-item-wash: var(--ssm-turquoise-100); }
[data-ssm-color="coral"]       { --ssm-item: var(--ssm-coral-600);      --ssm-item-wash: var(--ssm-coral-100); }
[data-ssm-color="gold"]        { --ssm-item: var(--ssm-gold-600);       --ssm-item-wash: var(--ssm-gold-100); }
[data-ssm-color="green"]       { --ssm-item: var(--ssm-green-600);      --ssm-item-wash: var(--ssm-green-100); }
[data-ssm-color="electric"]    { --ssm-item: var(--ssm-electric-600);   --ssm-item-wash: var(--ssm-electric-100); }
[data-ssm-color="celeste"]     { --ssm-item: var(--ssm-celeste-600);    --ssm-item-wash: var(--ssm-celeste-100); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--ssm-font);
	color: var(--ssm-text);
	background: var(--ssm-bg);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

.ssm-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Focus visibility — accessibility baseline (§48). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ssm-color-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.ssm-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.ssm-skip-link {
	position: absolute;
	left: 8px; top: -48px;
	background: var(--ssm-color-primary);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--ssm-radius-sm);
	z-index: 1000;
	transition: top var(--ssm-transition);
}
.ssm-skip-link:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/*
 * WP core's front-end admin bar (only shown to logged-in editors/admins —
 * §setup.php already hides it for plain funcionarios) isn't built for phone
 * widths: "Howdy, <name>" doesn't wrap or truncate below 782px, which was
 * overflowing the page horizontally at mobile widths. This only affects
 * staff previewing the site on their own phone while logged in; it never
 * touches ssm-topbar/sidebar/navigation. Our own topbar already exposes
 * avatar/profile/logout, so hiding the redundant core bar here is a real
 * fix, not a cosmetic patch.
 */
@media screen and (max-width: 782px) {
	#wpadminbar { display: none !important; }
	html { margin-top: 0 !important; }
}

.ssm-demo-banner {
	background: var(--ssm-color-warning);
	color: #402c05;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 6px var(--ssm-sp-4);
}