/* Melilla Cultura – Agenda de Eventos: estilos públicos
   Paleta: azul marino #16233D · turquesa #3FC8B4 · terracota #B5763F · crema #F7F3EC */

.mc-listado {
	--mc-granate: #871648;
	--mc-granate-oscuro: #591335;
	--mc-granate-claro: #F7E9EF;
	--mc-gris-transicion: #FAF8F7;
	--mc-blanco: #FFFFFF;
	--mc-borde: #ECE9E7;
	--mc-texto: #2A2A28;
	--mc-texto-suave: #6B6862;
	max-width: 1120px;
	margin: 0 auto;
}

/* Filtros */
.mc-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.mc-filtro {
	font-family: inherit;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 20px;
	border: none;
	background: #F3F1EF;
	color: var(--mc-texto-suave);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.mc-filtro:hover {
	background: #E9E5E2;
}

.mc-filtro-activo,
.mc-filtro-activo:hover {
	background: var(--mc-granate);
	color: var(--mc-blanco);
}

/* Grid de tarjetas */
.mc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

/* Si el filtro deja un único resultado, que ocupe todo el ancho en vez de
   quedarse encajado en la primera columna de una rejilla de 3. Forzado con
   !important porque algún estilo de Avada para bloques de texto puede estar
   limitando el ancho de enlaces/párrafos sueltos por su cuenta. */
.mc-grid > .mc-tarjeta:only-child {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: none !important;
	justify-self: stretch !important;
}

@media (min-width: 640px) {
	.mc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.mc-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mc-sin-eventos {
	grid-column: 1 / -1;
	color: var(--mc-texto-suave);
	padding: 32px 0;
	text-align: center;
}

/* Tarjeta de agenda */
.mc-tarjeta {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #FFFFFF;
	border: 1px solid var(--mc-borde);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	/* Sin esto, un título largo puede forzar a la tarjeta a crecer más allá
	   del ancho de su columna del grid — es lo que hacía que unas tarjetas
	   salieran más anchas que otras según el texto del título. */
	width: 100%;
	min-width: 0;
}

.mc-tarjeta:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(22, 35, 61, 0.08);
}

.mc-tarjeta-imagen {
	position: relative;
	height: 160px;
	background-color: #F3F1EF;
	background-size: cover;
	background-position: center;
}

.mc-badge-fecha {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--mc-blanco);
	color: var(--mc-texto);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid var(--mc-borde);
}

.mc-tarjeta-cuerpo {
	padding: 16px;
}

.mc-etiqueta {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--mc-granate);
	border: 1px solid var(--mc-granate);
	padding: 3px 9px;
	border-radius: 10px;
	margin-bottom: 10px;
}

.mc-tarjeta-titulo {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mc-texto);
	margin: 0 0 10px;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.mc-tarjeta-enlace {
	font-size: 13px;
	color: var(--mc-granate-oscuro);
}

/* Histórico: línea de tiempo horizontal con scroll, deliberadamente distinta del grid de tarjetas de la agenda */
/* Carrusel del histórico: flechas laterales */
.mc-carrusel {
	position: relative;
}

.mc-carrusel-flecha {
	position: absolute;
	/* Centrada respecto a la franja de imágenes: el contenedor tiene 24px de
	   padding superior y cada tarjeta 22px hasta la imagen, así que la mitad
	   de la imagen cae en 24 + 22 + (altura/2). Se calcula con la variable
	   --mc-alto-imagen para no repetir el número en cada punto de quiebre. */
	--mc-alto-imagen: 130px;
	top: calc( 46px + var( --mc-alto-imagen ) / 2 );
	transform: translateY(-50%);
	z-index: 5;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1px solid var(--mc-borde, #ECE9E7);
	box-shadow: 0 2px 10px rgba(42, 42, 40, 0.08);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 16px;
	color: var(--mc-texto, #2A2A28);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* El símbolo de la flecha es un carácter de texto: sin esto, la altura de
   línea y el espaciado que hereda de Avada lo descuadran dentro del círculo. */
.mc-carrusel-flecha .mc-flecha {
	display: block;
	line-height: 1;
	font-style: normal;
	transform: translateY(-1px);
}

.mc-carrusel-flecha:hover {
	background: var(--mc-granate, #871648);
	border-color: var(--mc-granate, #871648);
	color: #FFFFFF;
}

.mc-carrusel-flecha[hidden] {
	display: none;
}

.mc-carrusel-prev {
	left: -14px;
}

.mc-carrusel-next {
	right: -14px;
}

@media (max-width: 560px) {
	.mc-carrusel-flecha {
		--mc-alto-imagen: 100px;
	}

	.mc-carrusel-prev {
		left: 2px;
	}

	.mc-carrusel-next {
		right: 2px;
	}
}

.mc-grid-historico {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 24px 4px 20px;
	-webkit-overflow-scrolling: touch;
	/* Línea continua dibujada como fondo: recorre todo el ancho sin cortarse
	   entre tarjetas, y se desplaza junto con ellas al hacer scroll. Se sitúa
	   a 30px del borde superior, que es donde queda el centro de los puntos. */
	background-image: linear-gradient( var(--mc-borde, #ECE9E7), var(--mc-borde, #ECE9E7) );
	background-size: 100% 2px;
	background-position: 0 30px;
	background-repeat: no-repeat;
}

.mc-grid-historico::-webkit-scrollbar {
	height: 5px;
}

.mc-grid-historico::-webkit-scrollbar-thumb {
	background: var(--mc-borde, #ECE9E7);
	border-radius: 3px;
}

.mc-grid-historico::-webkit-scrollbar-track {
	background: transparent;
}

.mc-linea-item {
	position: relative;
	flex: 0 0 200px;
	scroll-snap-align: start;
	display: block;
	text-decoration: none;
	padding-top: 22px;
}

.mc-linea-punto {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 2px solid var(--mc-granate, #871648);
	transition: background 0.2s ease;
}

.mc-linea-item:hover .mc-linea-punto {
	background: var(--mc-granate, #871648);
}

.mc-linea-imagen {
	width: 100%;
	height: 130px;
	border-radius: 10px;
	background-color: #F3F1EF;
	background-size: cover;
	background-position: center;
	margin-bottom: 12px;
}

.mc-linea-fecha {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--mc-granate, #871648);
	margin-bottom: 4px;
}

.mc-linea-titulo {
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-texto, #2A2A28);
	margin: 0 0 4px;
	line-height: 1.3;
}

.mc-linea-meta {
	font-size: 11px;
	color: var(--mc-texto-suave, #6B6862);
}

@media (max-width: 560px) {
	.mc-linea-item {
		flex: 0 0 160px;
	}

	.mc-linea-imagen {
		height: 100px;
	}
}

/* Ficha de evento individual */
.mc-ficha-evento {
	max-width: 960px;
	margin: 32px auto 0;
	font-size: 15px;
	color: var(--mc-texto, #2A2A28);
}

/* Cabecera: galería a la izquierda, título/ubicación/acciones a la derecha */
.mc-ficha-cabecera {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 36px;
	align-items: start;
}

.mc-ficha-imagen {
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #F3F1EF;
}

.mc-ficha-imagen-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mc-flecha {
	font-style: normal;
}

/* Bloque de título/ubicación/acciones */
.mc-ficha-acciones-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}

.mc-ficha-acciones-top .mc-compartir {
	margin: 0;
	padding: 0;
	border: none;
}

.mc-favorito-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mc-favorito-contador {
	font-size: 12px;
	color: var(--mc-texto-suave, #6B6862);
	min-width: 14px;
	text-align: center;
}

.mc-favorito {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid #ECE9E7;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #C9C5C1;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.mc-favorito.mc-favorito-activo {
	color: #871648;
	border-color: #871648;
}

.mc-ficha-titulo {
	font-size: 30px;
	font-weight: 600;
	color: var(--mc-texto, #2A2A28);
	margin: 0 0 12px;
	line-height: 1.25;
}

.mc-ficha-ubicacion-corta {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--mc-texto-suave, #6B6862);
	font-size: 14px;
	margin: 0 0 22px;
}

.mc-ficha-cta {
	margin-top: 4px;
}

.mc-estado-finalizado {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 16px;
	background: #F3F1EF;
	color: var(--mc-texto-suave, #6B6862);
}

/* Secciones: Información / Horarios / Ubicación */
.mc-ficha-secciones {
	margin-top: 44px;
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.mc-ficha-seccion-titulo {
	font-size: 20px;
	font-weight: 600;
	color: var(--mc-texto, #2A2A28);
	margin: 0 0 14px;
	padding-bottom: 14px;
	position: relative;
	display: inline-block;
}

.mc-ficha-seccion-titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 2px;
	background: #871648;
}

.mc-ficha-seccion-cuerpo {
	color: #4A4844;
	line-height: 1.7;
}

.mc-ficha-fecha {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--mc-texto, #2A2A28);
	margin: 0 0 10px;
}

.mc-ficha-fechas-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

.mc-ficha-fechas-lista li {
	background: #F7E9EF;
	color: #591335;
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 14px;
}

.mc-ficha-precio {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #4A4844;
	margin: 0 0 4px;
}

.mc-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* Mapa de ubicación */
.mc-ficha-mapa {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
}

.mc-ficha-mapa iframe {
	width: 100%;
	height: 280px;
	border: 0;
	display: block;
}

.mc-mapa-boton {
	position: absolute;
	left: 18px;
	bottom: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #2A2A28;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 13px;
	padding: 10px 18px;
	border-radius: 24px;
	transition: background 0.2s ease;
}

.mc-mapa-boton:hover {
	background: #871648;
}

@media (max-width: 720px) {
	.mc-ficha-cabecera {
		grid-template-columns: 1fr;
	}
}

.mc-boton {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 24px;
	border: 1px solid #871648;
	color: #871648;
	background: transparent;
	transition: background 0.2s ease, color 0.2s ease;
}

.mc-boton:hover {
	background: #871648;
	color: #FFFFFF;
}

.mc-boton-primario {
	background: #871648;
	border-color: #871648;
	color: #FFFFFF;
}

.mc-boton-primario:hover {
	background: #591335;
	border-color: #591335;
	color: #FFFFFF;
}

.mc-asi-fue h3 {
	color: var(--mc-texto, #2A2A28);
	margin-bottom: 14px;
}

.mc-galeria-fotos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}

.mc-galeria-fotos img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.mc-sin-fotos {
	color: var(--mc-texto-suave, #5B5850);
}

.mc-video-resumen {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	margin-bottom: 20px;
	border-radius: 12px;
	overflow: hidden;
}

.mc-video-resumen iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Compartir */
.mc-compartir {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--mc-borde, #E4E0D8);
}

.mc-compartir-etiqueta {
	font-size: 12px;
	color: var(--mc-texto-suave, #5B5850);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.mc-compartir-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #F3F1EF;
	color: #2A2A28;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.mc-compartir-link:hover {
	background: #871648;
	color: #FFFFFF;
}

/* Lightbox de la galería, con navegación entre fotos */
.mc-lightbox-fondo {
	position: fixed;
	inset: 0;
	background: rgba(15, 15, 15, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 24px;
}

.mc-lightbox-fondo img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 8px;
}

.mc-lightbox-cerrar {
	position: absolute;
	top: 20px;
	right: 24px;
	background: none;
	border: none;
	color: #FFFFFF;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

.mc-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.15);
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 20px;
	transition: background 0.2s ease;
}

.mc-lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.3);
}

.mc-lightbox-prev {
	left: 20px;
}

.mc-lightbox-next {
	right: 20px;
}

.mc-lightbox-contador {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: #FFFFFF;
	font-size: 13px;
	background: rgba(0, 0, 0, 0.45);
	padding: 4px 12px;
	border-radius: 12px;
}

/* Admin: badges de estado */
.mc-estado-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 12px;
}

.mc-estado-vigente {
	background: #E1F5EE;
	color: #0F6E56;
}

.mc-estado-pasado {
	background: #F1EDE3;
	color: #5B5850;
}