/* Lo imprescindible para que el sitio funcione sin estilos de theme. */
@layer base {
	[hidden] { display: none !important; }

	body {
		background: var(--color-bg);
		color: var(--color-fg);
		font-family: var(--font-body);
		font-size: var(--step-0);
		line-height: var(--leading-body);
	}

	/* Elemento controlado por c-collapse / c-dropdown (u otro componente)
	   cuando está cerrado. Capa baja a propósito: un theme lo puede mostrar
	   igual desde views, por ejemplo el menú colapsado en pantallas anchas. */
	[data-state="closed"] { display: none; }

	/* Campos que el core imprime con size="60" o "70" (registro de usuarios): nunca más
	   anchos que su contenedor (si no, la página desborda en un celular). */
	:where(input, select, textarea) { max-inline-size: 100%; }

	/* Anclas y "saltar al contenido": que no queden debajo de un header fijo
	   (--header-height lo publica js/scroll-state.js). */
	:target, #pageArea {
		scroll-margin-block-start: var(--header-height, 0px);
	}
	/* #pageArea recibe el foco del link "saltar al contenido": sin contorno
	   si el foco no vino del teclado. */
	[tabindex="-1"]:focus:not(:focus-visible) {
		outline: none;
	}

	/* Etiquetas que dependen del estado de un disparador (c-collapse, c-dropdown…):
	   <button aria-expanded><span class="u-if-closed">Leer más</span><span class="u-if-open">Leer menos</span></button> */
	[aria-expanded="true"] > .u-if-closed,
	[aria-expanded="false"] > .u-if-open { display: none; }

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

	/* Visor de alta resolución del core (tileviewer): dibuja en un <canvas> del
	   tamaño de la diagonal, más grande que su contenedor a propósito, y lo
	   corre con márgenes negativos. El max-width: 100% del reset lo achicaría y
	   lo deformaría. (No verificado con teselas reales: la media local de
	   prueba no tiene la versión tilepic.) */
	.tileviewer canvas { max-width: none; }

	/* estado del infinite scroll ("cargando", "no hay más"): ocultos hasta que la
	   librería los muestre (lo hace con estilo inline). Sin esto, sin JS o antes de
	   iniciar, se ven los tres mensajes a la vez. */
	.c-results__status > * { display: none; }
}