/*
 * SGM Lost Password UI — card centrada para /mi-cuenta/lost-password/
 * (vista "pedir reset" y vista "nueva contraseña", ambas nativas de
 * WooCommerce). Iter UI lost-password (2026-07-20).
 *
 * DIAGNÓSTICO (ver class-sgm-lostpw-ui.php + NOTES.md para el detalle
 * completo): el default de WooCommerce/tema deja el form clavado a la
 * izquierda del viewport, sin card, sin título, con el botón negro genérico
 * del kit, y en la vista "nueva contraseña" los 2 campos van en columnas
 * float 47%/47% que quedan DESNIVELADAS cuando el segundo label ("Volvé a
 * ingresar tu nueva contraseña") wrappea a 2 líneas.
 *
 * SCOPE: body.woocommerce-lost-password — body class NATIVA de WooCommerce
 * (WC_Query::add_body_class(), via is_wc_endpoint_url('lost-password')),
 * confirmada presente en las 3 variantes del endpoint (pedir reset, nueva
 * contraseña, reset-link-sent) con Playwright en el clon 2026-07-20. No hizo
 * falta agregar una body class propia por filtro body_class.
 *
 * SIN gate de rol: mayorista, retail y guest ven la misma card (pedido
 * explícito de Yago 2026-07-20).
 *
 * Tokens: MISMOS valores que assets/css/sgm-landing.css (panel derecho del
 * portal /mayoristas) — no se reusa ese archivo entero (trae @font-face
 * propia, layout de 2 paneles, tabs, etc. que no aplican a este endpoint),
 * se reusan los VALORES de paleta:
 *   Fondo card   : #F5F2EC      Tinta        : #2B2521
 *   Acento focus : #C6855F      Texto mid    : #766C61
 *   Muted/labels : #8A8074      Borde inputs : #D8D1C4
 *   Botón fondo  : #2B2521 / texto #F5F2EC    Botón hover  : #3d352d
 *
 * !important en color/fondo/borde de inputs y botón: refuerzo defensivo —
 * mismo patrón que enqueue_checkout_notice_css() de class-sgm-checkout.php
 * (el tema es un block theme con clase .wp-element-button que puede pisar
 * background/color de <button> con reglas de especificidad baja pero
 * cargadas después). Barato y evita depender del orden de carga.
 */

/* ── Card ─────────────────────────────────────────────────────────────── */
/*
 * FIX 2026-07-20b (delta del cerebro): en desktop la card quedaba con ~300px
 * de aire muerto debajo del contenido. Causa raíz REAL (confirmada con CDP
 * `CSS.getMatchedStylesForNode` — no era el tema): este MISMO plugin ya trae
 * `assets/css/sgm-myaccount.css` (encolado por `SGM_My_Account` en
 * `is_account_page()`, que también es TRUE para el endpoint lost-password)
 * con un mecanismo de sticky-footer preexistente:
 *   `body.woocommerce-account{display:flex;flex-direction:column;
 *   min-height:100vh}` + `body.woocommerce-account > div.woocommerce{flex:1
 *   0 auto}` (el resto de las cuentas — dashboard, pedidos — SÍ necesitan que
 *   `.woocommerce` crezca para empujar el footer, y ESO está bien para esas
 *   páginas). Ese selector (`body.woocommerce-account > div.woocommerce`,
 *   con un `div` de tipo + 2 clases) tiene MÁS especificidad que
 *   `body.woocommerce-lost-password .woocommerce` (2 clases, sin tipo) — por
 *   eso mi primer intento de `flex-grow:0` sin `!important` NO se aplicaba,
 *   sin importar el orden de carga.
 *
 * Fix: se desacopla "crecer para empujar el footer" de "look de la card"
 * SOLO en este endpoint. La card ya NO crece (`flex-grow:0 !important`,
 * hugs su contenido); el footer se pega abajo igual con `margin-top:auto`
 * (técnica flexbox estándar, no depende de que ningún hermano crezca) — el
 * sobrante de espacio queda con el fondo de PÁGINA (blanco), no el de la
 * card. Scope exclusivo de `body.woocommerce-lost-password`: el resto de
 * `/mi-cuenta/` (dashboard, pedidos, etc.) sigue con el `flex:1 0 auto` de
 * `sgm-myaccount.css` intacto, sin ningún cambio.
 */
body.woocommerce-lost-password .woocommerce {
	display: block;
	box-sizing: border-box;
	flex-grow: 0 !important;
	flex-shrink: 1 !important;
	flex-basis: auto !important;
	max-width: 560px;
	width: calc(100% - 2rem);
	margin: 3rem auto 4rem;
	padding: 40px 36px;
	background-color: #F5F2EC;
	border-radius: 8px;
}

/* Footer pegado abajo sin depender de que .woocommerce crezca (ver nota de
   arriba) — scoped a este endpoint únicamente, no toca sgm-myaccount.css. */
body.woocommerce-lost-password footer.elementor-location-footer,
body.woocommerce-lost-password [data-elementor-type="footer"] {
	margin-top: auto !important;
}

/* Wrapper nativo de notices — bloque full-width dentro de la card, arriba
   del título/form (ya lo era en el DOM antes que este CSS existiera). */
body.woocommerce-lost-password .woocommerce-notices-wrapper {
	display: block;
	width: 100%;
}

/* ── Título inyectado por PHP (SGM_Lostpw_UI::render_heading_*) ─────────── */
body.woocommerce-lost-password .sgm-lostpw-heading {
	font-size: 1.5rem;
	font-weight: 500;
	color: #2B2521;
	margin: 0 0 1.25rem;
	line-height: 1.25;
}

/* ── Form ─────────────────────────────────────────────────────────────── */
body.woocommerce-lost-password .woocommerce form.lost_reset_password {
	display: block;
	width: 100%;
}

/* Párrafo de instrucciones ("¿Perdiste tu contraseña?..." / "Ingresá una
   nueva contraseña.") — primer <p> del form, antes de los form-row. */
body.woocommerce-lost-password .woocommerce form.lost_reset_password > p:first-child {
	color: #766C61;
	font-size: 0.92rem;
	line-height: 1.6;
	margin: 0 0 1.5rem;
}

/* Matar el layout 2 columnas (float 47%/47%, woocommerce-layout.css) de la
   vista "nueva contraseña": apilar full-width SIEMPRE, no solo en mobile —
   pedido explícito de Yago (los 2 campos de contraseña siempre uno debajo
   del otro, cualquier tamaño de viewport). */
body.woocommerce-lost-password .woocommerce .form-row,
body.woocommerce-lost-password .woocommerce .form-row-first,
body.woocommerce-lost-password .woocommerce .form-row-last {
	float: none !important;
	width: 100% !important;
	margin: 0 0 1.1rem !important;
	padding: 0 !important;
	clear: both;
}

body.woocommerce-lost-password .woocommerce .form-row:last-of-type {
	margin-bottom: 0.4rem !important;
}

body.woocommerce-lost-password .woocommerce label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: #8A8074;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
	line-height: 1.3;
}

body.woocommerce-lost-password .woocommerce label .required {
	color: #8A8074;
}

/* ── Inputs — mismo subrayado que el panel derecho de /mayoristas ───────── */
body.woocommerce-lost-password .woocommerce input[type="text"],
body.woocommerce-lost-password .woocommerce input[type="email"],
body.woocommerce-lost-password .woocommerce input[type="password"] {
	width: 100% !important;
	box-sizing: border-box;
	padding: 9px 2px !important;
	border: none !important;
	border-bottom: 1px solid #D8D1C4 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	font-size: 15px;
	color: #2B2521 !important;
	transition: border-bottom-color 0.18s;
	outline: none;
	-webkit-appearance: none;
	margin: 0 !important;
}

/* Espacio para el ícono mostrar/ocultar contraseña (WooCommerce ya lo
   posiciona absolute, ver .show-password-input abajo). */
body.woocommerce-lost-password .woocommerce input[type="password"] {
	padding-right: 2.4rem !important;
}

body.woocommerce-lost-password .woocommerce input[type="text"]:focus,
body.woocommerce-lost-password .woocommerce input[type="email"]:focus,
body.woocommerce-lost-password .woocommerce input[type="password"]:focus {
	border-bottom-color: #C6855F !important;
}

/* Toggle mostrar/ocultar contraseña — WooCommerce ya lo centra verticalmente
   (.password-input{position:relative}, .show-password-input{position:
   absolute;top:50%;transform:translateY(-50%)} en woocommerce-layout.css),
   confirmado con Playwright que el ícono queda perfectamente centrado
   respecto de su propio input incluso en el layout default — el "flotando"
   del diagnóstico era el desnivel entre los 2 campos, no un bug del ícono en
   sí. Solo se reancla el offset derecho para la nueva altura/padding del
   input. */
body.woocommerce-lost-password .woocommerce .password-input {
	position: relative;
	display: block;
}

body.woocommerce-lost-password .woocommerce .show-password-input {
	right: 0.15rem;
}

/* ── Botones ("Restablecer contraseña" / "Guardar") ─────────────────────── */
body.woocommerce-lost-password .woocommerce button.woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #2B2521 !important;
	color: #F5F2EC !important;
	border: none !important;
	border-radius: 4px;
	padding: 13px 2rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s, color 0.18s;
}

body.woocommerce-lost-password .woocommerce button.woocommerce-Button:hover,
body.woocommerce-lost-password .woocommerce button.woocommerce-Button:focus {
	background-color: #3d352d !important;
	color: #F5F2EC !important;
}

/* ── Estados: éxito (reset-link-sent) y error (key inválida / passwords
   distintos) — estilados dentro del scope para que no queden crudos sobre
   la card.
   NOTA (verificado 2026-07-20 con Playwright en el clon): esta versión de
   WooCommerce (10.7) renderiza los avisos de este endpoint con el
   componente de blocks .wc-block-components-notice-banner (con variantes
   .is-error/.is-success/.is-warning/.is-info) INCLUSO en el template
   clásico — NO con el markup viejo <ul class="woocommerce-error">/<div
   class="woocommerce-message"> (se dejan esas reglas también, por si algún
   estado de este mismo endpoint cae en el path clásico — defensivo, cero
   costo si no matchean). ────────────────────────────────────────────────── */
body.woocommerce-lost-password .woocommerce-message,
body.woocommerce-lost-password .woocommerce-error {
	display: block;
	background: #EFEAE0;
	border: 1px solid #E2DCD0;
	color: #2B2521;
	border-radius: 4px;
	padding: 0.9rem 1.1rem;
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0 0 1.25rem;
	list-style: none;
}

body.woocommerce-lost-password .woocommerce-error {
	background: #fdf2f2;
	border-left: 3px solid #c96060;
	color: #9e3a3a;
}

body.woocommerce-lost-password .woocommerce-error li {
	margin: 0;
	padding: 0;
}

body.woocommerce-lost-password .woocommerce-error li + li {
	margin-top: 0.4rem;
}

/* Notice banner real de este endpoint (WC blocks component). */
body.woocommerce-lost-password .wc-block-components-notice-banner {
	align-items: center;
	border-radius: 4px !important;
	margin: 0 0 1.25rem !important;
	padding: 0.9rem 1.1rem !important;
	font-size: 0.9rem;
	font-family: inherit;
	line-height: 1.5;
}

body.woocommerce-lost-password .wc-block-components-notice-banner.is-error {
	background-color: #fdf2f2 !important;
	border-color: #c96060 !important;
	color: #9e3a3a !important;
}

body.woocommerce-lost-password .wc-block-components-notice-banner.is-error > svg {
	background-color: #c96060 !important;
}

body.woocommerce-lost-password .wc-block-components-notice-banner.is-success {
	background-color: #EFEAE0 !important;
	border-color: #D8D1C4 !important;
	color: #2B2521 !important;
}

body.woocommerce-lost-password .wc-block-components-notice-banner.is-success > svg {
	background-color: #C6855F !important;
}

body.woocommerce-lost-password .wc-block-components-notice-banner.is-warning,
body.woocommerce-lost-password .wc-block-components-notice-banner.is-info {
	background-color: #EFEAE0 !important;
	border-color: #D8D1C4 !important;
	color: #766C61 !important;
}

body.woocommerce-lost-password .wc-block-components-notice-banner.is-warning > svg,
body.woocommerce-lost-password .wc-block-components-notice-banner.is-info > svg {
	background-color: #8A8074 !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────
   Los campos ya son full-width siempre (regla de arriba, sin @media) — acá
   solo se ajustan el padding/margen de la card para pantallas chicas. */
@media (max-width: 600px) {
	body.woocommerce-lost-password .woocommerce {
		padding: 24px 16px;
		margin: 1.5rem auto 2.5rem;
		width: calc(100% - 1.5rem);
	}
}