/* Color de fondo para las zonas polares fuera del límite Mercator (~85°N/S)
   que no tienen teselas — iguala el azul del océano de OpenStreetMap */
.leaflet-container {
	background: #a8d5e2;
}


/* ── Navegador de años ───────────────────────────────────── */
#year-nav {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	overflow-x: auto;
	background: #111118;
	border-top: 1px solid #2a2a3e;
	padding: 4px 8px;
	gap: 4px;
	scrollbar-width: none;
}

#year-nav::-webkit-scrollbar {
	display: none;
}

.year-btn {
	background: #2a2a3e;
	color: #888;
	border: none;
	border-radius: 3px;
	padding: 4px 10px;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.year-btn:hover {
	background: #3a3a5e;
	color: #fff;
}

.year-btn.active {
	background: #04AA6D;
	color: #fff;
}

#play-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 30;
	background: #ff6b35;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 22px;
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

#play-btn:hover {
	background: #e85d28;
}

#play-hint-arrow {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(50% - 3em - 8px); /* encima del botón play */
	z-index: 30;
	color: #ff6b35;
	font-size: 2.8em;
	line-height: 1;
	pointer-events: none;
	animation: play-hint-blink 0.75s ease-in-out infinite;
	text-shadow: 0 0 12px #ff6b35, 0 0 28px rgba(255, 107, 53, 0.6);
	filter: drop-shadow(0 0 6px #ff6b35);
}

@keyframes play-hint-blink {
	0%   { opacity: 1;   transform: translateX(-50%) translateY(0);    }
	40%  { opacity: 0.1; transform: translateX(-50%) translateY(-8px); }
	100% { opacity: 1;   transform: translateX(-50%) translateY(0);    }
}

/* ── Wrapper de la línea de tiempo (no scrollea, contiene el cursor) ── */
#timeline-wrap {
	flex: 0 0 200px;
	position: relative;        /* referencia para el cursor absoluto */
	border-top: 3px solid #04AA6D;
	overflow: hidden;          /* recorta sin scroll */
}

/* ── Zona scrollable ─────────────────────────────────────────── */
#timeline {
	width: 100%;
	height: 100%;
	background: #1a1a2e;
	overflow-x: auto;
	overflow-y: hidden;
}

/* Flecha/cursor central: vive en #timeline-wrap, no scrollea */
#tl-cursor {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	transform: translateX(-50%);
	width: 2px;
	background: rgba(255, 107, 53, 0.8);
	pointer-events: none;
	z-index: 20;
}

#tl-cursor::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 12px solid #ff6b35;
}

/* Espaciador inicio/fin para que el primer y último año lleguen al centro */
.tl-spacer {
	min-width: 50vw;
	flex-shrink: 0;
}

#timeline-inner {
	display: flex;
	height: 100%;
}

/* ── Columna de mes ───────────────────────────────────────── */
.month-col {
	display: flex;
	flex-direction: column;
	min-width: 110px;
	width: 110px;
	height: 100%;
	border-right: 1px solid #2a2a3e;
	flex-shrink: 0;
}

.month-col.january {
	border-left: 2px solid #04AA6D;
}

.month-col-body {
	flex: 1 1 auto;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 5px 3px;
	scrollbar-width: thin;
	scrollbar-color: #444 transparent;
}

/* Etiqueta del año — solo visible en enero */
.month-col-year {
	flex: 0 0 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #04AA6D;
	background: #111118;
	user-select: none;
	white-space: nowrap;
}

/* En columnas que no son enero, la celda de año ocupa 0 espacio */
.month-col:not(.january) > .month-col-year {
	flex: 0 0 0;
	overflow: hidden;
}

/* Abreviatura del mes */
.month-col-header {
	flex: 0 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #555;
	border-top: 1px solid #2a2a3e;
	background: #111118;
	user-select: none;
}

.month-col.january > .month-col-header {
	color: #04AA6D;
}

.month-col.decade > .month-col-year {
	color: #7fffcf;
}

.month-col.current-month > .month-col-header {
	color: #ff6b35;
	font-weight: bold;
	border-top-color: #ff6b35;
}

/* ── Tooltip de evento en el mapa ────────────────────────── */
.map-event-tooltip {
	background: rgba(20, 20, 20, 0.88);
	border: none;
	border-radius: 4px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 6px 10px;
	white-space: normal;
	min-width: 250px;
	max-width: min(700px, calc(100vw - 32px));
	text-align: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}


/* triángulo del tooltip — hereda el color del borde Leaflet, lo sobreescribimos */
.map-event-tooltip::before {
	border-top-color: rgba(20, 20, 20, 0.88) !important;
}

/* ── Contador de viogenizados ────────────────────────────── */
.contador-viogen-wrap {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

#contador-viogen {
	background: rgba(10, 10, 20, 0.88) !important;
	color: #ff6b35 !important;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	font-weight: bold;
	padding: 5px 12px;
	border-radius: 4px;
	border: 2px solid #ff6b35 !important;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* ── Filtro de país ──────────────────────────────────────── */
.filtro-pais-wrap {
	background: rgba(10, 10, 20, 0.85);
	border-radius: 4px;
	padding: 5px 8px;
	border: 1px solid #2a2a3e;
}

#filtro-pais {
	background: transparent;
	color: #ccc;
	border: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	cursor: pointer;
	outline: none;
}

#filtro-pais:hover {
	color: #fff;
}

.filtro-pais-label {
	color: #888;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin-bottom: 3px;
}

#filtro-pais option {
	background: #1a1a2e;
	color: #ccc;
}

/* ── Evento dentro de la columna ──────────────────────────── */
.tl-event {
	background: #04AA6D;
	color: #fff;
	font-size: 10px;
	line-height: 1.3;
	padding: 3px 5px;
	border-radius: 3px;
	cursor: pointer;
	word-break: break-word;
	flex-shrink: 0;
}

.tl-event:hover {
	filter: brightness(1.2);
}