/* ==========================================================================
   pages-misc.css — Contacto, 404 y páginas de credenciales/verificación
   --------------------------------------------------------------------------
   Capa de presentación de contacto.php, 404.php, recuperar-password.php,
   resetear-password.php y verificar-email.php.

   Reutiliza lo ya portado en theme.css (page-contacto, contacto-split,
   contacto-form, contacto-info, info-item, whatsapp-card, error-404-content,
   artisan-chip, marandre-field, ...), shop.css (split-layout, form-container,
   shop-notice--*, ...) y pages-auth.css (auth-page, auth-block, auth-success,
   password-toggle, ...). Aquí solo va lo que esas hojas no cubren.

   Reglas de la casa:
   - Ningún color literal de marca: todo sale de los tokens de brand_css_vars().
   - Nada de lógica: aquí no se define comportamiento, solo estilo.
   - Debe enlazarse DESPUÉS de pages-auth.css.
   ========================================================================== */

/* ==========================================================================
   1) CONTACTO
   ========================================================================== */

/* ---------- Alto del lienzo ----------
   .site-header es `position: fixed`, así que la página necesita despeje
   superior propio. theme.css da a .page-contacto un padding-block de
   var(--space-24); aquí se ata al alto real del header para que siga
   funcionando cuando este cambia de tamaño en móvil. */

.page-contacto {
	padding-top: calc(var(--header-height) + var(--space-12));
}

/* ---------- Columna del formulario ---------- */

.contacto-form__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	color: var(--color-on-surface);
	margin: 0 0 var(--space-8);
}

/* Nombre y apellido comparten fila en escritorio. El hueco vertical es 0
   porque .marandre-field ya aporta su propio margin-bottom. */
.contacto-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--space-6);
}

.contacto-form__body textarea {
	resize: vertical;
}

.contacto-form__submit {
	width: 100%;
	margin-top: var(--space-2);
}

/* ---------- Honeypot anti-spam ----------
   Sigue enviándose con el formulario (que es justamente lo que necesita la
   comprobación del servidor), pero queda fuera de la vista y del orden de
   tabulación. No se usa la utilidad `hidden` del CDN de Tailwind para no
   depender de un recurso externo en un control de seguridad. */

.contacto-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Campo <select> con etiqueta flotante ----------
   Un <select> nunca cumple :placeholder-shown, así que la regla de theme.css
   no lo eleva nunca. Aquí la etiqueta va siempre arriba y se añade el chevron
   que `appearance: none` deja fuera. */

.marandre-field--select label {
	top: calc(var(--space-3) * -1);
	font-size: var(--text-xs);
	color: var(--color-on-surface-faint);
	transform: translateY(-4px);
}

.marandre-field--select select:focus ~ label {
	color: var(--color-primary);
}

.marandre-field--select select {
	padding-right: var(--space-8);
	cursor: pointer;
}

/* El desplegable nativo no hereda el fondo transparente del campo. */
.marandre-field--select select option {
	background: var(--color-surface-lowest);
	color: var(--color-on-surface);
}

.marandre-field--select::after {
	content: '';
	position: absolute;
	right: var(--space-2);
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -7px;
	border-right: 1.5px solid var(--color-on-surface-faint);
	border-bottom: 1.5px solid var(--color-on-surface-faint);
	transform: rotate(45deg);
	pointer-events: none;
}

/* ---------- Columna de información ---------- */

/* Dato de contacto que no es enlace (dirección, horario). Acompaña a
   .info-link de theme.css con el mismo peso visual. */
.info-text {
	margin: 0;
	font-size: var(--text-md);
	font-weight: 500;
	line-height: 1.7;
	color: var(--color-on-surface);
}

.contacto-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.contacto-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--color-outline-variant);
	border-radius: var(--radius-pill);
	color: var(--color-secondary);
	font-size: var(--text-base);
	text-decoration: none;
	transition: all var(--transition);
}

.contacto-social a:hover,
.contacto-social a:focus-visible {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-on-secondary);
}

/* ---------- Tarjeta de WhatsApp ----------
   theme.css ya define el bloque (fondo y color). Aquí solo el contenido.
   El verde corporativo de WhatsApp no se usa: el bloque vive con el token
   --color-success de la marca. */

.whatsapp-card {
	text-decoration: none;
	transition: transform var(--transition), box-shadow var(--transition);
}

.whatsapp-card:hover,
.whatsapp-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-ambient);
}

.whatsapp-card__icon {
	font-size: var(--text-2xl);
	line-height: 1;
	flex-shrink: 0;
}

.whatsapp-card__label {
	display: block;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

.whatsapp-card__title {
	display: block;
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.3;
}

/* ---------- Mapa ---------- */

.contacto-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Responsive de contacto ----------
   theme.css ya apila .contacto-split bajo 992px; aquí solo se aligera el
   acolchado para que el formulario respire en pantallas pequeñas. */

@media (max-width: 992px) {
	.contacto-form {
		padding: var(--space-6);
	}

	.contacto-info {
		padding: var(--space-6) 0 0;
	}

	.contacto-form__row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   2) 404
   ========================================================================== */

/* .error-404-content da a todos sus <p> un margin-bottom generoso; la píldora
   del código de error necesita quedar más cerca del titular. */
.error-404-content .error-404-chip {
	margin-bottom: var(--space-6);
}

.error-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-8);
}

/* Buscador de rescate: alineado a la izquierda dentro del bloque centrado,
   porque la etiqueta flotante del campo se ancla a la izquierda. */
.error-404-search {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--space-4);
	max-width: 420px;
	margin: var(--space-16) auto 0;
	text-align: left;
}

.error-404-search .marandre-field {
	flex: 1;
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.error-404-actions .btn-primary,
	.error-404-actions .btn-secondary {
		width: 100%;
	}
}

/* ==========================================================================
   3) CREDENCIALES Y VERIFICACIÓN (layout partido)
   ========================================================================== */

/* shop.css declara `display: flex` para .login-page, .register-page y
   .recovery-page. verificar-email.php estrena su propia clase, así que se
   suma aquí. El alto lo sigue gobernando .auth-page (pages-auth.css). */

.verify-page {
	display: flex;
}

/* ---------- Variantes del icono de estado ----------
   pages-auth.css define .auth-success__icon en verde. Los estados de error y
   de enlace vencido reutilizan la misma pieza cambiando solo el color. Se
   cualifica con .auth-page para ganar a la base sin depender del orden de
   carga de las hojas. */

.auth-page .auth-success__icon--error {
	background: var(--color-error-container);
	color: var(--color-error);
}

.auth-page .auth-success__icon--warning {
	background: var(--color-warning-container);
	color: var(--color-warning);
}

/* ---------- Enlace terciario a ancho completo ----------
   .btn-tertiary se subraya con border-bottom; a ancho completo la línea
   cruzaría toda la columna, así que el subrayado se ciñe al texto. */

.auth-page .btn-tertiary.auth-block {
	padding-block: var(--space-3);
	border-bottom: none;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Bloques de estado ----------
   Los estados sin formulario (correo enviado, enlace vencido, verificación
   correcta) comparten la caja de .auth-success de pages-auth.css; solo hay
   que separar el aviso del botón que viene detrás. */

.auth-success .shop-notice--info,
.auth-success .shop-notice--error {
	margin-bottom: var(--space-6);
}

.auth-success form {
	margin: 0;
}