@layer components {
	#contenedor {
		max-width: 90%;
		padding: 0.5rem 1.5rem 2rem;

		.intro-modulos {
			font-size: clamp(1rem, 2vw, 1.125rem);
			color: var(--text-secondary);
			max-width: 80%;
			margin: auto;
			margin-bottom: 3rem;
		}

		.modulos-grid {
			display: grid;
			gap: 2rem;
		}
	}

	.modulo-card {
		background: var(--bg-primary);
		border-radius: 1rem;
		padding: 2rem;
		box-shadow: var(--shadow);
		transition: box-shadow var(--transition-base), transform var(--transition-base);
		position: relative;
		border-top: 3px solid var(--color-tertiary);

		&:hover {
			box-shadow: var(--shadow-xl);
			transform: translateY(-4px);
		}

		/* ===== BADGES DE CATEGORIZACIÓN ===== */
		.modulo-badges {
			display: flex;
			gap: 0.5rem;
			margin-bottom: 1rem;
			flex-wrap: wrap;

			.badge {
				font-size: 0.75rem;
				font-weight: 700;
				padding: 0.3rem 0.75rem;
				border-radius: 9999px;
				text-transform: uppercase;
				letter-spacing: 0.5px;
				line-height: 1.2;
				color: var(--text-on-dark);
			}

			.badge-esencial {
				background: var(--color-success);
			}

			.badge-recomendado {
				background: var(--color-info);
			}

			.badge-avanzado {
				background: var(--color-tertiary);
			}

			[class*='badge-cumplimiento'] {
				background: var(--color-primary);
			}

			.badge-opcional {
				background: var(--gray-400);
			}
		}

		/* ===== CONTENIDO DEL MÓDULO ===== */
		.modulo-content {
			display: grid;
			grid-template-columns: 1fr 320px;
			gap: 2rem;
			margin-bottom: 1.5rem;

			.modulo-text {
				min-width: 0;

				.modulo-titulo {
					font-size: clamp(1.25rem, 2.5vw, 1.625rem);
					color: var(--color-tertiary);
					margin-bottom: 0.5rem;
					font-weight: 700;
					line-height: 1.3;
				}

				.modulo-subtitulo {
					font-style: italic;
					color: var(--text-secondary);
					margin-bottom: 1rem;
					font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
					line-height: 1.5;
				}

				.modulo-descripcion {
					font-size: clamp(0.9375rem, 1.6vw, 1rem);
					line-height: 1.6;
					color: var(--text-primary);

					p {
						margin-bottom: 1rem;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}

			.modulo-media {
				position: relative;

				.modulo-imagen-link {
					display: block;
					position: relative;
					border-radius: 0.5rem;
					overflow: hidden;
					box-shadow: var(--shadow-md);
					transition: box-shadow var(--transition-base);
					cursor: pointer;

					&:hover {
						box-shadow: var(--shadow-lg);

						.modulo-imagen {
							transform: scale(1.05);
						}

						.modulo-overlay {
							opacity: 1;
						}
					}

					.modulo-imagen {
						width: 100%;
						height: auto;
						aspect-ratio: 307 / 201;
						object-fit: cover;
						display: block;
						transition: transform var(--transition-slow);
					}

					.modulo-overlay {
						position: absolute;
						inset: 0;
						background: rgba(0, 0, 0, 0.6);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: var(--text-on-dark);
						font-size: 1rem;
						font-weight: 600;
						opacity: 0;
						transition: opacity var(--transition-base);
						gap: 0.5rem;

						i {
							font-size: 2rem;
						}
					}
				}
			}
		}

		/* ===== FOOTER CON CTAs ===== */
		.modulo-footer {
			display: flex;
			gap: 1rem;
			align-items: center;
			flex-wrap: wrap;
			padding-top: 1.5rem;
			border-top: 1px solid var(--gray-200);

			.btn-link {
				color: var(--color-tertiary);
				transition: color var(--transition-base);

				&:hover {
					color: var(--color-primary);
				}

				i {
					font-size: 1.25rem;
				}
			}
		}

		/* ===== BACK TO TOP ===== */
		.modulo-back-to-top {
			background: var(--gradient-primary);
			color: var(--text-on-dark);
			padding: 0.5rem 1.5rem;
			border-radius: 9999px;
			font-size: 0.875rem;
			box-shadow: var(--shadow);
			transition: transform var(--transition-base), box-shadow var(--transition-base);
			margin-top: 1.5rem;

			&:hover {
				transform: translateY(-2px);
				box-shadow: var(--shadow-lg);
			}
		}

		/* Si NO hay footer, el botón se posiciona absoluto (comportamiento original) */
		&:not(:has(.modulo-footer)) .modulo-back-to-top {
			position: absolute;
			bottom: 1rem;
			left: 1rem;
			margin-top: 0;
		}
	}

	/* ===== TEXTO DESTACADO (Adicionales) ===== */
	#basic-text {
		background: var(--color-warning-lighter);
		border-left: 4px solid var(--color-warning);
		padding: 1.5rem;
		border-radius: 0.5rem;
		margin: 2rem auto 2rem;

		.highlight {
			font-size: clamp(1rem, 2vw, 1.125rem);
			font-weight: 600;
			color: var(--color-warning-dark);
			margin: 0;
			line-height: 1.6;
			text-align: center;
		}
	}

	.modulos-estructura-a {
		--color-operacion: hsl(11, 83%, 66%);
		--color-admin: hsl(160, 50%, 50%);
		--color-adicionales: hsl(277, 47%, 50%);
		--color-avanzadas: hsl(210, 90%, 60%);

		margin: 0 auto;
		padding: 20px 15px;

		.estructura-header {
			text-align: center;
			margin-bottom: clamp(20px, 4vw, 40px);

			.estructura-subtitulo {
				font-size: clamp(1rem, 2vw, 1.25rem);
				color: var(--gray-500);
				margin: 0;
				font-weight: 400;
			}
		}

		.modulos-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 32px;

			@media (min-width: 1024px) {
				grid-template-columns: repeat(4, 1fr);
			}

			.modulo-card {
				background: #fff;
				border-radius: 16px;
				box-shadow: 0 4px 16px hsla(0, 0%, 0%, 0.12);
				overflow: hidden;
				transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
				position: relative;

				&:hover {
					transform: translateY(-8px);
					box-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.16);

					&::before {
						opacity: 1;
					}
				}

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					height: 4px;
					opacity: 0;
					transition: opacity 0.3s ease;
				}

				&:nth-child(1) {
					&::before {
						background: linear-gradient(90deg, var(--color-operacion), hsl(11, 83%, 76%));
					}

					.card-header {
						background: linear-gradient(135deg, var(--color-operacion), hsl(11, 83%, 76%));
					}

					.check-icon {
						color: var(--color-operacion);
					}
				}

				&:nth-child(2) {
					&::before {
						background: linear-gradient(90deg, var(--color-admin), hsl(160, 50%, 60%));
					}

					.card-header {
						background: linear-gradient(135deg, var(--color-admin), hsl(160, 50%, 60%));
					}

					.check-icon {
						color: var(--color-admin);
					}
				}

				&:nth-child(3) {
					&::before {
						background: linear-gradient(90deg, var(--color-adicionales), hsl(277, 47%, 60%));
					}

					.card-header {
						background: linear-gradient(135deg, var(--color-adicionales), hsl(277, 47%, 60%));
					}

					.check-icon {
						color: var(--color-adicionales);
					}
				}

				&:nth-child(4) {
					&::before {
						background: linear-gradient(90deg, var(--color-avanzadas), hsl(210, 90%, 70%));
					}

					.card-header {
						background: linear-gradient(135deg, var(--color-avanzadas), hsl(210, 90%, 70%));
					}

					.check-icon {
						color: var(--color-avanzadas);
					}
				}

				.card-header {
					padding: 24px 20px;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 12px;

					.header-content {
						display: flex;
						align-items: center;
						gap: 12px;
						flex: 1;

						i {
							font-size: 28px;
							flex-shrink: 0;
						}

						h3 {
							font-size: 1.125rem;
							font-weight: 600;
							line-height: 1.3;
						}
					}

					.badge-count {
						background: hsla(0, 0%, 100%, 0.25);
						backdrop-filter: blur(10px);
						padding: 6px 14px;
						border-radius: 20px;
						font-size: 0.875rem;
						font-weight: 600;
						flex-shrink: 0;
						border: 1px solid hsla(0, 0%, 100%, 0.3);
					}
				}

				.modulos-list {
					padding: 20px;

					li {
						display: flex;
						align-items: center;
						gap: 10px;
						padding: 10px 12px;
						border-radius: 8px;
						transition: all 0.2s ease;
						color: var(--gray-800);
						font-size: 0.9375rem;

						&:hover {
							background: hsl(0, 0%, 96%);
							transform: translateX(4px);
						}

						i:first-child {
							font-size: 18px;
							flex-shrink: 0;
							color: var(--gray-500);
						}

						span {
							flex: 1;
						}

						.check-icon {
							font-size: 16px;
							flex-shrink: 0;
							opacity: 0.6;
						}
					}
				}
			}
		}
	}

	/* ===== AJUSTES RESPONSIVOS ===== */

	@media (max-width: 768px) {
		.modulo-content {
			grid-template-columns: 1fr;
			gap: 1rem;
		}

		.modulo-media {
			order: -1; /* Imagen primero en móvil */
		}

		.modulos-estructura-a {
			padding: 40px 16px;
		}

		.estructura-header {
			margin-bottom: 40px;
		}

		.modulos-grid {
			gap: 24px;
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 480px) {
		#contenedor {
			padding: 1.5rem 1rem;
		}

		.modulo-card {
			padding: 1.5rem;
		}

		.modulo-back-to-top {
			position: static;
			margin-top: 1.5rem;
		}

		.modulo-footer {
			flex-direction: column;
			align-items: stretch;
		}

		.modulo-footer .btn,
		.modulo-footer .btn-link {
			width: 100%;
			justify-content: center;
		}
	}
}