* {
	box-sizing: border-box;
}
:root {
	/* curva compartida de la interfaz: salida rápida y asentamiento suave */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
html {
	-webkit-tap-highlight-color: transparent; /* sin destello gris al tocar (cada control tiene su :active) */
	-webkit-text-size-adjust: 100%; /* sin inflado de letra en horizontal */
}
html,
body {
	height: 100%;
	margin: 0;
	overscroll-behavior: none; /* el mapa es una app: sin «tirar para recargar» ni rebote de página */
	font-family: var(--font);
}

#map {
	position: absolute;
	inset: 0;
	background: var(--mar, #cfe2ef);
}

/* ---- Barra superior ---- */
#topbar {
	position: absolute;
	top: calc(10px + env(safe-area-inset-top, 0px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--material-denso);
	-webkit-backdrop-filter: var(--desenfoque);
	backdrop-filter: var(--desenfoque);
	padding: 6px 16px;
	border-radius: var(--r-panel);
	box-shadow: var(--sombra-panel);
}
#topbar h1 {
	font-size: 17px;
	margin: 0;
	color: var(--tinta);
	font-weight: 600;
	white-space: nowrap;
}
/* idioma: botón con la bandera y menú propio (banderas centradas y del mismo
   tamaño en el botón y en la lista; el desplegable nativo no lo permite) */
.bandera {
	display: block;
	font-family: 'Banderas', var(--font);
	font-size: 18px;
	line-height: 1;
}
.lang-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--linea, #ccc);
	border-radius: var(--r-control, 10px);
	background: #fff;
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 160ms var(--ease-out);
}
.lang-btn:active {
	transform: scale(0.97);
}
.lang-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	translate: -50% 0;
	z-index: 1300;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #fff; /* opaco: debajo pasan el buscador y los paneles */
	border: 1px solid var(--linea-suave, rgba(0, 0, 0, 0.08));
	border-radius: 12px;
	box-shadow: var(--sombra-panel);
	transform-origin: top center; /* crece desde el botón */
	transition:
		opacity 150ms var(--ease-out),
		scale 150ms var(--ease-out);
}
.lang-menu[hidden] {
	display: none;
}
@starting-style {
	.lang-menu {
		opacity: 0;
		scale: 0.96;
	}
}
.lang-menu [role='option'] {
	display: grid;
	place-items: center;
	width: 40px;
	height: 36px;
	border-radius: 8px;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}
.lang-menu [role='option'][aria-selected='true'] {
	background: var(--acento-velo, #eaf2f8);
}
.lang-menu [role='option']:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
	.lang-menu [role='option']:hover {
		background: var(--fondo-alt, #f5f5f7);
	}
	.lang-menu [role='option'][aria-selected='true']:hover {
		background: var(--acento-velo, #eaf2f8);
	}
}
/* botón de ayuda: enlaza a la portada (controles) */
#helpBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border: 1px solid #b7c4d1;
	border-radius: 50%;
	background: #fff;
	color: var(--tinta);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	font-family: var(--font);
}
#helpBtn:focus-visible {
	background: var(--acento-velo);
	border-color: var(--tinta);
	outline: none;
}
@media (hover: hover) and (pointer: fine) {
	#helpBtn:hover {
		background: var(--acento-velo);
		border-color: var(--tinta);
	}
}

/* ---- Controles táctiles ----
   touch-action: sin espera de doble toque (y sin zoom al pulsar ◀ ▶ muy seguido).
   user-select: mantener pulsado un control no selecciona su texto. Solo controles:
   el texto de las fichas sigue siendo seleccionable. */
button,
select,
#topbar a,
.tmark,
.panel-title,
#layersPanel label,
.legend-row,
.yp-row,
.mp-row {
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* respuesta al pulsar: el control reacciona al apoyar el dedo, no al soltarlo */
.step-btn,
.mini-btn,
#helpBtn {
	transition:
		transform 160ms var(--ease-out),
		background-color 160ms var(--ease-out);
}
.step-btn:active,
.mini-btn:active,
#helpBtn:active {
	transform: scale(0.97);
}
.step-btn:active,
.mini-btn:active,
#helpBtn:active {
	background: #dde9f3;
}

/* controles de Leaflet (zoom, capas base, atribución) fuera del notch */
.leaflet-top {
	top: env(safe-area-inset-top, 0px);
}
.leaflet-bottom {
	bottom: env(safe-area-inset-bottom, 0px);
}
.leaflet-left {
	left: env(safe-area-inset-left, 0px);
}
.leaflet-right {
	right: env(safe-area-inset-right, 0px);
}

/* ---- Indicador de carga ---- */
#loading {
	position: absolute;
	top: calc(60px + env(safe-area-inset-top, 0px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--material-denso);
	-webkit-backdrop-filter: var(--desenfoque);
	backdrop-filter: var(--desenfoque);
	padding: 6px 14px;
	border-radius: var(--r-pill);
	box-shadow: var(--sombra-panel);
	font-size: 14px;
	color: #333;
	transition:
		opacity 150ms var(--ease-out) 200ms,
		visibility 0s linear 200ms;
}
#loading.hidden {
	opacity: 0;
	visibility: hidden;
	transition: none; /* ocultar es inmediato */
}
.spinner {
	width: 16px;
	height: 16px;
	border: 3px solid #ddd;
	border-top-color: #3498db;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---- Barra de tiempo inferior ---- */
#timebar {
	position: absolute;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 1000;
	width: min(
		860px,
		calc(100% - 30px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
	);
	background: var(--material-denso);
	-webkit-backdrop-filter: var(--desenfoque);
	backdrop-filter: var(--desenfoque);
	border-radius: var(--r-panel);
	box-shadow: var(--sombra-panel);
	padding: 12px 18px 8px;
}
.timebar-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.timebar-row.labels {
	justify-content: space-between;
	margin-top: 2px;
	font-size: 12px;
	color: #666;
}
#showingLabel {
	font-size: 14px;
	color: var(--tinta);
}
#showingLabel strong {
	font-size: 15px;
}

/* salto de las flechas: oculto en escritorio (el tooltip basta), visible en móvil */
.paso-info {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 0;
	font:
		600 13px var(--font);
	color: var(--tinta);
	font-variant-numeric: tabular-nums;
}
.paso-info .pi-a {
	color: var(--acento);
	font-size: 12px;
}

#yearSlider {
	flex: 1;
	accent-color: var(--acento);
	height: 26px;
	cursor: pointer;
}
#yearInput {
	width: 84px;
	padding: 4px 6px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
	text-align: center;
}
.step-btn {
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 6px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	font-size: 12px;
	color: var(--tinta);
}
@media (hover: hover) and (pointer: fine) {
	.step-btn:hover {
		background: var(--acento-velo);
	}
}

/* ---- Popup ---- */
/* fichas de Leaflet: fundido de 150 ms con curva de salida y escala desde la punta
   (el punto pulsado). Leaflet coloca la ficha con transform en línea: por eso se
   usa la propiedad independiente `scale`, que se compone con él. La opacidad la
   anima Leaflet (en línea, 0 → 1); aquí solo cambian curva y duración. */
.leaflet-fade-anim .leaflet-popup {
	transform-origin: 50% 100%;
	transition:
		opacity 150ms var(--ease-out),
		scale 150ms var(--ease-out);
}
@starting-style {
	.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
		scale: 0.96;
	}
}
@media (prefers-reduced-motion: reduce) {
	@starting-style {
		.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
			scale: 1;
		}
	}
}
.territory-popup h3 {
	margin: 0 0 6px;
	font-size: 15px;
	color: var(--tinta);
}
.territory-popup table {
	border-collapse: collapse;
	font-size: 13px;
}
.territory-popup td {
	padding: 2px 6px 2px 0;
	vertical-align: top;
}
.territory-popup td:first-child {
	color: #777;
	white-space: nowrap;
}
.territory-popup a {
	color: var(--acento);
}

/* ---- Navegador de zoom tipo Premiere (escritorio) ---- */
#navBar {
	position: relative;
	height: 22px;
	margin: 2px 40px 0;
	border: 1px solid var(--line, #ddd8cd);
	border-radius: 7px;
	overflow: hidden;
	background: #ece7dc;
	touch-action: none;
	user-select: none;
	cursor: pointer;
}
#navBar .nav-eras {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	background: linear-gradient(
		90deg,
		#cbb78f 0 20%,
		#a8c0a0 20% 40%,
		#9db6cf 40% 78%,
		#c9a3b4 78% 100%
	);
}
#navBar .nav-win {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(41, 128, 158, 0.24);
	border: 1px solid var(--acento);
	border-radius: 3px;
	cursor: grab;
	min-width: 6px;
}
#navBar .nav-win:active {
	cursor: grabbing;
}
#navBar .nav-h {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	background: var(--acento);
	cursor: ew-resize;
}
#navBar .nav-h.l {
	left: -1px;
	border-radius: 3px 0 0 3px;
}
#navBar .nav-h.r {
	right: -1px;
	border-radius: 0 3px 3px 0;
}
#navBar .nav-h::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 2px;
	height: 10px;
	background: #fff;
	border-radius: 1px;
}
@media (max-width: 720px) {
	#navBar {
		display: none;
	} /* en móvil el zoom lo dan los chips de época */
}

/* ---- Burbuja-lupa sobre el pulgar (modo móvil) ---- */
.slider-bubble {
	position: absolute;
	bottom: 46px;
	transform: translateX(-50%);
	background: #2b2e33;
	color: #fff;
	font:
		700 19px/1 var(--font);
	padding: 8px 12px;
	border-radius: 10px;
	pointer-events: none;
	z-index: 1002;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.slider-bubble:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #2b2e33;
	border-bottom: none;
}
#layersPanel .panel-title {
	cursor: pointer;
	user-select: none;
}
#layersPanel .panel-title::after {
	content: ' ▾';
	color: #999;
}
#layersPanel.collapsed .panel-title::after {
	content: ' ▸';
}
#layersPanel.collapsed label {
	display: none;
}

/* ---- Modo móvil: controles de dedo ---- */
@media (max-width: 720px) {
	#topbar {
		left: calc(8px + env(safe-area-inset-left, 0px));
		right: calc(8px + env(safe-area-inset-right, 0px));
		transform: none;
		max-width: none;
		gap: 6px;
	}
	#topbar h1 {
		font-size: 14px;
	}
	#yearInput {
		width: 74px;
		height: 40px;
		font-size: 15px;
	}
	#timebar {
		width: calc(100% - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		padding: 10px 12px 6px;
	}
	#speedSelect {
		display: none;
	} /* la velocidad es afinado de escritorio */
	.step-btn,
	#playBtn {
		width: 44px;
		height: 44px;
		font-size: 15px;
	}
	/* deslizador de pulgar: pista gruesa y pulgar de 34 px. Sin appearance:none
	   en el propio input, Chrome/Safari ignoran la pista personalizada y el
	   pulgar queda descentrado respecto a ella */
	#yearSlider {
		height: 44px;
		-webkit-appearance: none;
		appearance: none;
		background: transparent;
	}
	#yearSlider::-webkit-slider-runnable-track {
		height: 10px;
		border-radius: 5px;
		background: #d8d2c6;
	}
	#yearSlider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 34px;
		height: 34px;
		margin-top: -12px;
		border-radius: 50%;
		background: #fff;
		border: 4px solid var(--acento);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	}
	#yearSlider::-moz-range-track {
		height: 10px;
		border-radius: 5px;
		background: #d8d2c6;
	}
	#yearSlider::-moz-range-thumb {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #fff;
		border: 4px solid var(--acento);
	}
	.paso-info {
		display: flex;
	}
	#layersPanel {
		top: calc(100px + env(safe-area-inset-top, 0px));
		max-width: 62vw;
	}
	.margen-row select {
		min-height: 34px;
	}
}

/* ---- Etiquetas de territorios (nombre + escudo) ---- */
.map-label-wrap {
	background: none;
	border: none;
}
.map-label {
	display: inline-flex;
	flex-direction: column; /* escudo arriba, nombre debajo, centrados en dos filas */
	align-items: center;
	gap: 2px;
	transform: translate(-50%, -50%);
	font-size: 12px;
	font-weight: 600;
	color: #2c2c2c;
	white-space: nowrap;
	pointer-events: none;
	line-height: 1;
	text-align: center;
	text-shadow:
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 4px #fff,
		0 1px 2px rgba(255, 255, 255, 0.9);
}
.map-label .coa-img {
	height: 20px; /* un poco más grande, sobre el nombre */
	width: auto;
	max-width: 34px;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
}

/* ---- Marcadores de batalla ---- */
.battle-wrap {
	background: none;
	border: none;
}
.battle-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	transform: translate(-50%, -100%);
	font-size: 11px;
	font-weight: 600;
	color: #7a1010;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid #b33a3a;
	border-radius: 10px;
	padding: 1px 7px 1px 4px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.battle-label .battle-ico {
	font-size: 12px;
}
.battle-popup p {
	font-size: 12.5px;
	color: #555;
	margin: 6px 0 0;
	max-width: 300px;
}

/* ---- Idioma (topbar): select normal en escritorio, icono en móvil ---- */
.lang-box {
	position: relative;
	display: inline-flex;
}

/* ---- Caja de seguimiento (topbar) ---- */
.follow-box {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
#followInput {
	width: 190px;
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 13px;
}
.mini-btn {
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 6px;
	width: 22px;
	height: 22px;
	cursor: pointer;
	font-size: 11px;
	color: #555;
	line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
	.mini-btn:hover {
		background: var(--acento-velo);
	}
}

/* ---- Panel de capas (izquierda) ---- */
#layersPanel {
	position: absolute;
	top: calc(90px + env(safe-area-inset-top, 0px));
	left: calc(10px + env(safe-area-inset-left, 0px));
	z-index: 1000;
	background: var(--material-denso);
	-webkit-backdrop-filter: var(--desenfoque);
	backdrop-filter: var(--desenfoque);
	border-radius: var(--r-panel);
	box-shadow: var(--sombra-panel);
	padding: 8px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: #333;
}
#layersPanel label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.panel-title {
	font-weight: 700;
	font-size: 12px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* ---- Leyenda del año (derecha) ---- */
#rightPanels {
	position: absolute;
	top: calc(92px + env(safe-area-inset-top, 0px));
	right: calc(10px + env(safe-area-inset-right, 0px));
	z-index: 1000;
	width: 260px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: calc(100vh - 210px);
	max-height: calc(100dvh - 210px); /* alto visible real (barra del navegador incluida) */
}
#legendPanel,
#yearPanel {
	background: var(--material-denso);
	-webkit-backdrop-filter: var(--desenfoque);
	backdrop-filter: var(--desenfoque);
	border-radius: var(--r-panel);
	box-shadow: var(--sombra-panel);
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
#legendPanel {
	max-height: 34vh;
	max-height: 34dvh;
}
#yearPanel {
	max-height: 38vh;
	max-height: 38dvh;
}
.legend-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#legendList {
	overflow-y: auto;
	overscroll-behavior: contain;
	margin-top: 6px;
}
#legendPanel.collapsed #legendList {
	display: none;
}
.legend-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 4px;
	font-size: 12px;
	color: #333;
	border-radius: 5px;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.legend-row:hover {
		background: var(--acento-velo);
	}
}
.legend-row .chip {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	flex: none;
}
.legend-row .lname {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.legend-row .larea {
	color: #888;
	font-size: 11px;
	white-space: nowrap;
}

/* ---- Marcadores de eventos ---- */
.event-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	transform: translate(-50%, -100%);
	font-size: 11px;
	font-weight: 600;
	color: #7a5a00;
	background: rgba(255, 252, 235, 0.92);
	border: 1px solid #c9a227;
	border-radius: 10px;
	padding: 1px 7px 1px 4px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.event-label .event-ico {
	font-size: 11px;
}

/* ---- Territorios menores (Ceuta, Canarias, Azores…) ---- */
.terr-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transform: translate(-50%, -50%);
	font-size: 10.5px;
	font-weight: 600;
	color: #333;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 9px;
	padding: 1px 6px 1px 3px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.terr-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
	border: 1.5px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
	display: inline-block;
}
.terr-popup h3 .terr-dot {
	width: 11px;
	height: 11px;
	vertical-align: -1px;
}

/* ---- Margen de años (panel de capas) ---- */
.margen-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	border-top: 1px solid #e5e5e5;
	padding-top: 6px;
}
.margen-row span {
	font-size: 12px;
	color: #555;
}
.margen-row select {
	font-size: 12px;
	padding: 1px 4px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
}

/* ---- Fuentes plegadas en las fichas ---- */
details.fuentes {
	margin-top: 7px;
	border-top: 1px solid #e3e3e3;
	padding-top: 4px;
}
details.fuentes summary {
	cursor: pointer;
	font-size: 11px;
	color: #888;
	user-select: none;
	list-style: none;
}
details.fuentes summary::before {
	content: '▸ ';
}
details.fuentes[open] summary::before {
	content: '▾ ';
}
details.fuentes summary::-webkit-details-marker {
	display: none;
}
details.fuentes div {
	font-size: 11px;
	color: #777;
	margin-top: 3px;
	line-height: 1.5;
	word-break: break-all;
}
details.fuentes a {
	color: var(--acento);
	text-decoration: none;
}
.terr-popup p {
	font-size: 12.5px;
	color: #555;
	margin: 6px 0 0;
	max-width: 300px;
}
/* con el mundo entero a la vista, solo el punto de color */
#map.terr-mini .terr-label {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}
#map.terr-mini .terr-label .terr-name {
	display: none;
}

/* ---- Extracto de Wikipedia en popups ---- */
.wiki-extract {
	margin-top: 8px;
	border-top: 1px solid #e3e3e3;
	padding-top: 6px;
	max-width: 300px;
}
.wiki-extract img {
	float: left;
	width: 64px;
	margin: 0 8px 4px 0;
	border-radius: 6px;
}
.wiki-extract p {
	font-size: 12px;
	color: #444;
	margin: 0;
}
.wiki-src {
	clear: both;
	font-size: 10px;
	color: #999;
	margin-top: 4px;
}

/* ---- Emblemas (escudo o bandera) ocultables ---- */
#map.hide-coa .coa-img {
	display: none !important;
}
.map-label .coa-img.flag {
	height: 16px; /* las banderas son apaisadas: algo más bajas y anchas */
	max-width: 30px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 2px;
}
.emblema-row select {
	font-size: 12px;
	padding: 1px 4px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
}

/* ---- Barra de tiempo: play y velocidad ---- */
#speedSelect {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 3px 2px;
	font-size: 12px;
	background: #fff;
	height: 30px;
}
#playBtn {
	font-size: 13px;
}

@media (max-width: 900px) {
	#followInput {
		width: 120px;
	}
}

/* ---- Zonas de conflicto (franjas diagonales) ---- */
path.war-zone {
	fill: url(#warstripes);
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	path.war-zone:hover {
		stroke-width: 3;
	}
}
.war-popup p {
	font-size: 12.5px;
	color: #555;
	margin: 6px 0 0;
	max-width: 300px;
}

/* ---- Zona ocupada (retaguardia): sombreado suave, sin franjas ---- */
path.war-occupied {
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	path.war-occupied:hover {
		fill-opacity: 0.22;
	}
}

/* ---- Barra no lineal: marcas clicables ---- */
.slider-wrap {
	flex: 1;
	position: relative;
}
.slider-wrap #yearSlider {
	width: 100%;
	display: block;
}
#timeMarks {
	position: relative;
	height: 32px;
	margin: 0 8px;
}
/* franja de marcas de móvil: oculta en escritorio (allí van bajo el deslizador) */
#timeMarksM {
	display: none;
}
/* móvil: el hueco bajo el deslizador es demasiado estrecho para las pastillas,
   así que ocultamos ese carril y usamos una franja a todo el ancho. Va DESPUÉS
   de la regla base para ganarle (misma especificidad, gana la última). */
@media (max-width: 720px) {
	#timeMarks {
		display: none;
	}
	#timeMarksM {
		display: block;
		position: relative;
		height: 44px;
		margin: 2px 8px 0;
	}
}
.tmark {
	position: absolute;
	transform: translateX(-50%);
	cursor: pointer;
	line-height: 1;
}
.tm-war {
	width: 8px;
	height: 8px;
	background: #c0392b;
	transform: translateX(-50%) rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
	.tm-war:hover {
		background: #7a1010;
		transform: translateX(-50%) rotate(45deg) scale(1.5);
	}
}
.tm-event {
	font-size: 11px;
	color: #c9a227;
}
@media (hover: hover) and (pointer: fine) {
	.tm-event:hover {
		color: #7a5a00;
		transform: translateX(-50%) scale(1.35);
	}
}
.tm-cluster {
	min-width: 17px;
	height: 15px;
	border-radius: 8px;
	color: #fff;
	padding: 0 4px;
	font:
		600 10px/15px var(--font);
	text-align: center;
}
@media (hover: hover) and (pointer: fine) {
	.tm-cluster:hover {
		transform: translateX(-50%) scale(1.2);
	}
}
.tmc-war {
	background: #c0392b;
}
.tmc-event {
	background: #b8860b;
}
/* pastillas grandes y tocables para el modo móvil (⚔️3, ⭐2) */
.tm-mob {
	min-width: 24px;
	height: 18px;
	border-radius: 9px;
	padding: 0 6px;
	font:
		700 11px/18px var(--font);
}
.tm-limit {
	top: 6px;
	font-size: 9px;
	color: #999;
	cursor: default;
	padding-left: 3px;
	border-left: 1px solid #ccc;
	height: 22px;
}
.mark-pop {
	position: absolute;
	bottom: 36px;
	z-index: 1200;
	transform: translateX(-8%);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	padding: 5px 4px;
	min-width: 230px;
	max-width: 320px;
	max-height: 220px;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform-origin: bottom left; /* crece desde la marca que la abre */
	transition:
		opacity 150ms var(--ease-out),
		scale 150ms var(--ease-out);
}
@starting-style {
	.mark-pop {
		opacity: 0;
		scale: 0.96;
	}
}
@media (prefers-reduced-motion: reduce) {
	/* movimiento reducido: solo el fundido, sin escala */
	@starting-style {
		.mark-pop {
			scale: 1;
		}
	}
}
.mp-row {
	display: flex;
	gap: 6px;
	align-items: baseline;
	padding: 3px 8px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 12.5px;
	color: #333;
}
@media (hover: hover) and (pointer: fine) {
	.mp-row:hover {
		background: var(--acento-velo);
	}
}
.mp-row .mp-n {
	flex: 1;
}
.mp-row .mp-y {
	color: #999;
	font-size: 11px;
	white-space: nowrap;
}

/* ---- Panel «Este año» ---- */
#yearPanelBody {
	overflow-y: auto;
	overscroll-behavior: contain;
	margin-top: 4px;
	min-height: 0;
}
#yearPanel.collapsed #yearPanelBody {
	display: none;
}
.yp-sec {
	font-size: 11px;
	font-weight: 700;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin: 6px 0 2px;
}
.yp-row {
	display: flex;
	align-items: baseline;
	gap: 5px;
	padding: 3px 4px;
	font-size: 12.5px;
	color: #333;
	border-radius: 5px;
	cursor: pointer;
	line-height: 1.25;
}
@media (hover: hover) and (pointer: fine) {
	.yp-row:hover {
		background: var(--acento-velo);
	}
}
.yp-row .yp-ico {
	flex: none;
}
.yp-row .yp-name {
	flex: 1;
}
.yp-row .yp-years {
	color: #999;
	font-size: 11px;
	white-space: nowrap;
}
.yp-empty {
	color: #aaa;
	font-size: 12px;
	padding: 2px 4px;
}
@media (max-width: 900px) {
	#rightPanels {
		display: none;
	}
}

/* ---- Pie de fuentes en fichas ---- */
details.fuentes {
	max-width: 300px;
}

/* ---- Pantallas táctiles (va AL FINAL para ganar a las reglas de tamaño de arriba) ----
   campos: en pantallas táctiles, 16 px como mínimo (con menos, iOS amplía la
   página al enfocar y no vuelve). Nunca maximum-scale/user-scalable=no. */
@media (pointer: coarse) {
	#followInput,
	#yearInput,
	#langSelect,
	#speedSelect,
	#margenSelect,
	#emblemaSelect {
		font-size: 16px;
	}
	/* ✕ y ▾ se ven pequeños pero se tocan con un área de ~40 px */
	.mini-btn {
		position: relative;
	}
	.mini-btn::after {
		content: '';
		position: absolute;
		inset: -9px;
	}
}

/* móvil: el buscador absorbe el ancho libre de la barra superior (con letra de
   16 px no cabe a ancho fijo). Va al final para ganar a #followInput y a la
   regla de 900 px, que tienen la misma especificidad. */
@media (max-width: 720px) {
	.follow-box {
		flex: 1;
		min-width: 0;
	}
	#followInput {
		width: 100%;
		min-width: 0;
	}
}

/* móvil: barra superior en dos filas. Arriba, el nombre centrado entre el
   idioma (icono) y la ayuda; debajo, el buscador a todo el ancho. */
@media (max-width: 720px) {
	#topbar {
		display: grid;
		grid-template-columns: 44px 1fr 44px;
		grid-template-areas:
			'lang title help'
			'follow follow follow';
		row-gap: 6px;
		column-gap: 8px;
		padding: 6px 8px;
	}
	#topbar h1 {
		grid-area: title;
		text-align: center;
		font-size: 16px;
	}
	.lang-box {
		grid-area: lang;
		align-items: center;
		justify-self: start;
	}
	#helpBtn {
		grid-area: help;
		justify-self: end;
	}
	.follow-box {
		grid-area: follow;
	}
	#followClear {
		flex: none;
	}
	/* el zoom se hace con los dedos; los botones + − quedarían bajo la barra */
	.leaflet-control-zoom {
		display: none;
	}
	.leaflet-top {
		top: calc(92px + env(safe-area-inset-top, 0px));
	}
}

/* móvil: barra de tiempo en filas. El deslizador ocupa todo el ancho (abarca
   toda la historia) y las marcas van justo debajo, alineadas con él; luego los
   extremos y «Mostrando», y abajo los controles: ▶ ◀ salto ▶ año.
   .timebar-row pasa a display: contents para poder reordenar sus hijos. */
@media (max-width: 720px) {
	#timebar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 7px;
	}
	#timebar .timebar-row:not(.labels) {
		display: contents;
	}
	.slider-wrap {
		order: 1;
		flex: 1 0 100%;
	}
	/* las marcas se reparten sobre el recorrido del pulgar (34 px: 17 por lado) */
	#timeMarksM {
		order: 2;
		flex: 1 0 calc(100% - 34px);
		margin: 0 17px;
	}
	/* extremos y «Mostrando»: fila propia a todo el ancho */
	#timebar .timebar-row.labels {
		order: 3;
		flex: 1 0 100%;
	}
	#playBtn {
		order: 4;
		margin-top: 8px;
	}
	#prevYear {
		order: 5;
		margin-top: 8px;
	}
	.paso-info {
		order: 6;
		flex: 1;
		margin: 8px 0 0;
		gap: 4px;
		white-space: nowrap;
	}
	.paso-info .pi-a {
		display: none; /* las flechas de verdad están al lado */
	}
	#nextYear {
		order: 7;
		margin-top: 8px;
	}
	#yearInput {
		order: 8;
		margin-top: 8px;
	}
}

/* ---- Marca (css/marca.css): Leaflet y controles con los tokens comunes ----
   Va al final para ganar a las reglas de arriba y a leaflet.css. */
body {
	color: var(--tinta);
}
.leaflet-container {
	font-family: var(--font);
}
.leaflet-popup-content-wrapper {
	border-radius: var(--r-panel);
	box-shadow: var(--sombra-panel);
}
.leaflet-popup-content {
	font-size: 13px;
	line-height: 1.45;
}
.leaflet-bar,
.leaflet-control-layers {
	border: 0 !important;
	border-radius: var(--r-control) !important;
	box-shadow: var(--sombra-panel) !important;
	overflow: hidden;
}
.step-btn,
#yearInput,
#followInput,
#langSelect,
#speedSelect,
.margen-row select,
.emblema-row select {
	border-color: var(--linea);
	border-radius: var(--r-control);
	color: var(--tinta);
}
.mini-btn {
	border-color: var(--linea);
	border-radius: 7px;
}
#helpBtn {
	border-color: var(--linea);
	font-weight: 600;
}
.panel-title,
.yp-sec {
	color: var(--tinta-2);
	letter-spacing: 0.04em;
}
#topbar h1 {
	letter-spacing: -0.01em;
}

/* la barra superior por encima de los paneles (el menú de idioma cae sobre «Capas») */
#topbar {
	z-index: 1010;
}

/* ---- Mapa mural (css/marca.css): rótulos de lámina y paneles impresos ---- */
/* nombres de entidades como en un mapa mural: mayúsculas condensadas */
.map-label {
	font-size: 11px;
	font-weight: 700;
	font-stretch: 78%;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tinta);
}
#topbar,
#timebar,
#layersPanel,
#legendPanel,
#yearPanel,
#loading {
	border: 1px solid var(--linea-suave);
}
#topbar h1 {
	font-stretch: 70%;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.panel-title,
.yp-sec {
	font-stretch: 75%;
	letter-spacing: 0.06em;
}
#showingLabel strong,
#shownYear {
	font-stretch: 75%;
	font-weight: 800;
}
.battle-label,
.event-label,
.terr-label {
	border-radius: 2px;
}


/* ficha de la tierra sin atribuir en el mapa de origen (js/mapa.js sinDatos) */
.sin-datos-popup p {
	margin: 4px 0 0;
	max-width: 30ch;
	color: var(--tinta-2);
	line-height: 1.45;
}

/* ---- Ficha en el móvil: hoja modal desde abajo (js/fichas.js abrirHojaFicha) ----
   Los globos de Leaflet no se muestran en el móvil: la ficha ocupa casi toda la
   pantalla sobre el mapa oscurecido y se cierra con la ✕ (44 px), tocando fuera,
   deslizando hacia abajo, con Escape o con «atrás». */
@media (max-width: 720px) {
	.leaflet-popup-pane {
		display: none;
	}
}
.hoja-ficha {
	position: fixed;
	inset: 0;
	z-index: 3000;
}
.hoja-ficha[hidden] {
	display: none;
}
.hoja-velo {
	position: absolute;
	inset: 0;
	background: rgba(20, 32, 43, 0.55);
	opacity: 0;
	transition: opacity 220ms var(--ease-out);
}
.hoja-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 40px);
	min-height: 40dvh;
	background: var(--papel);
	border-top: var(--filete);
	border-radius: var(--r-panel) var(--r-panel) 0 0;
	box-shadow: 0 -8px 30px rgba(20, 32, 43, 0.25);
	transform: translateY(100%);
	transition: transform 260ms var(--ease-out);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.hoja-ficha.abierta .hoja-velo {
	opacity: 1;
}
.hoja-ficha.abierta .hoja-panel {
	transform: translateY(0);
}
.hoja-panel:focus {
	outline: none;
}
.hoja-cab {
	position: relative;
	flex: none;
	height: 40px;
	touch-action: none;
}
.hoja-asa {
	position: absolute;
	top: 10px;
	left: 50%;
	width: 40px;
	height: 4px;
	margin-left: -20px;
	border-radius: 2px;
	background: #c5cfd7;
}
.hoja-cerrar {
	position: absolute;
	top: 2px;
	right: 6px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--r-control);
	background: transparent;
	color: var(--tinta);
	cursor: pointer;
	touch-action: manipulation;
}
.hoja-cerrar:active {
	background: var(--papel-2);
}
.hoja-cuerpo {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 20px 24px;
}
.hoja-cuerpo .territory-popup h3 {
	margin: 0 44px 12px 0;
	font-size: 1.5rem;
	font-weight: 800;
	font-stretch: 75%;
	line-height: 1.1;
}
.hoja-cuerpo .territory-popup table {
	width: 100%;
	font-size: 15px;
}
.hoja-cuerpo .territory-popup td {
	padding: 7px 10px 7px 0;
	border-bottom: 1px solid var(--linea-suave);
}
.hoja-cuerpo .territory-popup td:first-child {
	width: 40%;
	white-space: normal;
	color: var(--tinta-2);
}
.hoja-cuerpo .territory-popup p,
.hoja-cuerpo .wiki-extract p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--tinta);
}
.hoja-cuerpo .wiki-extract {
	max-width: none;
	margin-top: 14px;
	padding-top: 12px;
}
.hoja-cuerpo .wiki-extract img {
	width: 88px;
}
.hoja-cuerpo .wiki-src {
	font-size: 12px;
}
.hoja-cuerpo a {
	display: inline-block;
	min-height: 24px;
}
.hoja-cuerpo details.fuentes summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
}
@media (prefers-reduced-motion: reduce) {
	.hoja-velo,
	.hoja-panel {
		transition: none;
	}
}

/* aviso al pie de cada ficha (js/fichas.js avisoDatoHtml) */
.aviso-dato {
	clear: both;
	margin: 8px 0 0;
	padding-top: 6px;
	border-top: 1px solid var(--linea-suave);
	font-size: 11px;
	line-height: 1.4;
	color: var(--tinta-2);
}
.hoja-cuerpo .aviso-dato {
	margin-top: 16px;
	padding-top: 10px;
	font-size: 13px;
}

/* la reseña del país actual cuando se consulta una época anterior (CT-02) */
.resena-hoy {
	margin: 0 0 4px !important;
	font-weight: 700;
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tinta-2) !important;
}
/* filas activables con teclado: foco visible */
.legend-row:focus-visible,
.yp-row:focus-visible,
#layersPanel .panel-title:focus-visible {
	outline: 2px solid var(--oceano);
	outline-offset: 1px;
}

/* ---- Rótulos que no se tapan (js/rotulos.js) ----
   Cada marca: un punto en su coordenada y su rótulo donde haya hueco (por defecto,
   encima). Las que no caben, o están en el mismo sitio, van en un círculo con número. */
.rot {
	position: absolute;
	left: 0;
	top: 0;
}
.rot-pt {
	position: absolute;
	left: 0;
	top: 0;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--rojo, #b8291c);
	border: 1.5px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
	cursor: pointer;
}
.rot-e .rot-pt,
.rot-i .rot-pt {
	background: #c9a227;
}
.rot-t .rot-pt {
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
}
.rot > .battle-label,
.rot > .event-label,
.rot > .terr-label {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, calc(-100% - 5px));
}
.rot.en-abanico > .battle-label,
.rot.en-abanico > .event-label,
.rot.en-abanico > .terr-label {
	transform: translate(0, -50%);
}
.rot-hilo {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	height: 1px;
	background: rgba(20, 32, 43, 0.55);
	transform-origin: 0 50%;
	pointer-events: none;
}
.rot.sin-rotulo > .battle-label,
.rot.sin-rotulo > .event-label,
.rot.sin-rotulo > .terr-label,
#map.terr-mini .rot-t > .terr-label {
	display: none;
}
.rot.vuelo {
	transition:
		transform 0.38s var(--ease-out),
		opacity 0.25s ease;
}
.grupo-marcas {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s var(--ease-out);
}
.grupo-marcas::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: #fff;
}
.grupo-marcas span {
	position: relative;
	font: 800 13px/1 var(--font);
	font-variant-numeric: tabular-nums;
	color: var(--tinta, #14202b);
}
.leaflet-marker-icon:hover .grupo-marcas,
.leaflet-marker-icon:focus-visible .grupo-marcas {
	transform: translate(-50%, -50%) scale(1.08);
}
.leaflet-marker-icon:focus-visible .grupo-marcas {
	outline: 3px solid var(--oceano, #1b4a73);
	outline-offset: 2px;
}
.grupo-abierto .grupo-marcas {
	opacity: 0.35;
}
@media (prefers-reduced-motion: reduce) {
	.rot.vuelo,
	.grupo-marcas {
		transition: none;
	}
}