/*
 * Cuenta y acceso — lo que el tema no cubre.
 *
 * Solo carga en /mi-cuenta/ y solo para quien todavía no ha entrado. El tema ya
 * centra la tarjeta y arma las pestañas (woocommerce.css:938 + assets/js/account.js);
 * acá va únicamente el botón de Google, el separador y la fila nombre/apellido.
 *
 * Sin :has(), por el bug del minificador de LiteSpeed que el propio tema
 * documenta en woocommerce.css:936.
 */

/* Ancho estable entre pestañas. Sin esto cada panel se mide según
   su propio contenido — login ~387px, registro ~551px — y la
   tarjeta salta de tamaño al alternar Acceder/Registrarse.
   El form del tema trae max-width: 480px, que hay que soltar
   para que llene la tarjeta. */
.woocommerce-account .woocommerce .u-columns { margin-inline: auto; }

/* El ancho se ata al viewport, no al padre: el contenedor se mide
   por su contenido, así que un max-width: 100% se resolvería contra
   un padre ya estirado y se desbordaría en móvil. */
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2,
.woocommerce-account .u-columns .matu-account-tabs {
	box-sizing: border-box;
	width: min(520px, calc(100vw - 2.5rem));
	margin-inline: auto;
}
.woocommerce-account .u-columns form.woocommerce-form {
	width: 100%;
	max-width: none;
}

/* El h2 del panel repite lo que ya dice la píldora activa.
   Se oculta a la vista pero sigue ahí para lectores de pantalla
   — y account.js necesita su texto para nombrar la pestaña. */
.woocommerce-account .u-columns .col-1 > h2,
.woocommerce-account .u-columns .col-2 > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Relieve de la tarjeta, el mismo recurso de las píldoras. */
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
	box-shadow: 5px 5px 0 var(--matu-black, #0c0c0c);
}

/* Nombre y apellido lado a lado. */
.matu-form-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}
.matu-form-duo .form-row { margin-bottom: 1rem; }

/* Botón principal a lo ancho de la tarjeta. */
.woocommerce-account .u-columns form button[type="submit"] {
	width: 100%;
	margin-top: .35rem;
}

/* Recuérdame, contraseña perdida y aviso de privacidad. */
.woocommerce-account .u-columns .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1rem;
	font-family: var(--matu-font-body, 'Raleway', system-ui, sans-serif);
	font-size: .85rem;
	color: var(--matu-grey, #6b6b6b);
}
.woocommerce-account .u-columns .woocommerce-form-login__rememberme input { margin: 0; }

.woocommerce-account .u-columns .woocommerce-LostPassword {
	margin: .9rem 0 0;
	font-family: var(--matu-font-body, 'Raleway', system-ui, sans-serif);
	font-size: .85rem;
	text-align: center;
}

.woocommerce-account .u-columns .woocommerce-privacy-policy-text p {
	font-family: var(--matu-font-body, 'Raleway', system-ui, sans-serif);
	font-size: .78rem;
	line-height: 1.5;
	color: var(--matu-grey, #6b6b6b);
}

/* ---- Botón de Google ---- *
 * Se deja blanco a propósito: las guías de marca de Google piden
 * que su botón siga siendo reconocible, y el logo multicolor se
 * ensucia sobre el rosa. Lo que se hereda del tema es la forma:
 * píldora, borde de 2px y sombra dura.                          */
.matu-social { margin-top: 1.4rem; }

.matu-social__sep {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
	font-family: var(--matu-font-body, 'Raleway', system-ui, sans-serif);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--matu-grey, #6b6b6b);
}
.matu-social__sep::before,
.matu-social__sep::after {
	content: '';
	flex: 1;
	height: 2px;
	background: var(--matu-cart-border, #e8e0f0);
}

/* Nextend usa div.nsl-container.nsl-container-block .nsl-container-buttons
   con inline-grid y un minmax(145px), que deja el botón más angosto que el
   de acceso. Hay que igualar su especificidad para poder estirarlo. */
.matu-social div.nsl-container { text-align: center; }
.matu-social div.nsl-container.nsl-container-block .nsl-container-buttons {
	display: block;
	grid-template-columns: none;
	padding: 0;
}
.matu-social div.nsl-container .nsl-container-buttons a {
	display: block;
	width: 100%;
	max-width: none;
}

.matu-social .nsl-button.nsl-button-default {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: .78em 1.4em;
	border: 2px solid var(--matu-black, #0c0c0c);
	border-radius: 999px;
	background: var(--matu-white, #fff) !important;
	box-shadow: 0 3px 0 var(--matu-black, #0c0c0c);
	transition: transform .12s ease, box-shadow .12s ease;
}
.matu-social .nsl-button.nsl-button-default:hover,
.matu-social .nsl-container-buttons a:focus-visible .nsl-button.nsl-button-default {
	transform: translateY(3px);
	box-shadow: 0 0 0 var(--matu-black, #0c0c0c);
}
.matu-social .nsl-container-buttons a:focus-visible {
	outline: 3px solid var(--matu-pink, #ff82e0);
	outline-offset: 3px;
	border-radius: 999px;
}

/* Nextend le pone flex: 1 1 auto al label, así que en un botón ancho
   el texto se centra solo y el logo queda desterrado a la izquierda.
   Con 0 1 auto el par logo+texto viaja junto al centro. */
.matu-social .nsl-button-label-container {
	flex: 0 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--matu-font-body, 'Raleway', system-ui, sans-serif) !important;
	font-size: .93rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--matu-black, #0c0c0c) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.matu-social .nsl-button-svg-container {
	margin: 0 .55rem 0 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
}
.matu-social .nsl-button-svg-container svg { width: 20px; height: 20px; }

/* ---- Móvil ---- */
@media (max-width: 782px) {
	.woocommerce-account .u-columns .col-1,
	.woocommerce-account .u-columns .col-2 {
		box-shadow: 3px 3px 0 var(--matu-black, #0c0c0c);
	}
}
/* Debajo de 560px la tarjeta ronda los 300px útiles: partida en dos,
   cada campo quedaría en ~137px. Se apilan. */
@media (max-width: 560px) {
	.matu-form-duo { grid-template-columns: 1fr; gap: 0; }
	.woocommerce-account .u-columns .col-1,
	.woocommerce-account .u-columns .col-2 { padding: 1.35rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.matu-social .nsl-button.nsl-button-default { transition: none; }
	.matu-social .nsl-button.nsl-button-default:hover { transform: none; }
}