/* ==========================================================================
   ANATO Capacita: Ficha de módulo (single-anato-modulo.php). Requiere anato-base.css.

   1. Hero
   2. Botones de LearnPress
   3. Disposición
   4. Contenido del módulo (temario)
   4b. Calificaciones y comentarios
   5. Tarjeta lateral (resumen)
   6. Módulos relacionados
   7. Responsive
   ========================================================================== */

/* 1. Hero
   ========================================================================== */
.ach-mod-hero {
	position: relative;
	overflow: hidden;
	padding: 64px 0 56px;
	background: linear-gradient(180deg, #f4fafc 0%, #fff 100%);
}

.ach-mod-hero::before {
	content: '';
	position: absolute;
	width: 520px;
	height: 520px;
	right: -160px;
	top: -250px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(67, 215, 203, .32), rgba(7, 92, 168, .06) 60%, transparent 72%);
}

.ach-mod-hero::after {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	left: -190px;
	bottom: -210px;
	border-radius: 60px;
	background: linear-gradient(135deg, rgba(7, 92, 168, .07), rgba(0, 175, 166, .16));
	transform: rotate(22deg);
}

.ach-mod-hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
	gap: 58px;
	align-items: center;
}

.ach .ach-mod-hero h1 {
	max-width: 880px;
	margin: 16px 0 20px;
	font-size: clamp(34px, 4.2vw, 58px);
	line-height: 1.04;
	letter-spacing: -.04em;
	color: var(--ach-navy);
	overflow-wrap: anywhere;
}

.ach-mod-hero h1 span {
	color: var(--ach-teal);
}

.ach .ach-mod-hero__lead {
	max-width: 720px;
	margin: 0;
	font-size: 15px;
	color: var(--ach-muted);
}

.ach .ach-mod-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.ach-mod-hero__meta li {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: #4f687c;
}

.ach-mod-hero__meta svg {
	width: 18px;
	height: 18px;
	color: var(--ach-blue);
}

.ach-mod-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

/* Tarjeta visual con la imagen del módulo */
.ach-mod-visual {
	position: relative;
	overflow: hidden;
	padding: 16px 16px 20px;
	border-radius: 30px;
	background: linear-gradient(145deg, var(--ach-navy), var(--ach-blue) 62%, #0d76bd);
	color: #fff;
	box-shadow: 0 24px 70px rgba(7, 54, 95, .21);
}

.ach-mod-visual::before {
	content: '';
	position: absolute;
	width: 230px;
	height: 230px;
	right: -58px;
	top: -74px;
	border-radius: 52px;
	background: linear-gradient(135deg, rgba(67, 215, 203, .44), rgba(255, 255, 255, .03));
	transform: rotate(18deg);
}

.ach-mod-visual__media {
	position: relative;
	z-index: 2;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 20px;
	background: rgba(255, 255, 255, .1);
}

.ach .ach-mod-visual__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ach-mod-visual__graphic {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	height: 200px;
}

.ach-mod-visual__core {
	width: 102px;
	height: 102px;
	display: grid;
	place-items: center;
	border-radius: 30px;
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .22);
}

.ach-mod-visual__core svg {
	width: 48px;
	height: 48px;
}

.ach-mod-visual__label {
	position: relative;
	z-index: 2;
	margin-top: 16px;
	padding: 14px 6px 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.ach-mod-visual__label small {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #bcdbe8;
}

.ach-mod-visual__label strong {
	display: block;
	margin-top: 6px;
	font-size: 20px;
	line-height: 1.15;
}

/* 2. Botones de LearnPress (empezar / continuar / finalizar)
   ========================================================================== */
.ach-lp-actions,
.ach-lp-actions .lp-course-buttons {
	display: contents;
}

.ach .ach-lp-actions form {
	display: flex;
	margin: 0;
}

.ach .ach-lp-actions .lp-button,
.ach .ach-lp-actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: auto;
	height: auto;
	min-height: 50px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: var(--ach-blue);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	box-shadow: 0 10px 28px rgba(7, 92, 168, .22);
	cursor: pointer;
	transition: transform .22s, background-color .22s;
}

.ach .ach-lp-actions .lp-button:hover,
.ach .ach-lp-actions button:hover {
	background: var(--ach-blue-dark);
	color: #fff;
	transform: translateY(-2px);
}

.ach .ach-lp-actions .lp-button::after {
	content: '→';
}

/* 3. Disposición
   ========================================================================== */
.ach-mod-main {
	padding: 58px 0 100px;
}

.ach-mod-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 42px;
	align-items: start;
}

/* 4. Contenido del módulo (temario)
   ========================================================================== */
.ach-curriculum {
	overflow: hidden;
	border: 1px solid var(--ach-line);
	border-radius: 24px;
}

.ach-curriculum__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 18px;
	padding: 22px 24px;
	background: var(--ach-soft);
	border-bottom: 1px solid var(--ach-line);
}

.ach .ach-curriculum__head h2 {
	margin: 0;
	font-size: 17px;
	color: var(--ach-navy);
}

.ach-curriculum__head span {
	font-size: 12px;
	font-weight: 700;
	color: #718394;
}

.ach .ach-curriculum__section {
	margin: 0;
	padding: 14px 22px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #597184;
	background: #fbfdfe;
	border-bottom: 1px solid var(--ach-line);
}

.ach .ach-lessons {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ach-lesson {
	position: relative;
	display: grid;
	grid-template-columns: 42px 1fr auto;
	gap: 14px;
	align-items: center;
	margin: 0;
	padding: 17px 22px;
	background: #fff;
	border-bottom: 1px solid var(--ach-line);
}

.ach-lessons:last-of-type .ach-lesson:last-child {
	border-bottom: 0;
}

.ach-lesson.is-open:hover {
	background: var(--ach-soft);
}

.ach-lesson__num {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: #edf5fa;
	color: var(--ach-blue);
	font-size: 11px;
	font-weight: 800;
}

.ach-lesson__num.is-quiz {
	background: var(--ach-teal-soft);
	color: var(--ach-teal-dark);
}

.ach-lesson__text strong,
.ach .ach-lesson__link {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: #365267;
}

/* El enlace de la lección cubre toda la fila */
.ach-lesson__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ach .ach-lesson.is-open:hover .ach-lesson__link {
	color: var(--ach-blue);
}

.ach-lesson__text small {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #718394;
}

.ach-lesson__state {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: #f7fafc;
	color: #8398a8;
}

.ach-lesson.is-open .ach-lesson__state {
	background: var(--ach-teal-soft);
	color: var(--ach-teal-dark);
}

.ach-lesson__state svg {
	width: 14px;
	height: 14px;
}

/* Ítems ya abiertos (ojo) y terminados (visto) */
.ach-lesson.is-viewed .ach-lesson__state {
	background: #edf5fa;
	color: var(--ach-blue);
}

.ach-lesson.is-completed .ach-lesson__state {
	background: var(--ach-teal);
	color: #fff;
}

.ach-lesson.is-completed .ach-lesson__state svg {
	width: 15px;
	height: 15px;
}

.ach .ach-curriculum__empty {
	margin: 0;
	padding: 24px;
	color: var(--ach-muted);
}

/* 4b. Calificaciones y comentarios
   ========================================================================== */
/* Pestañas: contenido / calificaciones (en la cabecera del bloque del temario) */
.ach .ach-mod-tabs {
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 4px;
	padding: 0 12px;
	overflow-x: auto;
	scrollbar-width: none;
}

.ach-mod-tabs::-webkit-scrollbar {
	display: none;
}

.ach .ach-mod-tab {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin: 0 0 -1px;
	padding: 18px 12px 15px;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	color: #6b8192;
	cursor: pointer;
	transition: color .2s, border-color .2s;
}

.ach .ach-mod-tab:hover {
	color: var(--ach-navy);
}

.ach .ach-mod-tab[aria-selected="true"] {
	color: var(--ach-navy);
	border-bottom-color: var(--ach-teal);
}

.ach .ach-mod-tab:focus-visible {
	outline-offset: -3px;
}

.ach-mod-tab small {
	font-size: 12px;
	font-weight: 700;
	color: #718394;
}

.ach-mod-tab__star {
	color: var(--ach-star);
}

.ach-reviews[hidden],
.ach-curriculum section[hidden] {
	display: none;
}

.ach-reviews__summary {
	padding: 16px 24px;
	border-bottom: 1px solid var(--ach-line);
}

.ach .ach-reviews__summary .ach-rating {
	margin: 0;
}

.ach .ach-reviews__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ach-review {
	margin: 0;
	padding: 18px 24px;
	border-bottom: 1px solid var(--ach-line);
}

.ach-review:last-child {
	border-bottom: 0;
}

.ach-review__top {
	display: grid;
	grid-template-columns: 38px 1fr auto;
	gap: 12px;
	align-items: center;
}

.ach-review__avatar {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ach-teal-soft);
	color: var(--ach-teal-dark);
	font-weight: 800;
}

.ach-review__top strong {
	display: block;
	font-size: 14px;
	color: var(--ach-ink);
}

.ach-review__top .ach-rating__stars {
	font-size: 13px;
}

.ach-review__top time {
	font-size: 12px;
	color: #718394;
}

.ach .ach-review p {
	margin: 12px 0 0 50px;
	font-size: 14px;
	line-height: 1.6;
	color: #365267;
}

.ach-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding: 16px 24px;
	border-top: 1px solid var(--ach-line);
	background: #fbfdfe;
}

.ach .ach-pager .page-numbers {
	min-width: 38px;
	height: 38px;
	display: inline-grid;
	place-items: center;
	padding: 0 10px;
	border: 1px solid var(--ach-line);
	border-radius: 11px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: #365267;
}

.ach .ach-pager a.page-numbers:hover {
	border-color: #9fc7df;
	color: var(--ach-blue);
}

.ach .ach-pager .page-numbers.current {
	background: var(--ach-navy);
	border-color: var(--ach-navy);
	color: #fff;
}

.ach .ach-pager .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* 5. Tarjeta lateral (resumen)
   ========================================================================== */
.ach-mod-side {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ach-header-h) + 24px);
}

.ach-enroll {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--ach-line);
	border-radius: 26px;
	box-shadow: var(--ach-shadow);
}

/* Avance del usuario en el módulo */
.ach-progress {
	margin-bottom: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ach-line);
}

.ach-progress__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	color: #617789;
}

.ach-progress__label b {
	font-size: 20px;
	color: var(--ach-navy);
}

.ach-progress__bar {
	height: 10px;
	border-radius: 999px;
	background: #e8f0f4;
	overflow: hidden;
}

.ach-progress__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ach-blue), var(--ach-teal));
}

.ach-progress small {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	color: #718394;
}

.ach .ach-enroll__list {
	display: grid;
	margin: 0;
}

.ach-enroll__list > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 0;
	font-size: 12px;
}

.ach .ach-enroll__list dt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 500;
	color: #617789;
}

.ach-enroll__list svg {
	width: 16px;
	height: 16px;
	color: var(--ach-blue);
}

.ach .ach-enroll__list dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	color: #29485e;
}

.ach .ach-enroll__back {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin-top: 14px;
	padding: 10px 13px;
	border-radius: 13px;
	background: var(--ach-soft);
	color: var(--ach-blue);
	font-size: 11px;
	font-weight: 800;
	text-align: center;
}

.ach .ach-enroll__back:hover {
	background: #eaf3f8;
	color: var(--ach-blue);
}

/* 6. Módulos relacionados
   ========================================================================== */
.ach-mod-related {
	padding-bottom: 92px;
}

.ach .ach-mod-related .ach-section-head h2 {
	font-size: 32px;
	color: var(--ach-navy);
}

.ach .ach-mod-related .ach-section-head p {
	margin-top: 8px;
	font-size: 13px;
}

.ach-mod-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.ach-mini-course {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--ach-line);
	border-radius: 22px;
	transition: transform .25s, box-shadow .25s;
}

.ach-mini-course:hover {
	transform: translateY(-5px);
	box-shadow: var(--ach-shadow);
}

.ach-mini-course:focus-within {
	outline: 3px solid var(--ach-teal);
	outline-offset: 3px;
}

.ach-mini-course__icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	margin-bottom: 18px;
	border-radius: 16px;
	background: #eef7fb;
	color: var(--ach-blue);
}

.ach-mini-course__icon svg {
	width: 23px;
	height: 23px;
}

.ach .ach-mini-course h3 {
	margin: 12px 0 16px;
	font-size: 15px;
	line-height: 1.35;
}

.ach-mini-course__link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ach .ach-mini-course__link:focus-visible {
	outline: none;
}

.ach-mini-course .ach-link-arrow {
	margin-top: auto;
	font-size: 12px;
}

.ach-mini-course:hover .ach-link-arrow span {
	transform: translateX(4px);
}

/* 7. Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.ach-mod-hero__grid,
	.ach-mod-layout { grid-template-columns: minmax(0, 1fr); }
	.ach-mod-hero__grid { gap: 34px; }
	.ach-mod-visual { max-width: 560px; }
	.ach-mod-side { position: static; }
	.ach-mod-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.ach-mod-hero { padding: 40px 0 40px; }
	.ach .ach-mod-hero h1 { font-size: clamp(30px, 9vw, 36px); }
	.ach-mod-hero__actions { flex-direction: column; }
	.ach-mod-hero__actions .ach-btn,
	.ach .ach-mod-hero__actions .lp-button,
	.ach .ach-mod-hero__actions form { width: 100%; }
	.ach-mod-visual { padding: 12px 12px 16px; border-radius: 24px; }
	.ach-mod-visual__media { border-radius: 16px; }
	.ach-mod-visual__label strong { font-size: 17px; }

	.ach-mod-main { padding: 36px 0 64px; }
	.ach-mod-layout { gap: 28px; }

	.ach-curriculum { border-radius: 20px; }
	.ach-curriculum__head { padding: 18px; }
	.ach-lesson { grid-template-columns: 34px 1fr 26px; gap: 12px; padding: 14px 16px; }
	.ach-lesson__state { width: 26px; height: 26px; }

	.ach .ach-mod-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0 6px; }
	.ach .ach-mod-tab { padding: 14px 10px 11px; font-size: 14px; }
	.ach-mod-tab small { font-size: 11px; }
	.ach-reviews__summary { padding: 14px 18px; }
	.ach-review { padding: 16px 18px; }
	.ach-review__top { grid-template-columns: 34px 1fr; }
	.ach-review__avatar { width: 34px; height: 34px; }
	.ach-review__top time { grid-column: 2; margin-top: -8px; }
	.ach .ach-review p { margin-left: 0; }

	.ach-enroll { padding: 20px; border-radius: 22px; }

	.ach-mod-related { padding-bottom: 64px; }
	.ach .ach-mod-related .ach-section-head h2 { font-size: 26px; }
	.ach-mod-related .ach-section-head .ach-btn { margin-top: 16px; }
	.ach-mod-related__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--ach-gutter);
		margin: 0 calc(var(--ach-gutter) * -1);
		padding: 6px var(--ach-gutter) 14px;
		scrollbar-width: none;
	}
	.ach-mod-related__grid::-webkit-scrollbar { display: none; }
	.ach-mini-course { scroll-snap-align: start; }
	.ach-mini-course:hover { transform: none; }
}