/* ==========================================================================
   AlegriaPlay Hub -- forms.css
   Capa forms: campos, formulario de contacto, bandeja de cookies (cc-tray).
   Capa utilities: patron reveal, marcas de error 404, ayudas puntuales.
   ========================================================================== */

@layer forms {

	.field {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: 20px;
	}

	.field label {
		font-family: var(--f-display);
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--c-mute);
	}

	.field input,
	.field textarea {
		min-height: 48px;
		padding: 12px 16px;
		border: 1px solid var(--c-line);
		border-radius: var(--radius-s);
		background-color: var(--c-white);
	}

	.field textarea {
		min-height: 120px;
		resize: vertical;
	}

	.field input:focus,
	.field textarea:focus {
		border-color: var(--c-accent);
	}

	.field--consent {
		flex-direction: row;
		align-items: flex-start;
		gap: 10px;
	}

	.field--consent input {
		min-height: auto;
		width: 20px;
		height: 20px;
		margin-top: 2px;
		flex-shrink: 0;
	}

	.field--consent label {
		text-transform: none;
		font-family: var(--f-body);
		font-size: 0.92rem;
		letter-spacing: normal;
		color: var(--c-ink);
	}

	.field--hp {
		position: absolute;
		left: -9999px;
		top: -9999px;
	}

	.contact-form__note {
		font-size: 0.85rem;
		color: var(--c-mute);
		margin-top: 6px;
	}

	.form-msg {
		display: none;
		margin-top: 18px;
		padding: 14px 18px;
		border-radius: var(--radius-s);
		font-size: 0.92rem;
	}

	.form-msg.is-visible {
		display: block;
	}

	.form-msg--ok {
		background-color: #E8F6E4;
		color: #1F5E1A;
		border: 1px solid #B7DFAC;
	}

	.form-msg--error {
		background-color: #FBE7E7;
		color: #7A1F1F;
		border: 1px solid #E8B8B8;
	}

	/* ------------------------------------------------------------
	   bandeja de cookies -- cc-tray
	   ------------------------------------------------------------ */
	.cc-tray {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
		z-index: 70;
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
		background-color: var(--c-ink);
		color: var(--c-fog);
		padding: 20px 22px;
		border-radius: var(--radius-m);
		box-shadow: 0 14px 36px rgba(17, 17, 20, 0.3);
		display: none;
	}

	.cc-tray.is-visible {
		display: block;
	}

	.cc-tray p {
		font-size: 0.88rem;
		margin-bottom: 14px;
		max-width: none;
	}

	.cc-tray__actions {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
	}

	.cc-tray a {
		text-decoration: underline;
		color: var(--c-accent);
	}

}

@layer utilities {

	/* ------------------------------------------------------------
	   patron reveal (owner: signup.js)
	   ------------------------------------------------------------ */
	.reveal {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}

	.reveal--in {
		opacity: 1;
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {

		.reveal {
			transition: none;
		}

	}

	/* ------------------------------------------------------------
	   marca de error 404
	   ------------------------------------------------------------ */
	.error-mark {
		font-family: var(--f-display);
		font-size: clamp(6rem, 22vw, 13rem);
		color: var(--c-accent);
		line-height: 1;
	}

	/* ------------------------------------------------------------
	   ayudas puntuales
	   ------------------------------------------------------------ */
	.u-center {
		text-align: center;
	}

	.u-mt-lg {
		margin-top: 48px;
	}

	.u-max {
		max-width: none;
	}

}