/* =============================================================================
   Cronograma Terranza — Estilos
   ============================================================================= */

.ctd-wrap {
	--ctd-text:     #1a1a1a;
	--ctd-muted:    #666;
	--ctd-border:   rgba(0, 0, 0, 0.1);
	--ctd-card-bg:  #fff;
	--ctd-head-col: #6D6F70;
	--ctd-badge-bg: #EEEEEE;
}

/* ---- Wrapper ---- */
.ctd-wrap {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ctd-text);
	width: 100%;
	padding: 2rem 0;
	box-sizing: border-box;
}

.ctd-wrap *,
.ctd-wrap *::before,
.ctd-wrap *::after {
	box-sizing: inherit;
}

/* ---- Título (solo si se pasa atributo titulo) ---- */
.ctd-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--ctd-head-col);
	margin: 0 0 1.5rem;
	line-height: 1.3;
}

/* ---- Timeline con scroll horizontal en desktop ---- */
.ctd-timeline {
	--ctd-cols: 4;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ctd-inner {
	min-width: calc(var(--ctd-cols) * 220px);
}

/* ---- Track numérico ---- */
.ctd-track {
	display: grid;
	grid-template-columns: repeat(var(--ctd-cols), 1fr);
	position: relative;
	margin-bottom: 1rem;
}

.ctd-track::before {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(100% / var(--ctd-cols) / 2);
	right: calc(100% / var(--ctd-cols) / 2);
	height: 6px;
	background: linear-gradient(
		to right,
		#191919 var(--ctd-past-pct, 0%),
		var(--ctd-border) var(--ctd-past-pct, 0%)
	);
	transform: translateY(-50%);
	border-radius: 3px;
}

.ctd-track__item {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.4rem 0;
	position: relative;
	z-index: 1;
}

.ctd-track__num {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--ctd-border);
	color: #999;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.15rem 0.55rem;
	line-height: 1.6;
	user-select: none;
}

/* Paso en el pasado: relleno sólido */
.ctd-track__num--past {
	background: var(--ctd-head-col);
	color: #fff;
	border-color: var(--ctd-head-col);
}

/* ---- Grid de cards ---- */
.ctd-cards {
	display: grid;
	grid-template-columns: repeat(var(--ctd-cols), 1fr);
	gap: 1rem;
	align-items: start;
}

/* ---- Card individual ---- */
.ctd-card {
	border: 1px solid var(--ctd-border);
	border-radius: 4px;
	padding: 1.1rem 1rem;
	background: var(--ctd-card-bg);
	display: flex;
	flex-direction: column;
}

/* ---- Número de paso dentro de la card (solo visible en tablet/móvil) ---- */
.ctd-card__step {
	display: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: #999;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.15rem 0.55rem;
	line-height: 1.6;
	margin-bottom: 0.75rem;
	user-select: none;
}

.ctd-card__step--past {
	background: #191919;
	color: #fff;
	border-color: #191919;
}

/* ---- Bloque de badges de fecha ---- */
.ctd-card__dates {
	margin-bottom: 0.85rem;
}

.ctd-card__date-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--ctd-badge-bg);
	border: 1px solid var(--ctd-border);
	border-radius: 3px;
	padding: 0.4rem 0.6rem;
	margin-bottom: 0.3rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

/* Solo una fecha (sin etiqueta de grupo): alinear a la derecha */
.ctd-card__date-row--solo {
	justify-content: flex-end;
}

/* Etiqueta de desarrollo/etapa */
.ctd-etapa {
	flex: 1 1 auto;
	white-space: normal;
	color: var(--ctd-head-col);
	margin-right: 8px;
}

/* Fecha: siempre "Mes Año", no se parte */
.ctd-card__date-row strong {
	white-space: nowrap;
	flex-shrink: 0;
	font-weight: 600;
	color: var(--ctd-text);
}

/* ---- Encabezado de card: icono + nombre en la misma línea ---- */
.ctd-card__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0.5rem;
}

/* ---- Icono ---- */
.ctd-card__icon {
	color: var(--ctd-head-col);
	line-height: 1;
	flex-shrink: 0;
}

.ctd-card__icon svg {
	display: block;
}

/* ---- Nombre de la fase ---- */
.ctd-card__name {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--ctd-head-col);
	margin: 0;
	line-height: 1.3;
}

/* ---- Descripción ---- */
.ctd-card__desc {
	font-size: 14px;
	font-weight: 400;
	color: var(--ctd-muted);
	line-height: 1.65;
	margin: 0;
	flex-grow: 1;
}

/* ---- Aviso legal ---- */
.ctd-disclaimer {
	font-size: 0.75rem;
	font-style: italic;
	color: #999;
	text-align: center;
	margin-top: 2rem;
	margin-bottom: 0;
	line-height: 1.7;
}

.ctd-disclaimer a {
	color: var(--ctd-head-col);
	text-decoration: underline;
}

/* ---- Sin datos ---- */
.ctd-no-data {
	text-align: center;
	color: #999;
	font-style: italic;
	padding: 2rem 0;
	margin: 0;
}

/* =============================================================================
   Responsivo
   ============================================================================= */

@media (min-width: 640px) and (max-width: 1023px) {
	.ctd-timeline {
		overflow-x: visible;
	}

	.ctd-inner {
		min-width: 0;
	}

	.ctd-track {
		display: none;
	}

	.ctd-cards {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.ctd-card__step {
		display: inline-block;
	}
}

@media (max-width: 639px) {
	.ctd-wrap {
		padding: 1.25rem 0;
	}

	.ctd-timeline {
		overflow-x: visible;
	}

	.ctd-inner {
		min-width: 0;
	}

	.ctd-track {
		display: none;
	}

	.ctd-cards {
		grid-template-columns: 1fr !important;
	}

	.ctd-card__dates {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-bottom: 0.75rem;
	}

	.ctd-card__date-row {
		margin-bottom: 0;
	}

	.ctd-card__step {
		display: inline-block;
	}
}