/*
 * Estilos del bloque `#prerender`: el HTML estático que cada app trae en su `index.html` para
 * describirse antes de que monte el bundle.
 *
 * No puede depender de Tailwind ni de la UI library porque ese CSS lo inyecta el propio bundle,
 * que es justamente lo que todavía no corrió. Vive en `common/public` —montado en `/` para todas
 * las apps— para no repetir la hoja en cada `index.html`.
 */

#prerender {
	max-width: 52rem;
	margin: 0 auto;
	padding: 4rem 1.5rem;
	color: #1a202c;
	line-height: 1.6;
	font-family: system-ui, sans-serif;
}

html[dark-mode] #prerender {
	color: #e2e8f0;
}

#prerender h1 {
	font-size: clamp(1.9rem, 5vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

#prerender .prerender-lead {
	font-size: 1.125rem;
	margin: 0 0 2rem;
	opacity: 0.9;
}

#prerender ul {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

#prerender li {
	border: 1px solid currentColor;
	/* El borde es el mismo color que el texto: sin variables de tema, bajarle el alpha con
	   `color-mix` es lo que evita que quede un recuadro duro. */
	border-color: color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 0.75rem;
	padding: 1rem;
}

#prerender li strong {
	display: block;
	margin-bottom: 0.25rem;
}

#prerender li span {
	font-size: 0.925rem;
	opacity: 0.8;
}

#prerender .prerender-links {
	font-size: 0.925rem;
	opacity: 0.8;
}

#prerender a {
	color: inherit;
}

/*
 * El bundle montó y llenó `#root`, así que el bloque ya cumplió y estorba. Se hace por CSS y no
 * por JS para no tocar el entry point de cada app; si el navegador no soporta `:has()` el bloque
 * queda visible encima de la app, que es feo pero no roto.
 */
body:has(#root:not(:empty)) #prerender {
	display: none;
}