/*
 * Active cards component
 * Card grid + paginated popup usado por /estudios/?view=memoria-activa-cards,
 * creatividad-cards, lectura-rapida-cards. Reglas extraidas de los antiguos
 * inline <style> de cada template y unificadas tras el slug en `data-slug`.
 */

[data-active-cards-modal] .pensamos-course-walkthrough__modal-dialog { padding: 18px 22px 20px; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-head { gap: 8px; padding: 18px 84px 16px 18px; border-radius: 22px; box-shadow: 0 10px 22px rgba(13, 28, 49, .06); }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-counter { min-height: 32px; padding: 0 13px; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-head h3 { font-size: clamp(1.28rem, 2vw, 1.72rem); line-height: 1.06; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-body { margin-top: 12px; padding-bottom: 2px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-section { gap: 7px; padding: 14px 16px 14px 72px; border-radius: 20px; box-shadow: none; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-section::before { top: 14px; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-section h4 { font-size: .78rem; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-section p,
[data-active-cards-modal] .pensamos-course-walkthrough__modal-section li { font-size: .94rem; line-height: 1.42; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-section ul { gap: 7px; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-close {
	position: absolute;
	top: 24px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: #516073;
	font-size: 1.45rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	box-shadow: none;
	transition: color 180ms ease;
}
[data-active-cards-modal] .pensamos-course-walkthrough__modal-close:hover,
[data-active-cards-modal] .pensamos-course-walkthrough__modal-close:focus-visible {
	background: transparent;
	color: #20314f;
	transform: none;
	box-shadow: none;
	filter: none;
	outline: none;
}
[data-active-cards-modal] .pensamos-course-walkthrough__modal-actions { grid-template-columns: 1fr; justify-items: end; margin-top: 12px; padding: 0; border: 0; background: transparent; box-shadow: none; }
[data-active-cards-modal] .pensamos-course-walkthrough__modal-nav { justify-content: flex-end; }

.pensamos-c-active-cards__modal-question { margin: 0 0 10px; font-weight: 500; }
.pensamos-c-active-cards__modal-options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pensamos-c-active-cards__modal-options li { margin: 0; }
.pensamos-c-active-cards__modal-options button {
	width: 100%;
	padding: 8px 14px;
	border: 1px solid rgba(15, 23, 42, .12);
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: #fff;
	color: inherit;
	cursor: pointer;
	text-align: left;
}
.pensamos-c-active-cards__modal-options button:hover,
.pensamos-c-active-cards__modal-options button:focus-visible { border-color: rgba(14, 165, 233, .48); background: rgba(14, 165, 233, .06); outline: none; }
.pensamos-c-active-cards__modal-options button.is-correct { border-color: #16a34a; background: rgba(22, 163, 74, .08); }
.pensamos-c-active-cards__modal-options button.is-wrong { border-color: #dc2626; background: rgba(220, 38, 38, .07); }
.pensamos-c-active-cards__modal-options .is-correct-flag { font-size: .78rem; font-weight: 600; color: #16a34a; }
.pensamos-c-active-cards__modal-options .is-wrong-flag { font-size: .78rem; font-weight: 600; color: #dc2626; }

[data-active-cards-modal-section-title] { margin: 6px 0 0; color: rgba(15, 23, 42, .65); font-size: .92rem; }
.pensamos-course-platform-card__button:disabled { opacity: .55; cursor: not-allowed; }