/* ============================================================
   Programa SIHOWIN Aprovecha — Formulario de inscripción
   Depende de: general.css (tokens, componentes base)
   ============================================================ */

@layer components {
	/* ── PAGE WRAPPER ──────────────────────────────────────── */

	.ap-page {
		background: var(--bg-secondary);
		color: var(--text-primary);
		font-family: 'Gotham', sans-serif;
		min-block-size: 100vh;
	}

	/* ── HERO / HEADER ─────────────────────────────────────── */

	.ap-hero {
		background: var(--gradient-primary);
		color: var(--text-on-dark);
		padding: 2.5rem 1.5rem 2rem;
	}

	.ap-hero__inner {
		align-items: flex-start;
		display: flex;
		gap: 1.25rem;
		margin-inline: auto;
		max-inline-size: 820px;
	}

	.ap-hero__logo {
		block-size: 48px;
		flex-shrink: 0;
		inline-size: auto;
		margin-block-start: 0.25rem;
	}

	.ap-hero__programa {
		color: var(--color-primary-lighter);
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		margin: 0 0 0.35rem;
		text-transform: uppercase;
	}

	.ap-hero__titulo {
		font-family: 'Raleway', sans-serif;
		font-size: clamp(1.3rem, 3vw, 1.9rem);
		font-weight: 700;
		line-height: 1.2;
		margin: 0 0 0.5rem;
	}

	.ap-hero__sub {
		color: var(--text-on-dark-muted);
		font-size: 0.95rem;
		margin: 0;
		max-inline-size: 55ch;
	}

	/* ── CONTADOR DE SPOTS ─────────────────────────────────── */

	.ap-spots {
		align-items: center;
		background: hsl(0 0% 100% / 0.12);
		border: 1px solid hsl(0 0% 100% / 0.2);
		border-radius: 8px;
		color: var(--text-on-dark);
		display: flex;
		font-size: 0.9rem;
		font-weight: 500;
		gap: 0.6rem;
		margin: 1.25rem auto 0;
		max-inline-size: 820px;
		padding: 0.6rem 1rem;
	}

	.ap-spots--disponibles {
		background: hsl(from var(--color-primary) h s l / 0.2);
		border-color: hsl(from var(--color-primary) h s l / 0.4);
	}

	.ap-spots--agotados {
		background: hsl(0 0% 100% / 0.08);
		border-color: hsl(0 0% 100% / 0.18);
		color: var(--text-on-dark-muted);
	}

	.ap-spots i {
		color: var(--color-primary-lighter);
		flex-shrink: 0;
		font-size: 1.15rem;
	}

	/* ── CONTENIDO ─────────────────────────────────────────── */

	.ap-contenido {
		margin-inline: auto;
		max-inline-size: 820px;
		padding: 2rem 1.25rem 4rem;
	}

	/* ── YA INSCRITO ───────────────────────────────────────── */

	.ap-ya-inscrito {
		background: var(--bg-primary);
		border-radius: 12px;
		box-shadow: var(--shadow-md);
		padding: 4rem 2rem;
		text-align: center;
	}

	.ap-ya-inscrito i {
		color: var(--color-primary);
		display: block;
		font-size: 3rem;
		margin-block-end: 1rem;
	}

	.ap-ya-inscrito h2 {
		font-family: 'Raleway', sans-serif;
		font-size: 1.5rem;
		margin: 0 0 0.75rem;
	}

	.ap-ya-inscrito p {
		color: var(--text-secondary);
		margin: 0 0 1.5rem;
	}

	/* ── FORMULARIO ────────────────────────────────────────── */

	.ap-form {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	/* ── SECCIÓN ───────────────────────────────────────────── */

	.ap-seccion {
		background: var(--bg-primary);
		border: 1px solid var(--gray-200);
		border-radius: 12px;
		box-shadow: var(--shadow-sm);
		padding: 1.75rem 1.5rem 1.5rem;
	}

	.ap-seccion__titulo {
		align-items: center;
		border-block-end: 1.5px solid var(--gray-200);
		color: var(--text-primary);
		display: flex;
		font-family: 'Raleway', sans-serif;
		font-size: 0.975rem;
		font-weight: 700;
		gap: 0.5rem;
		letter-spacing: 0.01em;
		margin: 0 0 1.25rem;
		padding-block-end: 0.75rem;
	}

	.ap-seccion__titulo i {
		color: var(--color-primary);
		font-size: 1.1rem;
	}

	/* ── GRIDS ─────────────────────────────────────────────── */

	.ap-grid {
		display: grid;
		gap: 1rem;
	}

	.ap-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.ap-grid--gap-top {
		margin-block-start: 1rem;
	}

	/* ── CAMPO ─────────────────────────────────────────────── */

	.ap-campo {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
	}

	.ap-campo--full {
		grid-column: 1 / -1;
	}

	.ap-campo label {
		color: var(--text-primary);
		font-size: 0.8125rem;
		font-weight: 600;
	}

	.ap-campo input[type='text'],
	.ap-campo input[type='email'],
	.ap-campo input[type='tel'],
	.ap-campo input[type='number'],
	.ap-campo textarea {
		background: var(--bg-primary);
		border: 1.5px solid var(--gray-300);
		border-radius: 8px;
		box-sizing: border-box;
		color: var(--text-primary);
		font-family: 'Gotham', sans-serif;
		font-size: 0.9rem;
		padding: 0.55rem 0.75rem;
		transition:
			border-color var(--transition-base),
			box-shadow var(--transition-base);
		width: 100%;

		&::placeholder {
			color: var(--text-muted);
		}
	}

	.ap-campo input[readonly] {
		background: var(--bg-secondary);
		color: var(--text-tertiary);
		cursor: default;
	}

	.ap-campo input:focus,
	.ap-campo textarea:focus {
		border-color: var(--color-primary);
		box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
		outline: none;
	}

	.ap-campo textarea {
		min-block-size: 80px;
		resize: none;
	}

	.ap-req {
		color: var(--color-danger);
		margin-inline-start: 2px;
	}

	.ap-campo__hint {
		align-items: center;
		color: var(--text-muted);
		display: inline-flex;
		font-size: 0.78rem;
		font-weight: 400;
		gap: 0.3rem;
	}

	/* ── RADIO GROUP ───────────────────────────────────────── */

	.ap-radio-grupo {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.ap-radio {
		align-items: center;
		border: 1.5px solid var(--gray-300);
		border-radius: 9999px;
		cursor: pointer;
		display: flex;
		font-size: 0.875rem;
		gap: 0.4rem;
		padding: 0.4rem 0.85rem;
		transition:
			border-color var(--transition-base),
			background var(--transition-base),
			color var(--transition-base);
		user-select: none;
	}

	.ap-radio:has(input:checked) {
		background: var(--color-primary-alpha-10);
		border-color: var(--color-primary);
		color: var(--color-primary-darker);
		font-weight: 600;
	}

	.ap-radio input {
		block-size: 0;
		inline-size: 0;
		opacity: 0;
		position: absolute;
	}

	/* ── MÓDULOS GRID ──────────────────────────────────────── */

	.ap-modulos-grid {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
		margin-block-start: 0.5rem;
	}

	.ap-checkbox {
		align-items: center;
		border: 1.5px solid var(--gray-300);
		border-radius: 8px;
		cursor: pointer;
		display: flex;
		font-size: 0.875rem;
		gap: 0.5rem;
		padding: 0.45rem 0.7rem;
		transition:
			border-color var(--transition-base),
			background var(--transition-base),
			color var(--transition-base);
		user-select: none;
	}

	.ap-checkbox:has(input:checked) {
		background: var(--color-primary-alpha-10);
		border-color: var(--color-primary);
		color: var(--color-primary-darker);
		font-weight: 600;
	}

	.ap-checkbox input {
		accent-color: var(--color-primary);
		block-size: 15px;
		flex-shrink: 0;
		inline-size: 15px;
	}

	/* ── FOOTER DEL FORMULARIO ─────────────────────────────── */

	.ap-form-footer {
		align-items: center;
		background: var(--bg-primary);
		border: 1px solid var(--gray-200);
		border-radius: 12px;
		box-shadow: var(--shadow-sm);
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 1.5rem;
		text-align: center;
	}

	.ap-form-footer__nota {
		color: var(--text-secondary);
		font-size: 0.875rem;
		line-height: 1.5;
		margin: 0;
		text-align: center;

		i {
			margin-inline-end: 0.25rem;
			vertical-align: -0.1em;
		}
	}

	.ap-form-footer__nota--espera {
		color: var(--color-warning-dark);
	}

	/* ── BOTONES ───────────────────────────────────────────── */

	.ap-btn {
		align-items: center;
		border: none;
		border-radius: 10px;
		cursor: pointer;
		display: inline-flex;
		font-family: 'Gotham', sans-serif;
		font-size: 0.9rem;
		font-weight: 600;
		gap: 0.5rem;
		padding: 0.6rem 1.2rem;
		text-decoration: none;
		transition:
			transform var(--transition-fast),
			box-shadow var(--transition-base);
		user-select: none;
	}

	.ap-btn--primario {
		background: var(--gradient-primary);
		box-shadow: 0 4px 12px hsl(0 0% 0% / 0.18);
		color: var(--text-on-dark);
	}

	.ap-btn--primario:hover {
		box-shadow: 0 6px 18px hsl(0 0% 0% / 0.25);
		color: var(--text-on-dark);
		transform: translateY(-2px);
	}

	.ap-btn--primario:active {
		box-shadow: 0 4px 10px hsl(0 0% 0% / 0.18);
		transform: translateY(0);
	}

	.ap-btn--grande {
		font-size: 1rem;
		padding: 0.8rem 2.25rem;
	}

	.ap-btn:disabled {
		cursor: not-allowed;
		opacity: 0.6;
		pointer-events: none;
	}

	/* ── PIE DE PÁGINA ─────────────────────────────────────── */

	.ap-pie {
		align-items: center;
		border-block-start: 1px solid var(--gray-200);
		color: var(--text-muted);
		display: flex;
		flex-direction: column;
		font-size: 0.8125rem;
		gap: 0.5rem;
		padding: 1.5rem;
		text-align: center;
	}

	.ap-link-volver {
		align-items: center;
		color: var(--color-tertiary);
		display: inline-flex;
		font-size: 0.875rem;
		gap: 0.3rem;
		text-decoration: none;
		transition: color var(--transition-base);

		&:hover {
			color: var(--color-tertiary-dark);
		}
	}

	/* ── PANTALLA DE GRACIAS ───────────────────────────────── */

	.ap-page--gracias {
		align-items: center;
		display: flex;
		justify-content: center;
		padding: 2rem 1rem;
	}

	.ap-gracias {
		align-items: center;
		background: var(--bg-primary);
		border: 1px solid var(--gray-200);
		border-radius: 16px;
		box-shadow: var(--shadow-xl);
		display: flex;
		flex-direction: column;
		gap: 1rem;
		max-inline-size: 520px;
		padding: 3rem 2rem;
		text-align: center;
		width: 100%;

		/* Entrada suave */
		animation: ap-fadein 350ms cubic-bezier(0.4, 0, 0.2, 1) both;
	}

	.ap-gracias__icono {
		align-items: center;
		background: var(--color-primary-alpha-10);
		border-radius: 50%;
		block-size: 72px;
		color: var(--color-primary);
		display: flex;
		font-size: 2rem;
		inline-size: 72px;
		justify-content: center;
	}

	.ap-gracias__icono--oro {
		background: var(--color-warning-lighter);
		color: var(--color-warning-dark);
	}

	.ap-gracias__titulo {
		color: var(--text-primary);
		font-family: 'Raleway', sans-serif;
		font-size: 1.75rem;
		font-weight: 700;
		margin: 0;
	}

	.ap-gracias__bienvenida {
		color: var(--text-secondary);
		font-size: 1rem;
		margin: 0;
	}

	.ap-gracias__badge {
		align-items: center;
		background: var(--bg-tertiary);
		border: 1px solid var(--gray-300);
		border-radius: 9999px;
		color: var(--text-primary);
		display: inline-flex;
		font-size: 0.9rem;
		font-weight: 600;
		gap: 0.5rem;
		padding: 0.45rem 1.1rem;
	}

	.ap-gracias__badge--gratuito {
		background: var(--color-warning-lighter);
		border-color: hsl(45, 93%, 72%);
		color: var(--color-warning-dark);
	}

	.ap-gracias__detalle {
		color: var(--text-secondary);
		font-size: 0.925rem;
		line-height: 1.6;
		margin: 0;
		text-align: center;
	}

	.ap-gracias__acciones {
		margin-block-start: 0.5rem;
	}

	.ap-gracias__nota {
		color: var(--text-muted);
		font-size: 0.775rem;
		margin: 0;
		margin-block-start: 0.5rem;
	}

	/* ── ANIMACIONES ───────────────────────────────────────── */

	@keyframes ap-fadein {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* ── RESPONSIVE ────────────────────────────────────────── */

	@media (max-width: 640px) {
		.ap-hero__inner {
			flex-direction: column;
			gap: 0.75rem;
		}

		.ap-hero__logo {
			block-size: 36px;
		}

		.ap-grid--2 {
			grid-template-columns: 1fr;
		}

		.ap-seccion {
			padding: 1.25rem 1rem;
		}

		.ap-modulos-grid {
			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		}

		.ap-gracias {
			padding: 2rem 1.25rem;
		}

		.ap-btn--grande {
			inline-size: 100%;
			justify-content: center;
		}
	}
}