/* Chronus Tabula — marca.css
   Sistema visual común de la portada (index.html), colaborar.html, el mapa
   (mapa.html) y el panel de administración (admin.html). Se carga ANTES que la
   hoja propia de cada página: aquí van los tokens, la base tipográfica, los
   componentes comunes (botones, enlaces, chips, iconos, foco) y las superficies
   del navegador (selección, cursor de texto, barras de desplazamiento).

   Mundo: el mapa mural del aula. Papel blanco frío, tinta en filetes de 1,5 px,
   azul océano que ocupa superficies enteras, tintas políticas planas y el rojo
   de las batallas. Tipografía Archivo (autoalojada, variable en anchura): la
   versión condensada en mayúsculas para títulos, años y rótulos, como en una
   lámina impresa; la normal para leer. Esquinas casi rectas, sin cristal. */

/* Archivo (Omnibus-Type, SIL OFL 1.1; licencia en lib/fuentes/). Variable en
   peso (100–900) y anchura (62–125 %). */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url('../lib/fuentes/archivo-latin-wdth-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url('../lib/fuentes/archivo-latin-ext-wdth-normal.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Archivo';
	font-style: italic;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url('../lib/fuentes/archivo-latin-wdth-italic.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212;
}

/* banderas de los idiomas (🇪🇸 🇬🇧): Windows no pinta los emojis de banderas, así
   que se sirve una fuente mínima (Twemoji Country Flags reducida a esas dos, 4 KB;
   licencias en lib/banderas/). unicode-range: solo afecta a los indicadores
   regionales, el resto del texto sigue en Archivo. */
@font-face {
	font-family: 'Banderas';
	src: url('../lib/banderas/banderas-idioma.woff2') format('woff2');
	unicode-range: U+1F1E6-1F1FF;
	font-display: swap;
}

:root {
	/* --- color: la lámina --- */
	--papel: #ffffff;
	--papel-2: #f2f5f7; /* papel en sombra: secciones alternas, campos */
	--tinta: #14202b; /* 16,5:1 sobre papel */
	--tinta-2: #56626e; /* 6,2:1 sobre papel · 5,7:1 sobre papel-2 */
	--oceano: #1b4a73; /* 9,2:1 con blanco: fondo de secciones y botones */
	--oceano-hondo: #143a5b;
	--oceano-texto-2: #c9d9e8; /* texto secundario sobre océano: 6,4:1 */
	--mar: #cfe2ef; /* el mar del mapa */
	--rojo: #b8291c; /* batallas y marcas; 6,2:1 sobre papel */
	--filete: 1.5px solid var(--tinta);
	/* tintas políticas planas (las del mapa) */
	--t-rosa: #eaa39b;
	--t-amarillo: #f1d06e;
	--t-verde: #a9d18e;
	--t-naranja: #f2b27a;
	--t-violeta: #bda6d8;
	--t-celeste: #9cc7e0;
	--t-ocre: #d8b48a;
	--t-salvia: #b3d3c1;
	--t-frambuesa: #eba8c4;
	--t-turquesa: #8ed3cd;
	--t-pervinca: #aab3e8;
	--t-lima: #d2dc8a;
	--t-piedra: #cfc6b6;

	/* alias que usan todas las páginas */
	--fondo: var(--papel);
	--fondo-alt: var(--papel-2);
	--linea: #c5cfd7;
	--linea-suave: rgba(20, 32, 43, 0.1);
	--acento: var(--oceano);
	--acento-press: var(--oceano-hondo);
	--acento-texto: var(--oceano);
	--acento-velo: rgba(27, 74, 115, 0.1);
	--ok: #1d6b3f;
	--ok-velo: #e4f1e8;
	--mal: #b3261e;
	--mal-velo: #fbe9e7;
	--aviso: #7d5300;
	--aviso-velo: #fcf1d6;
	/* épocas (barra de tiempo del mapa) */
	--antigua: #d8b48a;
	--media: #a9d18e;
	--moderna: #9cc7e0;
	--contemp: #eaa39b;
	--actual: #f1d06e;

	/* --- tipografía --- */
	--font: 'Archivo', 'Banderas', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
	--estrecha: 62%; /* anchura de la condensada: títulos, años, rótulos */
	--t-display: clamp(3.5rem, 1.8rem + 7vw, 7.5rem); /* años y titulares de lámina, condensada */
	--t-h2: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); /* condensada */
	--t-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--t-h3: 1.25rem;
	--t-body: 1.0625rem;
	--t-small: 0.875rem;
	--t-micro: 0.75rem;

	/* --- espaciado (base 4) --- */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;
	--s-10: 128px;
	--seccion-y: clamp(64px, 5vw + 40px, 128px);
	--gutter: clamp(16px, 4vw, 40px);

	/* --- anchuras --- */
	--ancho: 1200px;
	--ancho-texto: 640px;
	--ancho-hero: 1200px;

	/* --- radios: impresión, casi rectos --- */
	--r-tarjeta: 4px;
	--r-media: 4px;
	--r-panel: 6px;
	--r-control: 4px;
	--r-chip: 2px;
	--r-pill: 3px;

	/* --- sombras: casi ninguna; con desplazamiento y desenfoque --- */
	--sombra-media: 0 1px 2px rgba(20, 32, 43, 0.08), 0 10px 30px rgba(20, 32, 43, 0.12);
	--sombra-panel: 0 1px 1px rgba(20, 32, 43, 0.1), 0 6px 18px rgba(20, 32, 43, 0.12);
	--sombra-hover: 0 8px 22px rgba(20, 32, 43, 0.14);

	/* --- superficies sobre el mapa: papel casi opaco, sin cristal --- */
	--material: rgba(255, 255, 255, 0.96);
	--material-denso: rgba(255, 255, 255, 0.97);
	--desenfoque: none;

	/* --- movimiento --- */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--d-press: 120ms;
	--d-ui: 200ms;

	accent-color: var(--oceano);
	scrollbar-color: #9aa8b4 transparent;
}

/* --- base y superficies del navegador --- */
html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}
body {
	font-family: var(--font);
	color: var(--tinta);
	caret-color: var(--oceano);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
::selection {
	background: var(--t-amarillo);
	color: var(--tinta);
}
button,
input,
select,
textarea {
	font-family: inherit;
}
:focus-visible {
	outline: 2px solid var(--oceano);
	outline-offset: 3px;
}

/* la voz de la lámina: condensada en mayúsculas */
.condensada {
	font-stretch: var(--estrecha);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* --- botones: rectángulos impresos --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: var(--filete);
	border-radius: var(--r-control);
	background: var(--papel);
	color: var(--tinta);
	font: 700 var(--t-body) / 1 var(--font);
	font-stretch: 85%;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	transition:
		transform var(--d-press) var(--ease-out),
		background-color var(--d-ui) ease,
		color var(--d-ui) ease;
}
.btn:active {
	transform: scale(0.97);
}
.btn:focus-visible {
	outline-offset: 4px;
}
.btn.principal {
	background: var(--oceano);
	border-color: var(--oceano);
	color: #fff;
}
.btn.grande {
	min-height: 52px;
	padding: 0 26px;
	font-size: 1.125rem;
}
.btn.pequeno {
	min-height: 34px;
	padding: 0 14px;
	font: 700 14px/1 var(--font);
	font-stretch: 85%;
}
@media (hover: hover) and (pointer: fine) {
	.btn:hover {
		background: var(--papel-2);
	}
	.btn.principal:hover {
		background: var(--oceano-hondo);
		border-color: var(--oceano-hondo);
	}
}

/* enlace de acción «Más información ›» */
.enlace-flecha {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--acento-texto);
	font: 600 var(--t-body) / 1 var(--font);
	text-decoration: none;
	touch-action: manipulation;
}
.enlace-flecha::after {
	content: '→';
	margin-left: 6px;
	transition: transform var(--d-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.enlace-flecha:hover {
		text-decoration: underline;
		text-underline-offset: 0.18em;
	}
	.enlace-flecha:hover::after {
		transform: translateX(3px);
	}
}

/* etiqueta impresa (móvil, escritorio, «5 minutos»…) */
.chip {
	display: inline-block;
	padding: 4px 7px 3px;
	border: 1px solid currentColor;
	border-radius: var(--r-chip);
	color: var(--tinta-2);
	font: 700 var(--t-micro) / 1 var(--font);
	font-stretch: var(--estrecha);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	vertical-align: 0.15em;
}

/* iconos de trazo (sprite <symbol> en cada página) */
.icono {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

/* --- preferencias del sistema --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}
@media (prefers-contrast: more) {
	:root {
		--tinta-2: #3b4652;
		--linea: #6c7a86;
	}
}