/**
 * Droguemar — Acceso y registro v2 (dg-acceso.css).
 * Solo se encola en Mi cuenta para visitantes sin sesión (inc/acceso.php).
 * Paleta y componentes según el mockup aprobado el 27-08-2026.
 */

body.dm-acceso {
	--dm-rojo: #DE0100;
	--dm-rojo-oscuro: #B50100;
	--dm-tinta: #111213;
	--dm-texto: #3D4149;
	--dm-suave: #8A8F98;
	--dm-borde: #D2D6DC;
	--dm-borde-suave: #E7E9EC;
	--dm-fondo: #F6F6F7;

	margin: 0;
	min-height: 100vh;
	overflow-x: clip;
	display: flex;
	flex-direction: column;
	background: var(--dm-fondo);
	color: var(--dm-texto);
	font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
}

/* ── Cabecera mínima ── */
body.dm-acceso .dm-acceso__cabecera {
	background: #FFFFFF;
	border-bottom: 1px solid var(--dm-borde-suave);
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}
/* Logotipo centrado sobre la tarjeta */
body.dm-acceso .dm-acceso__logotipo { display: block; line-height: 0; margin-bottom: 26px; }
body.dm-acceso .dm-acceso__logotipo img { height: 60px; width: auto; display: block; }
body.dm-acceso .dm-acceso__volver {
	font-size: 13px;
	font-weight: 500;
	color: var(--dm-suave);
	text-decoration: none;
	white-space: nowrap;
}
body.dm-acceso .dm-acceso__volver:hover { color: var(--dm-tinta); }

/* ── Tarjeta central ── */
body.dm-acceso .dm-acceso__principal {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 44px 20px 32px;
}
body.dm-acceso .dm-tarjeta {
	background: #FFFFFF;
	width: 100%;
	max-width: 420px;
	border: 1px solid var(--dm-borde-suave);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(17, 18, 19, 0.04), 0 8px 24px rgba(17, 18, 19, 0.05);
	padding: 36px 32px 28px;
	box-sizing: border-box;
}
body.dm-acceso .dm-tarjeta *,
body.dm-acceso .dm-tarjeta *::before,
body.dm-acceso .dm-tarjeta *::after { box-sizing: border-box; }

body.dm-acceso .dm-vista[hidden] { display: none; }

body.dm-acceso .dm-titulo {
	font-size: 22px;
	font-weight: 700;
	color: var(--dm-tinta);
	letter-spacing: -0.01em;
	text-align: center;
	text-wrap: balance;
	margin: 0 0 8px;
	line-height: 1.3;
}
body.dm-acceso .dm-sub {
	font-size: 14px;
	color: var(--dm-suave);
	text-align: center;
	text-wrap: balance;
	margin: 0 0 24px;
}
body.dm-acceso .dm-sub strong { color: var(--dm-tinta); }

body.dm-acceso .dm-atras {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--dm-suave);
	text-decoration: none;
	margin-bottom: 14px;
}
body.dm-acceso .dm-atras:hover { color: var(--dm-tinta); }

/* ── Botones y enlaces ── */
body.dm-acceso .dm-boton,
body.dm-acceso .dm-tarjeta button[type="submit"],
body.dm-acceso .dm-tarjeta .woocommerce-Button {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	padding: 13px 20px;
	border-radius: 4px;
	background: var(--dm-tinta);
	color: #FFFFFF;
	border: 1px solid var(--dm-tinta);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	text-align: center;
	line-height: 1.3;
	margin: 6px 0 0;
	transition: background 120ms ease;
}
body.dm-acceso .dm-boton:hover,
body.dm-acceso .dm-tarjeta button[type="submit"]:hover,
body.dm-acceso .dm-tarjeta .woocommerce-Button:hover {
	background: #2A2C2F;
	color: #FFFFFF;
}
body.dm-acceso .dm-boton.enviando,
body.dm-acceso .dm-tarjeta button[type="submit"].enviando { opacity: 0.65; pointer-events: none; }

body.dm-acceso .dm-enlace {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--dm-rojo);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
body.dm-acceso .dm-enlace:hover { color: var(--dm-rojo-oscuro); }
body.dm-acceso .dm-enlace--menor { font-size: 13px; }

body.dm-acceso .dm-separador {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--dm-suave);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
body.dm-acceso .dm-separador::before,
body.dm-acceso .dm-separador::after { content: ""; flex: 1; height: 1px; background: var(--dm-borde-suave); }

body.dm-acceso .dm-centrado { text-align: center; margin: 0; }
body.dm-acceso .dm-cambio { text-align: center; font-size: 14px; color: var(--dm-texto); margin: 20px 0 0; }
body.dm-acceso .dm-cambio a { color: var(--dm-rojo); }

body.dm-acceso .dm-tarjeta__pie {
	border-top: 1px solid var(--dm-borde-suave);
	margin-top: 26px;
	padding-top: 16px;
	text-align: center;
	font-size: 13px;
	color: var(--dm-suave);
}
body.dm-acceso .dm-tarjeta__pie a {
	color: var(--dm-rojo);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Formularios ── */
body.dm-acceso .dm-form { margin: 0; }
body.dm-acceso .dm-campo { margin: 0 0 16px; }
body.dm-acceso .dm-campo label,
body.dm-acceso .dm-tarjeta .woocommerce-form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--dm-tinta);
	margin-bottom: 6px;
}
body.dm-acceso .dm-campo__caja { position: relative; display: block; }
body.dm-acceso .dm-tarjeta input[type="text"],
body.dm-acceso .dm-tarjeta input[type="email"],
body.dm-acceso .dm-tarjeta input[type="password"] {
	width: 100%;
	height: 46px;
	font-family: inherit;
	font-size: 16px;
	color: var(--dm-tinta);
	background: #FFFFFF;
	border: 1px solid var(--dm-borde);
	border-radius: 5px;
	padding: 0 14px;
	margin: 0;
	box-shadow: none;
}
body.dm-acceso .dm-tarjeta input::placeholder { color: #B0B4BB; }
body.dm-acceso .dm-tarjeta input[type="text"]:focus,
body.dm-acceso .dm-tarjeta input[type="email"]:focus,
body.dm-acceso .dm-tarjeta input[type="password"]:focus {
	outline: none;
	border-color: var(--dm-rojo);
	box-shadow: 0 0 0 3px rgba(222, 1, 0, 0.10);
}
body.dm-acceso .dm-ojo {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--dm-suave);
}
body.dm-acceso .dm-ojo:hover { color: var(--dm-tinta); }
body.dm-acceso .dm-campo__caja input { padding-right: 76px; }

body.dm-acceso .dm-requisitos { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
body.dm-acceso .dm-requisito {
	font-size: 12px;
	font-weight: 500;
	color: var(--dm-suave);
	background: var(--dm-fondo);
	border: 1px solid var(--dm-borde-suave);
	border-radius: 999px;
	padding: 3px 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
body.dm-acceso .dm-requisito::before { content: "○"; font-size: 10px; }
body.dm-acceso .dm-requisito.ok { color: #0E7A3C; background: #EDF7F0; border-color: #CBE7D5; }
body.dm-acceso .dm-requisito.ok::before { content: "✓"; }

/* Casillas dibujadas a medida: fondo blanco, borde negro, aspa roja. */
body.dm-acceso .dm-casilla {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 400;
	color: var(--dm-texto);
	cursor: pointer;
}
body.dm-acceso .dm-casilla input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	cursor: pointer;
	background: #FFFFFF;
	border: 1.5px solid var(--dm-tinta);
	border-radius: 3px;
	display: inline-grid;
	place-content: center;
}
body.dm-acceso .dm-casilla input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	transform: scale(0);
	background: var(--dm-rojo);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
body.dm-acceso .dm-casilla input[type="checkbox"]:checked::before { transform: scale(1); }
body.dm-acceso .dm-casilla a { color: var(--dm-rojo); font-weight: 600; }

body.dm-acceso .dm-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 18px;
}
body.dm-acceso .dm-fila .dm-casilla { margin: 0; align-items: center; }

/* El cajón de categorías del header-v2 no pinta nada en esta pantalla
   (también se quita su hook; esto es el cinturón y los tirantes). */
body.dm-acceso .dgv2-extras { display: none !important; }

/* El tema fija scrollbar-gutter:stable en <html>, que reserva 15px muertos
   a la derecha aunque no haya scroll; ese hueco (el gutter) muestra el blanco
   del navegador y NO se puede pintar con background del <html>. En esta
   pantalla lo desactivamos: sin reserva, el fondo llega al borde. */
html:has(body.dm-acceso) {
	scrollbar-gutter: auto !important;
	background: var(--dm-fondo, #F6F6F7);
}

/* Botón "Continua con Google" de Nextend, integrado en la tarjeta:
   ancho completo, centrado y con la misma geometría que nuestros botones. */
body.dm-acceso .dm-tarjeta .nsl-container-block { margin: 0; width: 100%; }
body.dm-acceso .dm-tarjeta .nsl-container-block .nsl-container-buttons {
	display: flex;
	width: 100%;
	max-width: none;
	padding: 0;
}
body.dm-acceso .dm-tarjeta .nsl-container-buttons a {
	width: 100%;
	max-width: none;
	display: block;
	margin: 0;
}
body.dm-acceso .dm-tarjeta .nsl-button {
	width: 100%;
	min-height: 48px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: none !important;
	border: 1px solid var(--dm-borde);
	border-radius: 4px;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}
body.dm-acceso .dm-tarjeta .nsl-button:hover {
	background: #FAFAFA !important;
	border-color: #B7BCC3;
}
body.dm-acceso .dm-tarjeta .nsl-button-svg-container {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0;
	line-height: 0;
}
body.dm-acceso .dm-tarjeta .nsl-button-label-container {
	flex: 0 0 auto !important;
	width: auto !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--dm-tinta) !important;
	margin: 0 !important;
	padding: 0 0 0 8px !important;
	text-align: center;
}

/* Turnstile en modo invisible no muestra nada; si Cloudflare decidiera
   desafiar, que el widget respire. */
body.dm-acceso .dm-form .cf-turnstile { margin: 0 0 10px; }

/* Honeypot: fuera de pantalla, nunca display:none (los bots lo detectan). */
body.dm-acceso .dm-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ── Vista "confirma tu e-mail" ── */
body.dm-acceso .dm-sobre {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #FCE9E8;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px auto 18px;
}

/* ── Avisos de WooCommerce dentro de la tarjeta ── */
body.dm-acceso .dm-tarjeta .woocommerce-error,
body.dm-acceso .dm-tarjeta .woocommerce-message,
body.dm-acceso .dm-tarjeta .woocommerce-info,
body.dm-acceso .dm-tarjeta .wc-block-components-notice-banner {
	list-style: none;
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 13.5px;
	background: var(--dm-fondo);
	color: var(--dm-texto);
	border: 1px solid var(--dm-borde-suave);
	border-left: 3px solid var(--dm-suave);
}
body.dm-acceso .dm-tarjeta .woocommerce-error {
	background: #FDF0EF;
	border-color: #F5D2D0;
	border-left-color: var(--dm-rojo);
}
body.dm-acceso .dm-tarjeta .woocommerce-message {
	background: #EDF7F0;
	border-color: #CBE7D5;
	border-left-color: #0E7A3C;
}
body.dm-acceso .dm-tarjeta .woocommerce-error li,
body.dm-acceso .dm-tarjeta .woocommerce-message li,
body.dm-acceso .dm-tarjeta .woocommerce-info li { margin: 0; padding: 0; }
body.dm-acceso .dm-tarjeta .woocommerce-error li + li { margin-top: 6px; }
body.dm-acceso .dm-tarjeta .woocommerce-error a,
body.dm-acceso .dm-tarjeta .woocommerce-message a,
body.dm-acceso .dm-tarjeta .woocommerce-info a { color: var(--dm-rojo); font-weight: 600; }

/* ── Recuperar contraseña (plantillas estándar de WooCommerce) ── */
body.dm-acceso .dm-tarjeta .lost_reset_password { margin: 0; }
body.dm-acceso .dm-tarjeta .lost_reset_password p:first-child {
	font-size: 14px;
	color: var(--dm-suave);
	text-align: center;
	margin: 0 0 20px;
}
body.dm-acceso .dm-tarjeta .woocommerce-form-row { margin: 0 0 16px; padding: 0; width: 100%; float: none; }
body.dm-acceso .dm-tarjeta .clear { clear: both; }

/* ── Pie mínimo ── */
body.dm-acceso .dm-acceso__pie {
	padding: 20px;
	text-align: center;
	font-size: 12px;
	color: var(--dm-suave);
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}
body.dm-acceso .dm-acceso__pie a { color: var(--dm-suave); text-decoration: none; }
body.dm-acceso .dm-acceso__pie a:hover { color: var(--dm-tinta); text-decoration: underline; }

/* Accesibilidad y detalles */
body.dm-acceso a:focus-visible,
body.dm-acceso button:focus-visible,
body.dm-acceso input:focus-visible { outline: 2px solid var(--dm-rojo); outline-offset: 2px; }

@media (max-width: 480px) {
	body.dm-acceso .dm-acceso__principal { padding: 20px 0 24px; }
	body.dm-acceso .dm-tarjeta {
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding: 24px 20px;
		max-width: none;
	}
	body.dm-acceso .dm-acceso__logotipo { margin-bottom: 18px; }
	body.dm-acceso .dm-acceso__logotipo img { height: 46px; }
}