/**
 * CSS del DOCUMENTO de la SPA de Thinkindot ID.
 *
 * POR QUÉ ESTE ARCHIVO EXISTE
 * ===========================
 * Todo lo que se declara en el `<style>` crítico de `index.html` pasa por el pipeline de PostCSS
 * de Vite (Vite proxea ese bloque como `index.html?html-proxy&inline-css&index=N.css`), y ahí
 * `scripts/postcss/scope-sdk-css.mjs` lo trata como si fuera CSS del SDK. Ese plugin hace TRES
 * cosas distintas según `classifyLeftmost()` del selector más a la izquierda:
 *
 *   - `root` (`html`, `body`, `:host`/`:root` pelados) .... DESCARTA la regla entera.
 *   - clase / atributo / `*` / pseudo sin sujeto ......... la SCOPEA a `:where(:host,[data-td-scope],…)`.
 *   - id (`#app-root`) o custom element (`td-*`) ......... la deja intacta.
 *
 * El documento de la SPA no está dentro de ningún `[data-td-scope]`, así que las dos primeras
 * categorías quedan MUERTAS: las descartadas desaparecen, y las scopeadas siguen en el artefacto
 * (con el prefijo puesto) pero no matchean nada. Sólo la tercera categoría sigue funcionando.
 *
 * [SCOMUNICACIONESYMEDI-1075] destapó la primera categoría: la tipografía del documento vivía en
 * `body{font-family:…}` y el plugin la descartaba, así que `html`/`body` heredaban el default del
 * navegador (Times) porque `/vendor/reset.min.css` declara `font:inherit` sobre ambos.
 *
 * [DTHINKINDOTID-695] destapó la segunda: `.skip-link` salía scopeada y el enlace de accesibilidad
 * se veía en pantalla en todos los tenants. Medido: 12 de las 19 reglas del `<style>` crítico
 * estaban muertas. OJO — la explicación que traía este comentario antes («el `<style>` crítico no
 * sobrevive al build») era imprecisa: el bloque SÍ sobrevive (5092 chars en `dist/web/index.html`);
 * lo que no sobrevive son las reglas `root`, y las de clase salen scopeadas.
 * https://dosalcubo.atlassian.net/browse/DTHINKINDOTID-695
 *
 * REGLA PRÁCTICA
 * ==============
 * En el `<style>` crítico de `index.html` sólo pueden vivir selectores de **id** o de **custom
 * element**. Todo lo demás va acá: `public/` se copia sin procesar y no pasa por PostCSS.
 * `scripts/check-critical-css-scope.mjs` lo verifica en cada build y falla si alguien lo olvida.
 *
 * Este archivo se carga con `<link>` en `index.html`, DESPUÉS de `/vendor/reset.min.css` y
 * `/vendor/cleanslate.css`: misma especificidad, gana el orden.
 */

html {
	font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
}

body {
	/* `reset.min.css` pone `body{line-height:1}`; antes lo pisaba `body{line-height:inherit}`
	   del Preflight. */
	line-height: inherit;
	margin: 0;

	/* [DTHINKINDOTID-695] Venían del `<style>` crítico, donde el plugin las descartaba por ser
	   una regla `body`. NO se trae su `font-family` (era "Open Sans", …Oxygen, Ubuntu, Cantarell):
	   la tipografía del documento la define `html` acá arriba desde 1075, y son stacks distintos —
	   revivir la de `body` cambiaría el fallback cuando Open Sans no carga. */
	padding: 0;
	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
	min-height: 100vh;
	min-height: 100dvh; /* Dynamic viewport height for mobile */
	width: 100%;
	overflow-x: hidden;
}

/* ------------------------------------------------------------------------------------------
 * [DTHINKINDOTID-695] Lo de acá abajo vivía en el `<style>` crítico de `index.html` y estaba
 * muerto: el plugin de scopeo lo prefijaba con el scope del SDK y ya no matcheaba el documento.
 * Se mueve tal cual, sin cambios de valores. https://dosalcubo.atlassian.net/browse/DTHINKINDOTID-695
 * ------------------------------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Global focus indicator for accessibility */
:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}

/*
 * Skip link for accessibility (WCAG 2.4.1)
 *
 * Visually hidden using clip-path (sr-only pattern) — immune to
 * viewport-fit, text scaling, and mobile browser chrome dynamics.
 * Becomes visible at top-left on keyboard focus only.
 *
 * Why NOT display:none or visibility:hidden?
 *   → Both remove the element from the accessibility tree.
 *     Screen readers can't find it, keyboard can't Tab to it.
 *
 * Why NOT top:-40px (previous implementation)?
 *   → Fails when viewport-fit:cover extends layout into safe-area,
 *     and breaks at 200% text zoom (WCAG 1.4.4) where element
 *     height exceeds the offset.
 */
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);       /* Legacy fallback (all browsers) */
	clip-path: inset(50%);         /* Modern standard — zero visible area */
	white-space: nowrap;           /* Prevents text wrap inside 1px container */
	border: 0;

	/* Visual styling (only visible when clip is removed on focus) */
	background: #3b82f6;
	color: white;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	border-radius: 4px;
	z-index: 99999;
}

.skip-link:focus-visible {
	/* Undo all hiding properties */
	position: fixed;               /* Viewport-relative — works at any scroll position in SPA */
	width: auto;
	height: auto;
	padding: 0.75rem 1.5rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;

	/* Position below notch/safe-area on iOS devices */
	top: max(0.5rem, env(safe-area-inset-top, 0.5rem));
	left: max(0.5rem, env(safe-area-inset-left, 0.5rem));

	outline: 3px solid #1d4ed8;
	outline-offset: 2px;
}

/* Noscript styling */
.noscript-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh; /* Dynamic viewport height for mobile */
	padding: 2rem;
	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.noscript-content {
	text-align: center;
	padding: 2rem;
	background: white;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	max-width: 500px;
	width: 100%;
}

.noscript-content h1 {
	color: #1f2937;
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
}

.noscript-content p {
	color: #6b7280;
	line-height: 1.6;
	margin: 0 0 1rem 0;
}

.noscript-content .icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1.5rem auto;
	background: #fef3c7;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

/* Responsive design */
@media (max-width: 640px) {
	.noscript-content {
		margin: 1rem;
		padding: 1.5rem;
	}
	/* Skip-link mobile override removed — clip-path technique is viewport-agnostic */
}

/* Windows High Contrast Mode — use system color keywords */
@media (forced-colors: active) {
	.skip-link:focus-visible {
		outline: 3px solid ButtonText;
		background: Highlight;
		color: HighlightText;
	}
}