/* ============================================================
   MC Cronograma — Maniac Creativo
   La tipografía se hereda del tema/Elementor por defecto.
   Solo se fijan colores/valores estructurales, todos
   sobreescribibles desde los controles del widget.
   ============================================================ */

.mc-crono {
	--mc-reveal-duration: 600ms;
	--mc-reveal-distance: 14px;
	--mc-divider-color: rgba(255, 255, 255, 0.1);
	--mc-divider-width: 1px;
	--mc-tabs-line-color: rgba(255, 255, 255, 0.1);
	--mc-time-w: 140px;
	--mc-row-pad: 48px;
	--mc-avatar-size: 48px;
	--mc-avatar-overlap: -10px;
	--mc-break-bg: rgba(255, 255, 255, 0.04);
	--mc-break-stripe: rgba(255, 255, 255, 0.05);
	--mc-break-pad: 56px;
	width: 100%;
	max-width: none;
	/* Evita que el contenido interno pueda desbordar el contenedor.
	   `clip` (a diferencia de `hidden`) NO rompe position:sticky. */
	overflow-x: clip;
}

.mc-crono,
.mc-crono *,
.mc-crono *::before,
.mc-crono *::after {
	box-sizing: border-box;
}

/* Modo "ancho completo" (full-bleed): rompe el contenedor en caja de
   Elementor y ocupa todo el viewport. Requiere que ningún ancestro
   tenga overflow:hidden. */
.mc-crono--fullbleed {
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: var(--mc-fullbleed-pad, 40px);
	padding-right: var(--mc-fullbleed-pad, 40px);
}

.mc-crono__grid,
.mc-crono__right,
.mc-crono__panels {
	width: 100%;
	max-width: none;
}

.mc-crono__grid {
	display: block;
}

.mc-crono--has-left .mc-crono__grid,
.mc-crono__grid.mc-crono--is-grid {
	display: grid;
	/* minmax(0, …) permite que las columnas encojan por debajo del
	   min-content de su texto: sin esto la rejilla desborda. */
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.mc-crono__left,
.mc-crono__right {
	min-width: 0;
	max-width: 100%;
}

.mc-crono__heading,
.mc-crono__desc,
.mc-crono__ev-title,
.mc-crono__ev-subtitle,
.mc-crono__ev-desc,
.mc-crono__break-label {
	overflow-wrap: break-word;
}

/* ---------- Columna izquierda ---------- */
.mc-crono__left--sticky {
	position: sticky;
	top: 96px;
}

.mc-crono__badge {
	display: inline-block;
	background-color: #c9bcf2;
	color: #0a0a0a;
	padding: 6px 18px;
	border-radius: 999px;
	font-size: 0.875em;
	margin-bottom: 28px;
}

.mc-crono__heading {
	margin: 0 0 20px;
}

.mc-crono__desc {
	opacity: 0.75;
	margin: 0 0 36px;
}

.mc-crono__btn,
.mc-crono__btn:hover,
.mc-crono__btn:focus {
	text-decoration: none !important;
	box-shadow: none;
}

.mc-crono__btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background-color: #ffffff;
	color: #0a0a0a;
	border-radius: var(--mc-btn-radius, 999px);
	padding: 8px 28px 8px 8px;
	-webkit-backdrop-filter: blur(var(--mc-btn-blur, 0px));
	backdrop-filter: blur(var(--mc-btn-blur, 0px));
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.mc-crono__btn-img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	display: block;
}

.mc-crono__btn-icon img {
	width: 55%;
	height: 55%;
	object-fit: contain;
	display: block;
}

.mc-crono--hover .mc-crono__btn:hover {
	transform: scale(1.03);
}

.mc-crono__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #0a0a0a;
	color: #ffffff;
	flex-shrink: 0;
}

.mc-crono__btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mc-crono__btn-text {
	color: inherit;
}

/* ---------- Pestañas ---------- */
.mc-crono__tabs {
	position: relative;
	display: flex;
	border-bottom: 1px solid var(--mc-tabs-line-color);
	margin-bottom: 8px;
	/* Con muchas pestañas (días) se puede desplazar en horizontal
	   en lugar de desbordar el layout. */
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.mc-crono__tabs::-webkit-scrollbar {
	display: none;
}

.mc-crono--no-tabline .mc-crono__tabs {
	border-bottom-color: transparent;
}

.mc-crono__tab,
.mc-crono__tab:hover,
.mc-crono__tab:focus,
.mc-crono__tab:active {
	/* Resetea cualquier estilo de <button> que aplique el tema
	   (fondos, pastillas, sombras). Los controles del widget
	   escriben sobre las variables, que sí atraviesan el !important. */
	background: var(--mc-tab-bg, transparent) !important;
	border: none !important;
	border-radius: var(--mc-tab-radius, 0) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: none;
	outline: none;
}

.mc-crono__tab:hover {
	background: var(--mc-tab-bg-hover, var(--mc-tab-bg, transparent)) !important;
}

.mc-crono__tab.is-active,
.mc-crono__tab.is-active:hover,
.mc-crono__tab.is-active:focus {
	background: var(--mc-tab-bg-active, var(--mc-tab-bg, transparent)) !important;
}

.mc-crono__tab:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: -1px;
}

.mc-crono__tab {
	flex: 1 1 0;
	/* min-width evita que el texto se aplaste; si no caben, el
	   contenedor de pestañas hace scroll horizontal. */
	min-width: max-content;
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 16px 8px;
	font: inherit;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	transition: color 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mc-crono__tab.is-active {
	color: #ffffff;
}

.mc-crono__indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 0;
	background-color: #ffffff;
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform, width;
	pointer-events: none;
}

/* ---------- Paneles ---------- */
.mc-crono__panel {
	display: none;
}

.mc-crono__panel.is-active {
	display: block;
}

.mc-crono__panel.is-entering .mc-crono__item {
	animation: mcCronoPanelIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mc-crono--stagger .mc-crono__panel.is-entering .mc-crono__item {
	animation-delay: calc((var(--mc-i, 1) - 1) * 60ms);
}

@keyframes mcCronoPanelIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Filas de evento ---------- */
.mc-crono__item--event {
	display: grid;
	grid-template-columns: minmax(80px, var(--mc-time-w)) minmax(0, 1fr);
	gap: 24px;
	padding: var(--mc-row-pad) 0;
	border-top: var(--mc-divider-width) solid var(--mc-divider-color);
	transition: background-color 0.3s ease;
}

.mc-crono__panel .mc-crono__item:first-child {
	border-top: none;
}

.mc-crono--no-divider .mc-crono__item--event {
	border-top: none;
}

.mc-crono__time {
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1.3;
}

.mc-crono__time-start {
	color: #ffffff;
}

.mc-crono__time-end {
	color: rgba(255, 255, 255, 0.5);
}

.mc-crono__body {
	min-width: 0;
}

.mc-crono__ev-title {
	margin: 0 0 18px;
	font-size: 2em;
	font-weight: inherit;
	line-height: 1.15;
}

.mc-crono__ev-subtitle {
	margin: 0 0 6px;
	color: #ffffff;
}

.mc-crono__ev-desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
}

/* ---------- Avatares ---------- */
.mc-crono__speakers {
	display: flex;
	margin-top: 28px;
}

.mc-crono__speaker {
	width: var(--mc-avatar-size);
	height: var(--mc-avatar-size);
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #0a0a0a;
}

.mc-crono__speaker + .mc-crono__speaker {
	margin-left: var(--mc-avatar-overlap);
}

/* ---------- Descanso ---------- */
.mc-crono__item--break {
	padding: var(--mc-break-pad) 32px;
	margin: 8px 0;
	background-color: var(--mc-break-bg);
	background-image: repeating-linear-gradient(
		-45deg,
		var(--mc-break-stripe) 0,
		var(--mc-break-stripe) 1px,
		transparent 1px,
		transparent 10px
	);
}

.mc-crono--no-stripes .mc-crono__item--break {
	background-image: none;
}

.mc-crono__break-label {
	color: #ffffff;
	font-size: 1.5em;
}

.mc-crono__empty {
	padding: 48px 0;
	opacity: 0.5;
}

/* ---------- Animación de aparición (scroll) ---------- */
.mc-crono--reveal .mc-crono-reveal {
	opacity: 0;
	transform: translateY(var(--mc-reveal-distance));
	transition:
		opacity var(--mc-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--mc-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.mc-crono--reveal.mc-crono--stagger .mc-crono-reveal {
	transition-delay: calc((var(--mc-i, 1) - 1) * 80ms);
}

.mc-crono--reveal .mc-crono-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Sin JS o con reduce motion: nunca dejar el contenido oculto */
.mc-crono--motion-off .mc-crono-reveal,
.no-js .mc-crono--reveal .mc-crono-reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.mc-crono--motion-off .mc-crono__indicator {
	transition: none;
}

.mc-crono--motion-off .mc-crono__panel.is-entering .mc-crono__item {
	animation: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.mc-crono--has-left .mc-crono__grid,
	.mc-crono__grid.mc-crono--is-grid {
		grid-template-columns: 1fr !important;
		gap: 48px;
	}

	.mc-crono__left--sticky {
		position: static;
	}
}

@media (max-width: 767px) {
	.mc-crono--fullbleed {
		padding-left: var(--mc-fullbleed-pad-m, 16px);
		padding-right: var(--mc-fullbleed-pad-m, 16px);
	}

	.mc-crono__item--event {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.mc-crono__time {
		flex-direction: row;
		gap: 10px;
	}

	.mc-crono__ev-title {
		font-size: 1.5em;
	}

	.mc-crono__item--break {
		padding: calc(var(--mc-break-pad) * 0.6) 20px;
	}
}