/*
 * wps-style.css — "el standard" pedido por Deiby.
 *
 * Paleta y componentes replicados de los estilos reales (StyleSheet.create) de la app
 * Conexión Natural: verde marca #0d522c (headers, footer, botones primarios), verde
 * secundario #517d06 (paneles de detalle de reserva/QR), acento #00522b ("Ver más"),
 * gris de texto #555/#666/#999/#333, error rojo, éxito verde. Botones "pill" (borderRadius
 * grande) igual que TouchableOpacity con borderRadius: rw(6/7/8) en la app.
 *
 * MOBILE-FIRST: las reglas sin @media son la base para pantallas angostas (téngase en
 * cuenta el punto de partida real: un teléfono, no un navegador de escritorio). El único
 * ajuste "hacia arriba" es el marco visual de escritorio/tablet al final del archivo
 * (@media min-width), que enmarca la tarjeta de 480px cuando sobra espacio horizontal —
 * nunca se invierte esa lógica (no hay reglas de escritorio como base con overrides para
 * achicar en móvil).
 *
 * Todo el HTML que consume estas clases pasa por esc_html/esc_attr/esc_url en PHP — este
 * archivo es solo presentación, no contiene datos dinámicos.
 */

*,
*::before,
*::after {
	box-sizing: border-box; /* evita overflow horizontal en pantallas angostas al combinar padding + width:100% */
}

html {
	-webkit-text-size-adjust: 100%; /* evita que iOS reescale el texto en landscape */
	text-size-adjust: 100%;
}

:root {
	--wps-verde: #0d522c;
	--wps-verde-secundario: #517d06;
	--wps-verde-acento: #00522b;
	--wps-verde-claro: #6eb42a;
	--wps-gris-oscuro: #333;
	--wps-gris: #555;
	--wps-gris-medio: #666;
	--wps-gris-claro: #999;
	--wps-borde: #ccc;
	--wps-error: #dc3545;
	--wps-exito: #28a745;
	--wps-fondo: #fff;
}

.wps-app {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--wps-gris-oscuro);
	background: var(--wps-fondo);
	/* v0.2.73 (pedido de Deiby: "el crédito de Wolk debe ir SIEMPRE al fondo, justo antes del nav
	   inferior, no flotando tras el último contenido"): la app es una columna flex de alto completo;
	   `.wps-main` crece (flex:1) y empuja la franja de crédito al fondo aunque el contenido sea corto.
	   Antes había `padding-bottom:5rem` para el nav fijo — ese despeje ahora lo da la propia franja. */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden; /* red de seguridad contra overflow puntual en pantallas < 340px */
}

/* ── HEADER ─────────────────────────────────────────────────────────── */
.wps-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: var(--wps-verde);
	color: #fff;
	padding: 1.25rem 1.25rem 1rem;
	border-bottom-left-radius: 0.6rem;
	border-bottom-right-radius: 0.6rem;
	min-height: 3.5rem;
}
.wps-header-back {
	color: #fff;
	text-decoration: none;
	font-size: 1.6rem;
	line-height: 1;
	flex-shrink: 0;
}
.wps-header-titulos {
	flex: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.wps-header-subtitulo {
	font-size: 0.85rem;
	opacity: 0.85;
}
.wps-header-titulo {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0;
	color: #fff;
}
.wps-header-perfil {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.wps-header-foto {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.2);
}
.wps-header-saludo {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.wps-header-saludo span {
	font-size: 0.8rem;
	opacity: 0.85;
}
.wps-header-saludo strong {
	font-size: 1.05rem;
}
.wps-header-carrito {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}
.wps-header-carrito .wps-icon,
.wps-header-carrito .wps-icon-fallback {
	width: 1.75rem;
	height: 1.75rem;
	filter: brightness(0) invert(1); /* icono blanco sobre header verde */
}
.wps-carrito-badge {
	position: absolute;
	top: -0.4rem;
	right: -0.5rem;
	background: var(--wps-error);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 1.1rem;
	height: 1.1rem;
	border-radius: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.25rem;
}

/* ── FOOTER / NAV INFERIOR ──────────────────────────────────────────── */
.wps-footer {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 480px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: var(--wps-verde);
	padding: 0.6rem 0.5rem 0.5rem;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
	z-index: 100;
}
.wps-footer-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-height: 2.75rem; /* objetivo táctil mínimo */
	color: #fff;
	text-decoration: none;
	font-size: 0.7rem;
	flex: 1;
}
.wps-footer-item .wps-icon,
.wps-footer-item .wps-icon-fallback {
	width: 1.5rem;
	height: 1.5rem;
	filter: brightness(0) invert(1);
}
.wps-footer-credito {
	text-align: center;
	font-size: 0.7rem;
	color: var(--wps-gris-claro);
	/* v0.2.73: se ancla al fondo de la columna flex (margin-top:auto) y deja debajo el despeje
	   del nav inferior fijo (~4.5rem). En pantallas con mucho contenido, margin-top:auto colapsa
	   a 0 y la franja fluye tras el contenido, con ese mismo despeje para no quedar tapada. */
	margin-top: auto;
	padding: 0.9rem 1rem;
	margin-bottom: 4.6rem;
	flex-shrink: 0;
}
/* Login / Registro-exitoso no tienen nav inferior: sin el despeje de 4.6rem. */
.wps-app--sin-header .wps-footer-credito { margin-bottom: 1.25rem; }
.wps-footer-credito a {
	color: var(--wps-verde);
	text-decoration: underline;
}
/* v0.2.18: pie de logos de aliados/sindicato en el login (ADR-007) — layout dinámico
   según cuántos logos configuró el admin (ver WPS_Assets::login_footer_logos_html()). */
.wps-login-footer-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin: 1.5rem 0 0.5rem;
}
.wps-login-footer-logos--uno {
	justify-content: center;
}
.wps-login-footer-logos--dos {
	justify-content: space-evenly;
}
.wps-login-footer-logo {
	max-height: 3rem;
	max-width: 8rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ── CONTENIDO / MENSAJES ───────────────────────────────────────────── */
.wps-main {
	padding: 1.25rem 1.25rem 1rem;
	/* v0.2.73: crece para empujar la franja de crédito al fondo de la columna flex de .wps-app. */
	flex: 1 0 auto;
}
.wps-mensaje {
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
	/* v0.2.69: los avisos de error/éxito entran con un desliz sutil para que se noten. */
	animation: wps-mensaje-entra 0.28s ease-out both;
}
@keyframes wps-mensaje-entra {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.wps-mensaje { animation: none; }
}
.wps-mensaje.wps-error { background: #fdecea; color: var(--wps-error); border: 1px solid #f5c2c7; }
.wps-mensaje.wps-info  { background: #eef6f0; color: var(--wps-verde); border: 1px solid #cfe6d6; }
.wps-mensaje.wps-ok    { background: #e9f7ec; color: var(--wps-exito); border: 1px solid #bfe6c8; }

/* v0.2.117 — validación del registro en español (reemplaza los mensajes nativos del navegador). */
.wps-reg-error-msg { display: block; margin: 0.35rem 0 0.2rem; background: #fdecea; color: #b02a1f; border: 1px solid #f3b6b0; border-radius: 0.5rem; padding: 0.4rem 0.6rem; font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.wps-campo-invalido input,
.wps-campo-invalido textarea,
.wps-campo-invalido select,
.wps-campo-invalido .wps-geo-trigger { border: 2px solid #e0402f !important; }

.wps-icon-fallback {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
}

/* ── FORMULARIOS (auth + resto) ─────────────────────────────────────── */
.wps-form p,
.wps-campo {
	margin-bottom: 1rem;
}
.wps-form label,
.wps-campo label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wps-gris-oscuro);
	margin-bottom: 0.3rem;
}
.wps-form input[type="text"],
.wps-form input[type="email"],
.wps-form input[type="password"],
.wps-form input[type="tel"],
.wps-form input[type="number"],
.wps-form select,
.wps-form textarea,
.wps-campo input,
.wps-campo select,
.wps-campo textarea {
	width: 100%;
	border: 1px solid #000;
	border-radius: 1rem;
	padding: 0.6rem 0.9rem;
	font-size: 1rem; /* mínimo 16px: evita el auto-zoom de Safari iOS al enfocar el campo */
	min-height: 2.75rem; /* ~44px, objetivo táctil mínimo recomendado (WCAG 2.5.5) */
	background: #fff;
}
.wps-form textarea { border-radius: 0.6rem; min-height: 4rem; }
.wps-form button,
.wps-btn {
	display: inline-block;
	background: var(--wps-verde);
	color: #fff;
	border: none;
	border-radius: 2rem;
	padding: 0.75rem 2rem;
	min-height: 2.75rem; /* objetivo táctil mínimo */
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
.wps-form button:disabled,
.wps-btn:disabled,
.wps-btn.wps-btn-disabled {
	/* v0.2.43: antes solo cubría botones dentro de .wps-form — el submit de
	   .wps-booking-form ("RESERVAR") no tenía ningún feedback visual al
	   deshabilitarse durante el envío (ver DECISIONES.md ADR-025). */
	background: var(--wps-gris-claro);
	cursor: not-allowed;
}
.wps-btn-block { display: block; width: 100%; }
.wps-btn-secundario { background: #fff; color: var(--wps-verde); border: 2px solid var(--wps-verde); }
.wps-btn-center { display: block; margin-left: auto; margin-right: auto; }
.wps-form-logout button { background: var(--wps-error); }

.wps-mi-cuenta { text-align: center; }

/* Pantalla de éxito tras registro (réplica de RegisterSuccess.tsx, hallazgo #2 del DIFF). */
.wps-registro-exito { text-align: center; padding: 1rem 0; }
.wps-registro-exito .wps-icon,
.wps-registro-exito .wps-icon-fallback { width: 5rem; height: 5rem; margin: 0 auto 1rem; }
.wps-registro-exito-titulo { color: var(--wps-verde); font-size: 1.6rem; margin-bottom: 1.25rem; }
.wps-registro-exito-caja {
	border: 2px solid var(--wps-verde);
	border-radius: 1rem;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	color: var(--wps-verde);
}
.wps-registro-exito-caja p { margin: 0 0 0.75rem; line-height: 1.4; }
.wps-registro-exito-caja p:last-child { margin-bottom: 0; }
.wps-registro-exito-gracias { color: var(--wps-verde); font-weight: 700; font-size: 1.25rem; margin-bottom: 1.5rem; line-height: 1.4; }

/* ── AUTH SIN HEADER (Login, Registro exitoso) ──────────────────────────
   v0.2.20 → v0.2.22: ver el docblock largo de WPS_Template::pagina_sin_header()
   para el historial completo de este shell (v0.2.20 se basó en el código fuente
   subido — fondo blanco; v0.2.22 revirtió a lo que muestra `Conexión Natural
   APP.pdf` cuando se miró la página completa como imagen, no solo su color de
   píxeles — fondo verde a pantalla completa). Colores muestreados directo del
   PDF con Pillow: fondo #005722, botón sólido #70B62C, texto sobre el botón
   #005722 (mismo verde del fondo, por contraste). */
.wps-app--sin-header { padding-bottom: 0; } /* v0.2.73: el espacio inferior lo maneja la franja de crédito. */
.wps-pagina-login--verde,
.wps-pagina-login--verde .wps-main { background: #005722; }
.wps-pagina-login--verde { color: #fff; }
/* v0.2.52 — CORRECCIÓN de contraste (ver DECISIONES.md ADR-030) — el crédito del pie era ilegible sobre el fondo verde.
   `.wps-footer-credito a` usa `var(--wps-verde)` (#0d522c), pensado para el fondo
   blanco del resto del portal; sobre el #005722 de esta pantalla la relación de
   contraste es de 1.05:1 (el mínimo legible para texto normal es 4.5:1), así que
   "Wolk Software©" quedaba invisible aunque el enlace seguía funcionando. Es el
   mismo problema que ya se había resuelto para `.wps-auth-titulo` — de ahí que se
   reutilice el lima #ACCB46, que sobre este fondo da 4.77:1 y pasa el mínimo.
   El rótulo "Diseñado y desarrollado por" también sube: usaba `--wps-gris-claro`
   (#999999, 3.09:1 — se leía, pero por debajo del mínimo) y pasa a #cfe3d3 (6.53:1).
   Se limita a la pantalla de login: en el resto del portal el fondo es claro y el
   verde de marca es la elección correcta. */
.wps-pagina-login--verde .wps-footer-credito { color: #cfe3d3; }
.wps-pagina-login--verde .wps-footer-credito a { color: #ACCB46; }
.wps-auth-marca { text-align: center; padding: 2rem 1.25rem 1rem; }
.wps-auth-logo {
	width: 35%;
	max-width: 140px;
	height: auto;
	margin: 0 auto;
}
.wps-auth-wordmark {
	color: #fff;
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
	margin: 0.75rem 0 0;
}
.wps-auth-titulo {
	/* Título en el tono lima/amarillo-verdoso del PDF (no el verde de marca — sobre
	   fondo verde oscuro el verde de marca casi no se lee). */
	color: #ACCB46;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	margin: 0.5rem 0 1.5rem;
}
.wps-auth-campo-password { position: relative; }
.wps-auth-campo-password input { padding-right: 2.5rem; }
/* v0.2.118 — ocultar el control nativo de "mostrar contraseña"/"limpiar" del navegador
   (Edge/IE: ::-ms-reveal / ::-ms-clear), que aparecía como un SEGUNDO ojo junto al del plugin.
   Se deja solo el ojo propio (button.wps-auth-toggle-password). */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none !important; }
/* Se califica con "button" para empatar la especificidad de ".wps-form button" (el
   botón base del standard, verde/pill/grande) y poder anular sus estilos sin
   !important — este botón es un ícono chico dentro del campo, no un CTA. */
button.wps-auth-toggle-password {
	position: absolute;
	right: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	width: auto;
	min-height: 0;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--wps-gris-claro);
	filter: grayscale(1);
}
button.wps-auth-toggle-password.wps-auth-toggle-password--activo { color: var(--wps-verde); filter: none; }
/* v0.2.84: el ojito es un SVG (igual en todos los teléfonos) y vive también en Registro y Mi perfil. */
button.wps-auth-toggle-password { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; right: 0.6rem; filter: none; color: #8a8a8a; border-radius: 50%; }
button.wps-auth-toggle-password:active { background: rgba(0, 0, 0, 0.06); }
button.wps-auth-toggle-password .wps-ojo { width: 1.35rem; height: 1.35rem; }
button.wps-auth-toggle-password .wps-ojo[hidden] { display: none; }
/* Registro (campo outline sobre verde): ojo en lima, activo en blanco. */
.wps-auth-card .wps-auth-campo--outline.wps-auth-campo-password input { padding-right: 3.2rem; }
.wps-auth-card button.wps-auth-toggle-password { color: #ACCB46; }
.wps-auth-card button.wps-auth-toggle-password.wps-auth-toggle-password--activo { color: #fff; }
.wps-auth-card button.wps-auth-toggle-password:active { background: rgba(255, 255, 255, 0.12); }
/* Mi perfil (píldora con etiqueta flotante): el ojo centrado a la derecha, el texto no se le mete debajo. */
.wps-form .wps-campo-flotante.wps-auth-campo-password input { padding-right: 3.4rem; }
.wps-campo-flotante button.wps-auth-toggle-password { right: 0.8rem; color: #8a8a8a; }
.wps-campo-flotante button.wps-auth-toggle-password.wps-auth-toggle-password--activo { color: var(--wps-verde-claro); }
.wps-auth-olvide-wrap { text-align: right; margin: -0.5rem 0 1rem; }
.wps-auth-link-olvide {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	text-decoration: none;
}
/* .wps-btn (compuesto con ".wps-form button, .wps-btn") ya trae background propio con
   la misma especificidad que un ".wps-btn-lima" suelto tendría — se califica con
   ".wps-btn" para ganarle sin necesitar !important. */
.wps-btn.wps-btn-lima {
	background: #70B62C;
	color: #005722;
}
.wps-btn.wps-btn-outline-lima {
	background: none;
	border: 1px solid #70B62C;
	color: #ACCB46;
}
.wps-auth-registro-prompt { color: rgba(255, 255, 255, 0.9); margin-top: 1.25rem; }
.wps-auth-registro-prompt a { color: #ACCB46; font-weight: 700; text-decoration: underline; }
/* Campos blancos tipo píldora (input pill), texto centrado — réplica del PDF. */
.wps-form-login input,
.wps-form-recuperar input {
	border: none;
	background: #fff;
	text-align: center;
	border-radius: 2rem;
}
/* Label accesible (lector de pantalla) pero oculto visualmente — TextInput.tsx real
   solo muestra el texto como placeholder dentro del campo, sin <label> visible.
   Patrón estándar de accesibilidad (WCAG): el campo sigue siendo anunciado por su
   nombre aunque no se vea el texto en pantalla. */
.wps-visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── REGISTRO (tarjeta verde) — v0.2.79 ──────────────────────────────────
   Réplica de la pantalla "REGISTRO" de `Conexión Natural APP.pdf`, versión
   terminada (Deiby, 2026-09-03, con captura del sitio real: "organice eso
   profesional"). Correcciones respecto a v0.2.78, todas vistas en la captura:
   - Los títulos salían en SERIF (el tema del sitio estila h1/h2): se fuerza la
     fuente de la app en todos los encabezados dentro de `.wps-app`.
   - Correo/Contraseña salían como píldora blanca y no "outline": la regla base
     `.wps-form input[type=...]` (0,2,1) le ganaba a `.wps-auth-campo--outline input`
     (0,1,1). Ahora todas las reglas de esta tarjeta usan 2 clases + elemento y van
     DESPUÉS de la base, así ganan siempre.
   - Quedaba una franja blanca vacía bajo la tarjeta y la tarjeta no llegaba al
     fondo: ahora la página entera (wrapper + main) es del color configurable y la
     tarjeta se monta sobre la franja blanca superior con sus esquinas redondeadas.
   - El logo de la franja blanca usaba la variante BLANCA (invisible sobre blanco si
     el admin la configura): usa el logo normal.
   - Se ocultan las etiquetas de ubicación/dirección (misma lógica de placeholder
     que el resto) y se agrupan bajo un segundo subtítulo "MI DIRECCIÓN".
   Colores muestreados del PDF: fondo #005722, lima #ACCB46, botón #70B62C. */
.wps-app h1, .wps-app h2, .wps-app h3, .wps-app h4 { font-family: inherit; }

.wps-pagina-registro--verde,
.wps-pagina-registro--verde .wps-main { background: #005722; } /* fallback; pagina_sin_header() lo sobreescribe con el color configurable. */
.wps-pagina-registro--verde { color: #fff; }
.wps-pagina-registro--verde .wps-main { padding: 0; }
.wps-pagina-registro--verde .wps-main > .wps-mensaje { margin: 1rem 1.25rem 0; }
.wps-pagina-registro--verde .wps-footer-credito { color: #cfe3d3; }
.wps-pagina-registro--verde .wps-footer-credito a { color: #ACCB46; }

.wps-auth-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	background: #fff;
	padding: 1.2rem 1.25rem 3rem; /* el extra de abajo queda DETRÁS de las esquinas redondeadas de la tarjeta. */
}
.wps-auth-back {
	position: absolute;
	left: 1.4rem;
	top: 2rem; /* centrado con el logo de 3.25rem que arranca en 1.2rem. */
	color: var(--wps-verde-claro);
	font-size: 1.6rem;
	line-height: 1;
	text-decoration: none;
}
.wps-auth-logo-mini { width: 3.25rem; height: auto; display: block; }
.wps-auth-card {
	background: #005722; /* fallback estático — render_registro() lo sobreescribe con el color configurable vía style="" inline. */
	color: #fff;
	border-radius: 1.75rem 1.75rem 0 0;
	margin-top: -1.75rem;
	padding: 2rem 1.5rem 1.5rem;
	position: relative;
	box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
}
.wps-auth-card .wps-auth-titulo {
	margin: 0 0 1.6rem;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 0.14em;
}
.wps-auth-subtitulo {
	color: #ACCB46;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 1rem 0.25rem;
}
.wps-auth-subtitulo--separado { margin-top: 1.6rem; }
.wps-auth-card .wps-form p { margin-bottom: 0.85rem; }
/* Campos: píldora blanca sin borde, alto cómodo, sombra suave. (2 clases + elemento
   para ganarle a `.wps-form input[type=...]`.) */
.wps-auth-card .wps-form-registro input,
.wps-auth-card .wps-form-registro select,
.wps-auth-card .wps-form-registro textarea,
.wps-auth-card .wps-form-registro button.wps-geo-trigger {
	border: none;
	background: #fff;
	border-radius: 2rem;
	min-height: 3.1rem;
	padding: 0.7rem 1.35rem;
	color: var(--wps-gris-oscuro);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
	font-size: 1rem;
	transition: box-shadow 0.15s ease;
}
.wps-auth-card .wps-form-registro input::placeholder,
.wps-auth-card .wps-form-registro textarea::placeholder { color: #7a7a7a; opacity: 1; }
.wps-auth-card .wps-form-registro input:focus,
.wps-auth-card .wps-form-registro textarea:focus,
.wps-auth-card .wps-form-registro button.wps-geo-trigger:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(172, 203, 70, 0.55), 0 3px 8px rgba(0, 0, 0, 0.16);
}
.wps-auth-card .wps-form-registro textarea { border-radius: 1.25rem; min-height: 5.5rem; resize: vertical; font-family: inherit; }
.wps-auth-card .wps-form-registro button.wps-geo-trigger .wps-geo-chevron { border-color: var(--wps-verde-claro); }
.wps-auth-card .wps-form-registro .wps-geo-trigger--vacio .wps-geo-trigger-label { color: #7a7a7a; }
/* Correo/Contraseña: variante "outline" del PDF (fondo transparente, borde y placeholder lima). */
.wps-auth-card .wps-auth-campo--outline input {
	background: transparent;
	border: 1.5px solid #70B62C;
	color: #fff;
	box-shadow: none;
}
.wps-auth-card .wps-auth-campo--outline input::placeholder { color: #ACCB46; opacity: 1; }
.wps-auth-card .wps-auth-campo--outline input:focus { box-shadow: 0 0 0 3px rgba(172, 203, 70, 0.35); }
.wps-auth-card .wps-auth-campo--outline input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px #005722 inset;
}
/* Botón: lima con texto verde oscuro (contraste muestreado del PDF), grande, con elevación. */
.wps-auth-card .wps-form-registro button[type="submit"] {
	margin-top: 0.6rem;
	background: #70B62C;
	color: #005722;
	min-height: 3.3rem;
	font-size: 1rem;
	letter-spacing: 0.12em;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wps-auth-card .wps-form-registro button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(0, 0, 0, 0.3); }
.wps-auth-card .wps-form-registro button[type="submit"]:active { transform: translateY(0); }
.wps-auth-card .wps-form-registro button[type="submit"]:disabled { background: #9db98a; color: #2f5a3b; box-shadow: none; transform: none; }
.wps-auth-card .wps-form label { color: #fff; }

/* ── HOME ────────────────────────────────────────────────────────────── */
/*
 * v0.2.21 → v0.2.22: v0.2.21 había corregido el bug de íconos invisibles
 * (blanco sobre blanco) manteniendo la grilla 2x2 de cuadros verdes que se
 * leyó en Home.tsx/IconHome.tsx (código fuente subido). v0.2.22 revierte esa
 * presentación: al mirar el PDF de referencia como imagen completa (no solo
 * muestrear su color, mismo error metodológico que en el login — ver
 * class-wps-template.php), la pantalla real de Inicio es header con saludo +
 * campana, barra "BUSCAR", y una LISTA VERTICAL de 4 tarjetas blancas
 * (ícono + etiqueta + flecha ">"). Colores muestreados del PDF con Pillow:
 * fondo de la pantalla #F5F5F5, tarjetas #fff, etiqueta gris #999.
 *
 * Los 4 PNG del catálogo (blancos, fondo transparente) se pintan de verde acá
 * vía `.wps-icon-mascara` (máscara CSS, ver WPS_Assets::icon_mascara_html())
 * en vez de mostrarse tal cual — sobre una tarjeta blanca un ícono blanco
 * seguiría siendo invisible.
 */
.wps-home-buscar {
	position: relative;
	margin-top: 0.5rem;
}
.wps-home-buscar-icono {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wps-verde-claro);
	pointer-events: none;
}
.wps-home-buscar-input {
	width: 100%;
	border: 1px solid var(--wps-verde-claro);
	border-radius: 2rem;
	padding: 0.7rem 2.5rem 0.7rem 1.25rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wps-verde-claro);
	background: #fff;
}
.wps-home-buscar-input::placeholder { color: var(--wps-verde-claro); opacity: 1; }
.wps-home-lista {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin-top: 1.5rem;
}
.wps-home-list-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #fff;
	border-radius: 1rem;
	padding: 1rem 1.25rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	color: var(--wps-gris-medio);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
/* v0.2.63: transición + elevación al pasar/tocar (look & feel pro), salvo los accesos grisados. */
.wps-home-list-item { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wps-home-list-item:not(.wps-grayed):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.wps-home-list-item:not(.wps-grayed):active { transform: translateY(0); }
.wps-home-list-label { flex: 1; }
.wps-home-list-chevron {
	color: var(--wps-gris-claro);
	font-size: 1.4rem;
	line-height: 1;
}
/* SEGURIDAD: no aplica — solo estilos visuales. Réplica de la tarjeta gris deshabilitada del PDF (accesos bloqueados por membresía, o "Información" sin URL configurada en wp-admin). */
.wps-home-list-item.wps-grayed { color: var(--wps-gris-claro); }
.wps-home-list-item.wps-grayed .wps-icon-mascara { background-color: var(--wps-gris-claro); }
.wps-home-membresia {
	margin-top: 2rem;
	text-align: center;
}
.wps-home-cta {
	display: block;
	width: 90%;
	max-width: 320px;
	margin: 0 auto;
	background: var(--wps-verde);
	color: #fff;
	border: 1px solid var(--wps-verde-claro);
	border-radius: 2rem;
	padding: 0.85rem 1.5rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
.wps-home-cta-acento { color: #f2c94c; }
/* Máscara CSS: recolorea un PNG blanco de fondo transparente al color que se le dé
   (background-color hereda el stencil de forma en vez de dibujar la imagen tal
   cual) — ver WPS_Assets::icon_mascara_html(). */
.wps-icon-mascara {
	/* La imagen en sí (mask-image) se define inline por elemento — ver
	   WPS_Assets::icon_mascara_html() — porque una custom property (--x:url(...))
	   consumida acá con var(--x) no se aplica en Chromium (verificado). */
	display: inline-block;
	flex-shrink: 0;
	width: 1.7rem;
	height: 1.7rem;
	background-color: var(--wps-verde);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.wps-header-campana {
	display: inline-flex;
	flex-shrink: 0;
	color: #fff;
}

/* ── TIENDA ──────────────────────────────────────────────────────────── */
.wps-ubicacion {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wps-verde);
	font-weight: 600;
	margin-bottom: 1rem;
}
/* v0.2.60: pin de ubicación clásico en verde (ubicacion.png tintado por máscara), en vez del
   emoji 📍. Tamaño acorde al texto de la fila. */
.wps-ubicacion-pin {
	/* v0.2.73 (reporte: a otra socia el pin cambiaba de tamaño según la localización elegida).
	   Se fija tamaño en dimensiones absolutas (px, no rem — inmune a que el navegador/dispositivo
	   escale la tipografía base) y `flex:0 0 auto` para que NUNCA se encoja/estire según el largo
	   del nombre de la localización. `mask-size:contain` explícito para no heredar otro valor. */
	flex: 0 0 auto;
	width: 18px;
	height: 22px;
	min-width: 18px;
	background-color: var(--wps-verde);
	-webkit-mask-size: contain;
	mask-size: contain;
}
.wps-ubicacion-nombre { color: var(--wps-verde); font-weight: 600; }
/* v0.2.63: la ubicación (cuando hay 2+ sucursales) es un botón que abre el modal de localización. */
.wps-ubicacion-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #fff;
	border: 1px solid var(--wps-borde);
	border-radius: 2rem;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
	font: inherit;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.12s ease, transform 0.12s ease;
	max-width: 100%;
}
.wps-ubicacion-boton:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); transform: translateY(-1px); }
.wps-ubicacion-boton .wps-ubicacion-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wps-ubicacion-chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--wps-verde);
	border-bottom: 2px solid var(--wps-verde);
	transform: rotate(45deg);
	flex-shrink: 0;
	margin-left: 0.1rem;
}
/* Lista de opciones dentro del <dialog> (mismo marco .wps-modal-turnos). */
.wps-ubicacion-lista { list-style: none; margin: 0; padding: 0; }
.wps-ubicacion-opcion {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 0.6rem;
	border-bottom: 1px solid #eee;
	text-decoration: none;
	color: var(--wps-gris-oscuro);
	font-weight: 600;
	border-radius: 0.5rem;
	transition: background 0.12s ease;
}
.wps-ubicacion-opcion:last-child { border-bottom: none; }
.wps-ubicacion-opcion:hover { background: #f2f7f2; }
.wps-ubicacion-opcion--activa { background: #eef6f0; }
.wps-ubicacion-opcion-pin { flex: 0 0 auto; width: 16px; height: 20px; min-width: 16px; background-color: var(--wps-verde); -webkit-mask-size: contain; mask-size: contain; } /* v0.2.73: mismo criterio de tamaño fijo que .wps-ubicacion-pin. */
.wps-ubicacion-opcion-nombre { flex: 1; min-width: 0; }
.wps-ubicacion-check { color: var(--wps-verde-claro); font-weight: 800; }

/* ── SELECT → MODAL (País/Provincia/Cantón/Distrito) — v0.2.69 ──────────── */
.wps-select-oculto { display: none !important; }
/* `button.wps-geo-trigger` (misma especificidad que `.wps-form button`, pero definida DESPUÉS) para
   ganarle a esa regla y que el trigger se vea como un campo, no como un botón verde. */
button.wps-geo-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--wps-borde);
	border-radius: 0.6rem;
	padding: 0.7rem 0.9rem;
	margin: 0;
	font: inherit;
	font-weight: 400;
	color: var(--wps-gris-oscuro);
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	min-height: 2.75rem;
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
button.wps-geo-trigger:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transform: none; }
button.wps-geo-trigger:focus-visible { outline: none; border-color: var(--wps-verde); box-shadow: 0 0 0 3px rgba(13, 82, 44, 0.15); }
.wps-geo-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wps-geo-trigger--vacio .wps-geo-trigger-label { color: var(--wps-gris-medio); }
.wps-geo-chevron {
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--wps-verde);
	border-bottom: 2px solid var(--wps-verde);
	transform: rotate(45deg);
	flex-shrink: 0;
	margin-right: 0.15rem;
}
.wps-geo-modal { max-width: 26rem; }
.wps-geo-buscar {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wps-borde);
	border-radius: 2rem;
	padding: 0.55rem 1rem;
	font: inherit;
	margin-bottom: 0.75rem;
}
.wps-geo-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 45vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.wps-geo-opcion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid #eee;
	padding: 0.85rem 0.4rem;
	font: inherit;
	color: var(--wps-gris-oscuro);
	text-align: left;
	cursor: pointer;
	border-radius: 0.4rem;
	transition: background 0.12s ease;
}
.wps-geo-opcion:hover { background: #f2f7f2; }
.wps-geo-opcion--activa { background: #eef6f0; font-weight: 700; color: var(--wps-verde); }
.wps-geo-check { color: var(--wps-verde-claro); font-weight: 800; flex-shrink: 0; }
.wps-geo-vacio { padding: 1rem 0.4rem; color: var(--wps-gris-medio); text-align: center; font-size: 0.9rem; }
.wps-buscador { margin-bottom: 1.25rem; }
.wps-buscador input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wps-borde);
	border-radius: 2rem;
	padding: 0.6rem 1rem;
}
.wps-categoria-block { margin-bottom: 1.75rem; }
.wps-categoria-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.6rem;
}
/* v0.2.25 — corrige color: Title.tsx (variante `categoryTitle`) usa `#0d522c` (verde), no gris; coincide además con el PDF de referencia para esta pantalla. */
.wps-categoria-titulo { font-size: 1.1rem; font-weight: 700; color: var(--wps-verde); }
.wps-ver-mas {
	background: var(--wps-verde-acento);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 1rem;
	padding: 0.25rem 0.75rem;
	text-decoration: none;
}
.wps-carrusel {
	display: flex;
	gap: 0.9rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
}
.wps-grid-productos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
}
.wps-producto-card {
	flex: 0 0 auto;
	width: 9.5rem;
	text-decoration: none;
	color: inherit;
	position: relative;
	/* v0.2.63 (pedido de Deiby: "a cada card darle efectos... sombreados, como la app de McDonald's"):
	   la ficha de producto es una tarjeta blanca con sombra suave y elevación al pasar/tocar. */
	background: #fff;
	border-radius: 0.85rem;
	padding: 0.5rem 0.5rem 0.7rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wps-producto-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.13); }
.wps-producto-card:active { transform: translateY(-1px); }
.wps-producto-nombre, .wps-producto-precio, .wps-producto-precio-tachado { padding-inline: 0.15rem; }
.wps-grid-productos .wps-producto-card { width: auto; }
.wps-producto-img-wrap { position: relative; border-radius: 0.6rem; overflow: hidden; background: #f2f2f2; aspect-ratio: 1 / 1; }
.wps-producto-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v0.2.74 (pedido de Deiby: "elementos visuales con animaciones sutiles para los descuentos, como la
   imagen"): badge "-X%" tipo etiqueta en la esquina superior derecha (rojo, esquina interna
   redondeada) con entrada sutil (pop) + latido muy leve para llamar la atención sin ser molesto. */
.wps-descuento-badge {
	position: absolute;
	top: 0;
	right: 0;
	background: linear-gradient(135deg, #ff5a5a, #e11d1d);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	padding: 0.28rem 0.55rem;
	border-radius: 0 0 0 0.7rem;
	box-shadow: 0 2px 7px rgba(200, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: top right;
	animation: wps-descuento-pop 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both, wps-descuento-latido 2.6s ease-in-out 0.6s infinite;
	z-index: 2;
}
@keyframes wps-descuento-pop {
	from { transform: scale(0.3); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}
@keyframes wps-descuento-latido {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.07); }
}
/* El precio con descuento entra con un leve realce y el tachado se atenúa, para que el ahorro se lea. */
.wps-producto-card .wps-producto-precio { animation: wps-precio-realce 0.5s ease-out both; }
@keyframes wps-precio-realce {
	from { transform: translateY(3px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
.wps-producto-nombre { font-size: 0.85rem; margin-top: 0.4rem; font-weight: 600; }
.wps-producto-precio { color: var(--wps-verde); font-weight: 700; font-size: 0.9rem; }
.wps-producto-precio-tachado { color: var(--wps-gris-claro); text-decoration: line-through; font-size: 0.75rem; margin-right: 0.35rem; }
.wps-status-text { text-align: center; color: var(--wps-gris-medio); padding: 1rem 0; }

/* ── DETALLE DE PRODUCTO ────────────────────────────────────────────── */
.wps-detalle-nombre { font-size: 1.4rem; font-weight: 700; color: var(--wps-verde); margin-bottom: 0.75rem; }
.wps-detalle-media { text-align: center; margin-bottom: 1.25rem; position: relative; }
.wps-detalle-media img { max-width: 100%; border-radius: 0.8rem; }
/* v0.2.56: carrusel de imágenes del producto (flechas + puntos), réplica de
   ProductDetail.tsx. El track es un scroller horizontal con scroll-snap (swipe táctil
   nativo, como el FlatList de RN); las flechas se superponen a los lados. Solo se
   renderiza cuando hay 2+ imágenes. */
.wps-carrusel { position: relative; }
.wps-carrusel-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	border-radius: 0.8rem;
	scrollbar-width: none; /* Firefox: ocultar la barra */
}
.wps-carrusel-track::-webkit-scrollbar { display: none; } /* WebKit/Blink */
.wps-carrusel-slide { flex: 0 0 100%; scroll-snap-align: center; }
.wps-carrusel-slide img {
	width: 100%;
	aspect-ratio: 16 / 9; /* misma proporción que la caja de media de RN */
	object-fit: cover;
	border-radius: 0.8rem;
	display: block;
}
/* v0.2.57 — video del carrusel (mp4 en <video>, YouTube en <iframe>): misma caja 16:9 que
   una imagen. Sirve tanto dentro de un slide como suelto en .wps-detalle-media (1 solo medio). */
.wps-carrusel-video,
.wps-carrusel-video iframe,
.wps-carrusel-video video,
.wps-carrusel-slide .wps-carrusel-video {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
	border-radius: 0.8rem;
	display: block;
	background: #000;
}
.wps-carrusel-video video { object-fit: contain; }
.wps-carrusel-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.3rem;
	height: 2.3rem;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.wps-carrusel-prev { left: 0.4rem; }
.wps-carrusel-next { right: 0.4rem; }
.wps-carrusel-puntos { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; }
.wps-carrusel-punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--wps-gris-claro); transition: background 0.15s; }
.wps-carrusel-punto--activo { background: var(--wps-verde); }
@media (prefers-reduced-motion: reduce) { .wps-carrusel-track { scroll-behavior: auto; } }
.wps-detalle-seccion { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.wps-seccion-titulo { font-size: 1.05rem; font-weight: 600; }
.wps-existencia-badge { border: 1px solid var(--wps-gris-oscuro); border-radius: 0.4rem; padding: 0.1rem 0.75rem; font-size: 0.75rem; }
.wps-detalle-descripcion { color: var(--wps-gris); line-height: 1.5; margin-bottom: 1.25rem; }
.wps-detalle-info-row { display: flex; justify-content: space-around; gap: 1rem; margin-bottom: 1.5rem; text-align: center; }
.wps-cantidad-selector { display: inline-flex; align-items: center; gap: 0.5rem; }
.wps-cantidad-selector button {
	width: 2.75rem; /* objetivo táctil mínimo (antes 2.1rem/33.6px, insuficiente para dedo) */
	height: 2.75rem;
	border-radius: 0.4rem;
	border: 1px solid var(--wps-borde);
	background: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	cursor: pointer;
}
.wps-cantidad-selector input {
	width: 3rem;
	text-align: center;
	font-weight: 700;
	color: var(--wps-verde);
	border: none;
	font-size: 1.1rem;
}
.wps-precio-donacion { color: var(--wps-verde); font-weight: 700; font-size: 1.2rem; margin-top: 0.3rem; }

/* ── CARRITO ─────────────────────────────────────────────────────────── */
/* v0.2.74 (pedido de Deiby: "darle este estilo gráfico al carrito"): tarjeta blanca redondeada,
   stepper −/+ en pastilla, filas con subrayado verde suave, Subtotal en verde y Total resaltado. */
.wps-carrito-card {
	background: #fff;
	border: 1px solid #eef0ee;
	border-radius: 1.1rem;
	padding: 1.4rem 1.3rem 1rem;
	box-shadow: 0 6px 20px rgba(13, 82, 44, 0.08);
	margin-bottom: 1.25rem;
}
.wps-carrito-titulo { font-size: 1.5rem; font-weight: 800; color: var(--wps-verde); margin: 0 0 1rem; }
.wps-carrito-tabla { width: 100%; border-collapse: collapse; }
.wps-carrito-tabla td { padding: 0.7rem 0.15rem; border-bottom: 1px solid rgba(110, 180, 42, 0.28); vertical-align: middle; }
.wps-carrito-nombre { font-weight: 500; font-size: 0.92rem; color: var(--wps-gris-medio); line-height: 1.25; }
.wps-carrito-precio { color: var(--wps-gris-claro); font-weight: 600; text-align: right; white-space: nowrap; font-size: 0.9rem; }
.wps-carrito-cant-cell { text-align: center; white-space: nowrap; width: 1%; }
.wps-carrito-quitar-cell { text-align: right; width: 2rem; }

/* Stepper −/+ del carrito: pastilla gris con − y + verdes y el número al centro. */
.wps-carrito-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	background: #eef0ee;
	border-radius: 999px;
	padding: 0.15rem 0.3rem;
}
.wps-carrito-stepper button {
	width: 1.7rem;
	height: 1.7rem;
	min-width: 1.7rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--wps-verde-claro);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.14s ease, transform 0.1s ease;
}
.wps-carrito-stepper button:hover { background: rgba(110, 180, 42, 0.15); }
.wps-carrito-stepper button:active { transform: scale(0.9); }
.wps-carrito-stepper input {
	width: 1.7rem;
	text-align: center;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wps-gris-oscuro);
	border: none;
	background: transparent;
	padding: 0;
	pointer-events: none; /* solo se controla con −/+ (readonly). */
}
.wps-carrito-stepper input::-webkit-outer-spin-button,
.wps-carrito-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wps-carrito-stepper input { -moz-appearance: textfield; appearance: textfield; }

.wps-carrito-quitar {
	color: #b4b4b4;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.14s ease, transform 0.1s ease;
}
.wps-carrito-quitar:hover { color: #d64545; }
.wps-carrito-quitar:active { transform: scale(0.9); }

/* Subtotal / Total: el subtotal en verde, el total resaltado (borde arriba + verde oscuro fuerte). */
.wps-carrito-resumen-label { font-weight: 700; color: var(--wps-verde); }
.wps-carrito-subtotal td { border-bottom: none; padding-top: 1rem; }
.wps-carrito-subtotal .wps-carrito-precio { color: var(--wps-verde); font-weight: 700; }
.wps-carrito-total td { border-bottom: none; border-top: 1px solid rgba(110, 180, 42, 0.28); padding-top: 0.9rem; }
.wps-carrito-total .wps-carrito-resumen-label { font-size: 1.2rem; font-weight: 800; color: var(--wps-verde); }
.wps-carrito-total .wps-carrito-precio { color: var(--wps-verde); font-weight: 800; font-size: 1.2rem; }
.wps-carrito-vacio { text-align: center; color: var(--wps-gris-medio); padding: 2rem 0; }

/* ── RESERVAS / BOOKING ─────────────────────────────────────────────── */
.wps-reservas-titulo { font-size: 1.4rem; font-weight: 700; color: var(--wps-verde); margin-bottom: 1.5rem; }
.wps-reservas-menu { display: flex; flex-direction: column; gap: 1.25rem; align-items: stretch; }
.wps-booking-card {
	position: relative;
	border: 1px solid var(--wps-borde);
	border-radius: 0.8rem;
	padding: 1rem;
	margin-bottom: 1.25rem;
}
.wps-booking-card img { width: 100%; border-radius: 0.6rem; margin-bottom: 0.75rem; object-fit: cover; max-height: 10rem; }
.wps-booking-card h3 { margin: 0 0 0.3rem; color: var(--wps-verde); }
/*
 * v0.2.30 — tarjeta verde sólida de "Crear Reserva", réplica de `formContainer` de
 * BookingForm.tsx (`backgroundColor:'#517d06'` = --wps-verde-secundario, ya usado en el
 * resto del plugin). Modificador aparte (no se toca `.wps-booking-card` a secas) porque
 * esa clase base la sigue usando el modal "Ver detalles" y otras vistas con fondo blanco.
 * Ver DECISIONES.md ADR-012.
 */
/* v0.2.55: la tarjeta de "Crear Reserva" ya NO es una tarjeta verde con el formulario
   siempre abierto. Colapsada muestra SOLO la foto con el nombre encima (como RN); el
   formulario vive en `.wps-booking-panel`, verde y oculto hasta tocar la tarjeta. */
.wps-booking-card--crear {
	background: transparent;
	border: none;
	padding: 0;
	color: #fff;
}
.wps-booking-card--crear h3,
.wps-booking-card--crear > p { color: #fff; }
/* Cabecera clickeable = foto + nombre superpuesto abajo a la izquierda (réplica de
   BookingCard.tsx). Botón sin estilos nativos. */
.wps-booking-cabecera {
	display: block;
	width: 100%;
	position: relative;
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
	border-radius: 0.8rem;
	overflow: hidden;
	text-align: left;
}
.wps-booking-cabecera img {
	width: 100%;
	height: 11rem;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
	max-height: none;
}
.wps-booking-nombre {
	position: absolute;
	left: 1rem;
	bottom: 0.75rem;
	color: #fff;
	font-weight: 700;
	font-size: 1.2rem;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}
/* Al abrir, la foto pierde el redondeo de abajo para unirse con el panel verde. */
.wps-booking-card--abierto .wps-booking-cabecera { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Panel verde con el formulario — oculto por defecto (attr `hidden`). */
.wps-booking-panel {
	background: var(--wps-verde-secundario);
	border-radius: 0 0 0.8rem 0.8rem;
	padding: 1rem;
	color: #fff;
}
.wps-booking-panel .wps-booking-desc { color: #fff; margin-top: 0; }
.wps-booking-card--crear .wps-campo label,
.wps-booking-card--crear .wps-invitados-label { color: #fff; }
.wps-booking-card--crear .wps-campo select,
.wps-booking-card--crear .wps-campo input:not(.wps-personas-selector input) {
	border-color: transparent;
}
.wps-booking-card--crear .wps-valor-persona-display,
.wps-booking-card--crear .wps-valor-total-display { color: #fff; }
.wps-booking-card--crear .wps-agregar-invitado { color: #fff; }
/* v0.2.30: "Primera fila: Zona y Personas" / "Segunda fila: Fecha y Hora" — réplica de
 * `styles.row`/`styles.column` (flexDirection:'row', 2 columnas de 48% cada una) de
 * BookingForm.tsx. Antes cada campo era su propia fila vertical de ancho completo. */
.wps-campo-fila { display: flex; gap: 4%; }
.wps-campo-fila .wps-campo { flex: 1 1 48%; min-width: 0; }
/* v0.2.30: stepper +/- de "Personas", réplica de `counterInput`/`counterButton` — antes
 * era un <input type="number"> editable a mano, sin relación con los invitados. */
.wps-personas-selector { background: #fff; border-radius: 1rem; justify-content: space-between; padding: 0 0.5rem; }
.wps-personas-selector button {
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 0.4rem;
	border: none;
	background: none;
	color: var(--wps-gris-oscuro);
	font-size: 1.3rem;
	font-weight: 700;
	cursor: pointer;
}
.wps-personas-selector input {
	border: none !important;
	min-height: auto !important;
	padding: 0 !important;
	width: 2rem;
	text-align: center;
	font-weight: 700;
	color: var(--wps-gris-oscuro);
	background: transparent;
}
/* readonly (el valor solo cambia por los botones +/-) — se oculta la flechita nativa del navegador para que no queden 2 controles de incremento distintos superpuestos. */
.wps-personas-selector input::-webkit-outer-spin-button,
.wps-personas-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wps-personas-selector input[type="number"] { -moz-appearance: textfield; }
/* Botón "Ver detalles" + modal del evento (réplica de BookingCard.tsx, hallazgo #5 del DIFF). */
.wps-booking-ver-detalles {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: #fff;
	border: 1px solid var(--wps-borde);
	border-radius: 1rem;
	padding: 0.3rem 0.8rem;
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	z-index: 1;
}
.wps-modal-detalle-evento {
	width: min(90vw, 30rem);
	max-height: 85vh;
	overflow-y: auto;
	border: none;
	border-radius: 1rem;
	padding: 1.5rem;
}
.wps-modal-detalle-evento::backdrop { background: rgba(0, 0, 0, 0.5); }
.wps-modal-detalle-evento h3 { color: var(--wps-verde); margin-top: 0; text-align: center; }
.wps-modal-detalle-evento p { margin: 0.5rem 0; font-size: 0.9rem; }
.wps-modal-descripcion { color: var(--wps-gris-medio); text-align: center; margin-top: 0; }
/* v0.2.49 (ver DECISIONES.md ADR-031): imagen de portada del evento + imagen secundaria
   del lugar — réplica de `styles.headerImage`/`styles.secondaryImage` de BookingCard.tsx.
   Ancestor-calificadas a propósito (mismo criterio que `.wps-modal-icono` de ADR-029):
   `.wps-booking-card img { width:100%; ...; max-height:10rem; }` ya aplicaría un ancho de
   100% (que acá SÍ se quiere), pero su `max-height` y `margin-bottom` no son los que
   corresponden a este contexto — se fijan explícitos acá para no depender de qué regla
   gane la cascada. */
.wps-modal-detalle-evento .wps-modal-imagen-header,
.wps-modal-detalle-evento .wps-modal-imagen-secundaria {
	display: block;
	width: 100%;
	max-height: 11rem;
	object-fit: cover;
	border-radius: 0.6rem;
	margin: 0 0 0.75rem;
}
/* v0.2.45: `align-items:flex-start` (antes `center`) + `.wps-modal-fila-texto` con
   `min-width:0` — con textos reales largos (dirección/contacto del PV) el texto ahora
   envuelve línea dentro del modal en vez de desbordarse fuera de su ancho fijo. Ver
   DECISIONES.md ADR-027.
   v0.2.49 (ADR-031): margen vertical propio, más ajustado que el `0.5rem 0` genérico de
   `.wps-modal-detalle-evento p` de arriba — réplica de `styles.row.marginVertical` de
   BookingCard.tsx (bastante más compacto que lo que tenía el plugin, contribuía a la
   sensación de espacios "no profesionales" entre filas que reportó Deiby). */
.wps-modal-fila { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.3rem 0; }
.wps-modal-fila-texto { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
/* v0.2.47 — CORRECCIÓN DE ESPECIFICIDAD (ver DECISIONES.md ADR-029): el fix de v0.2.45
   de arriba NO alcanzaba a corregir el modal en el sitio real porque `<dialog
   class="wps-modal-detalle-evento">` está anidado dentro de `.wps-booking-card`
   (ver render_crear() en class-wps-shortcodes-reservas.php), y la regla genérica
   `.wps-booking-card img { width: 100%; ... }` (línea 664, especificidad 0-1-1) le
   ganaba en la cascada a `.wps-modal-icono { width: 1.1rem; ... }` cuando ambas tenían
   una sola clase de especificidad (0-1-0) — el ícono terminaba estirado al 100% del
   ancho de la fila (confirmado renderizando el HTML real en un navegador headless:
   el <img> medía 432px de ancho en vez de 1.1rem/~17.6px), empujando el texto a un
   ancho de 0px — de ahí el texto "envuelto" carácter por carácter en una columna
   angosta pegada al borde derecho que reportó Deiby, pese a que el fix de v0.2.45
   (min-width:0 en el texto) sí era correcto en sí mismo. Se sube la especificidad
   calificando el selector con el ancestro del modal (0-2-0, gana sin depender del
   orden de declaración en el archivo). Mismo riesgo existía en
   `.wps-modal-accion-icono` (íconos de Waze/Maps/WhatsApp del modal), corregido igual. */
/* v0.2.49 (ver DECISIONES.md ADR-031): esta regla ahora también dimensiona el ícono de
   Dirección, que desde esta versión se renderiza como `<span class="wps-icon-mascara">`
   (máscara CSS, ver `icon_mascara_html()`) en vez de `<img>` — `width`/`height`/
   `flex-shrink`/`margin-top` aplican igual a un `<span>`; `object-fit` simplemente no
   tiene efecto ahí (propiedad válida solo en elementos reemplazados como `<img>`), no
   hace falta separar la regla. */
.wps-modal-detalle-evento .wps-modal-icono { width: 1.1rem; height: 1.1rem; object-fit: contain; flex-shrink: 0; margin-top: 0.15rem; }
/* v0.2.53: réplica del footerIcon de BookingCard.tsx (RN) — ícono CUADRADO de
   ~26px (rw(7)) centrado ARRIBA del texto, no de 1rem a la izquierda en línea.
   Se quitan `vertical-align`/`margin-right` (eran para el layout inline anterior);
   el apilado ícono-arriba/texto-abajo lo da ahora `.wps-modal-accion` en columna. */
.wps-modal-detalle-evento .wps-modal-accion-icono { width: 1.6rem; height: 1.6rem; object-fit: contain; display: block; }
.wps-modal-cerrar {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: #000;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 1.8rem;
	height: 1.8rem;
	line-height: 1.8rem;
	text-align: center;
	cursor: pointer;
}
/* v0.2.49 (ver DECISIONES.md ADR-031): botón "Cerrar" real, réplica de
   `styles.closeButton` de BookingCard.tsx — píldora sólida verde secundario, centrada,
   al pie del modal. Antes el único cierre era la × de la esquina (que la app real no
   tiene en este modal en absoluto) — contribuía a la sensación de modal "incompleto". */
.wps-modal-cerrar-boton {
	display: block;
	margin: 1.25rem auto 0;
	background: var(--wps-verde-secundario);
	color: #fff;
	border: none;
	border-radius: 2rem;
	padding: 0.6rem 2rem;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}
/* v0.2.49 (ver DECISIONES.md ADR-031): `flex-wrap:wrap` (antes) dejaba caer el 4to botón
   ("Sitio Web") a una segunda fila solo, cuando había Waze+Maps+WhatsApp+Sitio Web
   simultáneos — no coincide con `styles.footerRow` de BookingCard.tsx
   (`flexWrap:"nowrap"`, cada botón `flex:1` — los 4 SIEMPRE comparten una sola fila,
   angostándose si hace falta). `min-width` bajado de 5rem a 0 por el mismo motivo: con
   4 botones el ancho disponible por botón en un modal de ~28rem de contenido puede ser
   bastante menor a 5rem. */
.wps-modal-acciones { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.4rem; margin-top: 1rem; }
/* v0.2.53: cada acción es una COLUMNA (ícono arriba, etiqueta abajo), centrada,
   fondo gris claro y ancho igual — réplica del `footerButton` de BookingCard.tsx
   (RN: flexDirection column implícito, alignItems/justifyContent center, flex 1,
   backgroundColor #f5f5f5, borderRadius). Antes el ícono iba en línea a la
   izquierda del texto, chico y desalineado respecto de la app. */
.wps-modal-accion {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	text-align: center;
	background: #f5f5f5;
	color: var(--wps-verde);
	border-radius: 0.5rem;
	padding: 0.5rem 0.3rem;
	font-size: 0.7rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*
 * v0.2.31 — Modal-calendario "Selecciona Fecha y Horario" (ver DECISIONES.md ADR-013):
 * réplica visual de las capturas reales del dispositivo que mandó Deiby — encabezado con
 * mes navegable, grilla de 7 columnas, día de hoy resaltado en celeste, día elegido en
 * verde sólido, días pasados grises/deshabilitados, y franjas horarias en fila horizontal
 * con el cupo disponible debajo de la hora.
 */
.wps-abrir-turnos-btn {
	display: block;
	width: 100%;
	text-align: left;
	background: #fff;
	border: none;
	border-radius: 1rem;
	padding: 0.7rem 0.9rem;
	font-size: 0.95rem;
	color: var(--wps-gris-oscuro);
	cursor: pointer;
	min-height: 2.75rem;
}
.wps-booking-card--crear .wps-abrir-turnos-btn { color: var(--wps-gris-oscuro); }
.wps-modal-turnos {
	width: min(92vw, 26rem);
	max-height: 88vh;
	overflow-y: auto;
	border: none;
	border-radius: 1rem;
	padding: 1.25rem;
}
.wps-modal-turnos::backdrop { background: rgba(0, 0, 0, 0.5); }
.wps-modal-turnos-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.wps-modal-turnos-header h3 { margin: 0; color: var(--wps-verde); font-size: 1.05rem; }
.wps-modal-turnos [data-wps-cerrar-turnos] {
	background: #000;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 1.8rem;
	height: 1.8rem;
	line-height: 1.8rem;
	text-align: center;
	cursor: pointer;
	flex-shrink: 0;
}
.wps-calendario-nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 0.5rem; }
.wps-calendario-nav button { background: none; border: none; font-size: 1.3rem; color: var(--wps-verde); cursor: pointer; line-height: 1; padding: 0.25rem 0.5rem; }
.wps-calendario-mes-label { font-weight: 700; color: var(--wps-verde); letter-spacing: 0.05em; text-transform: uppercase; min-width: 8rem; text-align: center; }
.wps-calendario-dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.75rem; color: var(--wps-gris-medio); margin-bottom: 0.25rem; }
.wps-calendario-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; margin-bottom: 0.75rem; }
.wps-calendario-dia {
	aspect-ratio: 1 / 1;
	border: none;
	border-radius: 50%;
	background: none;
	font-size: 0.85rem;
	color: var(--wps-gris-oscuro);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wps-calendario-dia--vacio { cursor: default; }
.wps-calendario-dia--pasado { color: var(--wps-borde); cursor: not-allowed; }
.wps-calendario-dia--hoy { background: #cfe8f5; font-weight: 700; }
.wps-calendario-dia--sin-cupo { color: #c0392b; text-decoration: line-through; }
.wps-calendario-dia--seleccionado,
.wps-calendario-dia--seleccionado.wps-calendario-dia--hoy { background: var(--wps-verde-secundario); color: #fff; font-weight: 700; }
.wps-fecha-elegida-texto { text-align: center; font-weight: 600; color: var(--wps-verde); font-size: 0.9rem; margin: 0 0 0.75rem; text-transform: capitalize; }
.wps-turnos-lista { min-height: 3.5rem; margin-bottom: 1rem; }
.wps-turnos-fila { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.wps-turno-btn {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	background: #fff;
	border: 1px solid var(--wps-borde);
	border-radius: 0.6rem;
	padding: 0.5rem 0.8rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wps-gris-oscuro);
	cursor: pointer;
}
.wps-turno-cupo { font-size: 0.72rem; font-weight: 400; color: var(--wps-gris-medio); }
.wps-turno-btn--pocas .wps-turno-cupo { color: #c0392b; }
.wps-turno-btn--seleccionado { background: var(--wps-verde-secundario); border-color: var(--wps-verde-secundario); color: #fff; }
.wps-turno-btn--seleccionado .wps-turno-cupo { color: #eafce0; }
.wps-modal-turnos [data-wps-confirmar-turno]:disabled { opacity: 0.5; cursor: not-allowed; }

/* v0.2.55: modal de ZONA (comparte `.wps-modal-turnos` para el marco). Lista de zonas
   como en el `zoneModal` de BookingForm.tsx — sin desplegable nativo. */
.wps-zonas-lista { list-style: none; margin: 0; padding: 0; }
.wps-zona-opcion {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 1px solid var(--wps-borde);
	padding: 0.85rem 0.25rem;
	font-size: 0.95rem;
	color: var(--wps-gris-oscuro);
	cursor: pointer;
}
.wps-zona-opcion:last-child { border-bottom: none; }
.wps-zona-opcion:hover { background: #f5f5f5; }
.wps-zona-nombre { flex: 1; min-width: 0; }
.wps-zona-precio { color: var(--wps-gris-medio); font-size: 0.85rem; white-space: nowrap; }
.wps-zona-opcion--agotada { opacity: 0.55; cursor: not-allowed; }
.wps-zona-agotado { font-size: 0.72rem; font-weight: 700; color: #b3261e; letter-spacing: 0.03em; }

/* v0.2.55: animación SUTIL de aparición — el modal entra deslizando de abajo hacia
   arriba y el fondo se atenúa, como en la app RN (Modal animationType="slide").
   Aplica a los <dialog> de Zona y de Fecha/Hora (ambos con `.wps-modal-turnos`).
   `prefers-reduced-motion` la desactiva por accesibilidad. */
@keyframes wps-modal-subir {
	from { transform: translateY(28px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
@keyframes wps-modal-fondo {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.wps-modal-turnos[open],
.wps-modal-reserva-exito[open],
.wps-modal-agregado[open],
.wps-modal-detalle-evento[open] { animation: wps-modal-subir 0.24s ease-out; }
.wps-modal-turnos[open]::backdrop,
.wps-modal-reserva-exito[open]::backdrop,
.wps-modal-agregado[open]::backdrop,
.wps-modal-detalle-evento[open]::backdrop { animation: wps-modal-fondo 0.24s ease-out; }
@media (prefers-reduced-motion: reduce) {
	.wps-modal-turnos[open],
	.wps-modal-reserva-exito[open],
	.wps-modal-agregado[open],
	.wps-modal-detalle-evento[open] { animation: none; }
}
/* v0.2.56: modal "producto agregado" con dos acciones (Seguir ordenando / Ir al
   carrito). MEJORA sobre RN: ProductDetail.tsx solo muestra un Toast, sin modal.
   Reutiliza el <dialog> nativo + la animación de deslizamiento de arriba. La X negra
   usa `.wps-modal-cerrar` (ya definido). */
.wps-modal-agregado {
	width: min(92vw, 22rem);
	border: none;
	border-radius: 1.1rem;
	padding: 2rem 1.5rem 1.5rem;
	background: #fff;
	text-align: center;
}
.wps-modal-agregado::backdrop { background: rgba(0, 0, 0, 0.55); }
.wps-agregado-check {
	width: 3.4rem;
	height: 3.4rem;
	margin: 0.2rem auto 0.9rem;
	border-radius: 50%;
	background: var(--wps-verde);
	color: #fff;
	font-size: 1.9rem;
	line-height: 3.4rem;
}
.wps-agregado-titulo { margin: 0 0 0.35rem; font-size: 1.2rem; font-weight: 700; color: var(--wps-gris-oscuro); }
.wps-agregado-sub { margin: 0 0 1.3rem; font-size: 0.92rem; color: #666; line-height: 1.35; }
.wps-agregado-acciones { display: flex; flex-direction: column; gap: 0.6rem; }
.wps-agregado-acciones .wps-btn { margin: 0; width: 100%; box-sizing: border-box; }
.wps-agregado-ir-carrito { text-align: center; text-decoration: none; }
/* v0.2.55 (H-017): campo de solo lectura (fecha/hora de un evento no diario) — mismo
   look que un campo del formulario pero atenuado y no editable. */
.wps-campo-lectura {
	background: #f0f0f0 !important;
	color: var(--wps-gris-oscuro) !important;
	cursor: default;
}
/* v0.2.55 (H-015): QR de un invitado dentro del acordeón del detalle — más chico que
   el del titular. */
.wps-qr-box--invitado { margin-top: 0.6rem; max-width: 8rem; }
.wps-qr-box--invitado img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.wps-booking-form .wps-campo { margin-bottom: 1rem; }
.wps-agregar-invitado { background: none; border: none; color: var(--wps-verde); font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 1rem; }
/* v0.2.55: modal de éxito post-reserva — réplica de BookingSuccessModal.tsx
   (BookingDetailContent dentro de un <Modal> deslizante). Foto del evento arriba,
   tarjeta verde con datos a la izquierda y caja de QR + Compartir a la derecha,
   e invitados debajo. Se abre solo vía wpsAbrirModalReservaExito() (wps-front.js). */
.wps-modal-reserva-exito {
	width: min(94vw, 26rem);
	max-height: 88vh;
	overflow-y: auto;
	border: none;
	border-radius: 1.1rem;
	padding: 0;
	background: #fff;
}
.wps-modal-reserva-exito::backdrop { background: rgba(0, 0, 0, 0.55); }
.wps-modal-exito-cerrar {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	width: 2.1rem;
	height: 2.1rem;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
/* ── Vista de reserva COMPARTIDA (foto + tarjeta verde de 2 columnas + invitados) ──
   La usan TANTO la página de Detalles (render_detalle) COMO el modal de éxito
   (render_modal_reserva_exito): mismo HTML `.wps-reserva-vista`, así se ven igual.
   `.wps-reserva-tarjeta` redondea y RECORTA la foto (esquinas de arriba) junto con la
   tarjeta verde (esquinas de abajo) para que formen una sola tarjeta como en RN. */
.wps-reserva-tarjeta { border-radius: 1rem; overflow: hidden; }
.wps-exito-header { position: relative; }
.wps-exito-header img { width: 100%; height: 9.5rem; object-fit: cover; display: block; }
.wps-exito-lugar {
	position: absolute;
	left: 1rem;
	bottom: 0.6rem;
	color: #fff;
	font-weight: 700;
	font-size: 1.15rem;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* Selectores scopeados por `.wps-reserva-vista` a propósito: mayor especificidad que
   las reglas base de `.wps-detalle-reserva` (que aparece DESPUÉS en el archivo), para
   ganar sin importar el orden. La tarjeta verde va a ras de la foto (radio 0, lo
   redondea el padre `.wps-reserva-tarjeta`) y en 2 columnas. */
.wps-reserva-vista .wps-detalle-reserva { border-radius: 0; padding: 1.1rem 1.2rem 1.3rem; }
.wps-reserva-vista .wps-reserva-titular { font-size: 1.35rem; margin-bottom: 0.6rem; }
.wps-reserva-lugar-h2 { color: #fff; margin: 0 0 0.6rem; font-size: 1.25rem; }
.wps-exito-cols { display: flex; gap: 1rem; align-items: flex-start; }
.wps-exito-datos { flex: 1; min-width: 0; }
.wps-exito-datos .wps-detalle-fila { align-items: flex-start; }
.wps-exito-qr { flex-shrink: 0; width: 9.5rem; }
/* La imagen del QR se ajusta al ANCHO de su caja blanca — sin esto hereda el
   `max-width:10rem` de `.wps-qr-box img`, más ancho que el espacio interno de la caja,
   y la desbordaba por la derecha saliéndose de la tarjeta. */
.wps-reserva-vista .wps-qr-box { padding: 0.6rem; }
.wps-reserva-vista .wps-qr-box img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
/* v0.2.63 (pedido de Deiby: "el botón de compartir no se ve claramente porque está en otro tono
   de verde"): antes era texto verde sobre el fondo verde de la tarjeta → invisible. Ahora es un
   botón/pastilla BLANCA con texto e ícono verdes, alto contraste sobre el verde. */
.wps-exito-compartir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin-top: 0.6rem;
	padding: 0.45rem 1rem;
	background: #fff;
	color: var(--wps-verde);
	font-weight: 700;
	text-decoration: none;
	border-radius: 2rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wps-exito-compartir:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22); }
.wps-exito-compartir:active { transform: translateY(0); }

/* ── Solo en el MODAL: el <dialog> ya redondea, así que la tarjeta interna va a ras
   (radio 0), y los invitados van sobre fondo verde DENTRO del modal (en la página de
   Detalles, en cambio, quedan sobre el fondo blanco con título oscuro, como RN). ── */
.wps-modal-reserva-exito .wps-reserva-tarjeta { border-radius: 0; }
.wps-modal-reserva-exito .wps-invitados-lista { padding: 0 1.2rem 1.2rem; background: var(--wps-verde-secundario); margin-top: 0; }
.wps-modal-reserva-exito .wps-invitados-lista h3 { color: #fff; margin-top: 0; }
/* Red de seguridad: si el PV todavía no devuelve la reserva en el historial. */
.wps-modal-reserva-exito--aviso { padding: 2rem 1.5rem; text-align: center; }
.wps-exito-aviso-titulo { font-size: 1.3rem; font-weight: 700; color: var(--wps-verde); margin: 0 0 0.5rem; }
.wps-exito-aviso .wps-btn { margin-top: 1rem; }

/* ── Encabezado de la página de Detalles: alineado a la IZQUIERDA y con el título más
   grande, como en la app RN (HeaderCart de Reservas). Scopeado a esta página para no
   tocar el encabezado centrado del resto del portal. ── */
.wps-pagina-reservas .wps-header-titulos,
.wps-pagina-reservas-crear .wps-header-titulos,
.wps-pagina-reservas-activas .wps-header-titulos,
.wps-pagina-reserva-detalle .wps-header-titulos,
.wps-pagina-reserva-qr .wps-header-titulos { text-align: left; }
.wps-pagina-reservas .wps-header-titulo,
.wps-pagina-reservas-crear .wps-header-titulo,
.wps-pagina-reservas-activas .wps-header-titulo,
.wps-pagina-reserva-detalle .wps-header-titulo,
.wps-pagina-reserva-qr .wps-header-titulo { font-size: 1.6rem; }
.wps-pagina-reservas .wps-header-subtitulo,
.wps-pagina-reservas-crear .wps-header-subtitulo,
.wps-pagina-reservas-activas .wps-header-subtitulo,
.wps-pagina-reserva-detalle .wps-header-subtitulo,
.wps-pagina-reserva-qr .wps-header-subtitulo { font-size: 0.95rem; }
.wps-detalle-reserva { background: var(--wps-verde-secundario); color: #fff; border-radius: 0.8rem; padding: 1.5rem; }
.wps-detalle-reserva .wps-detalle-fila { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.wps-detalle-icono { width: 1.1rem; height: 1.1rem; object-fit: contain; flex-shrink: 0; }
.wps-ver-mas-icono { width: 0.9rem; height: 0.9rem; object-fit: contain; vertical-align: middle; margin-right: 0.25rem; }
.wps-qr-box { background: #fff; border-radius: 0.6rem; padding: 1rem; text-align: center; }
.wps-qr-box img { max-width: 10rem; }
/* Nombre del socio titular (réplica de ActiveBookingCard.tsx/DetailBooking.tsx, hallazgo #6 del DIFF). */
.wps-reserva-titular { font-weight: 700; margin: 0 0 0.2rem; color: var(--wps-gris-oscuro); }
.wps-detalle-reserva .wps-reserva-titular { font-size: 1.1rem; color: #fff; }
/* Fila "Valor por persona" en Crear Reserva (hallazgo #5 del DIFF). */
.wps-valor-persona-display { font-weight: 700; color: var(--wps-verde); }
.wps-invitados-lista { margin-top: 1rem; }
.wps-invitado-card { background: #fff; color: var(--wps-gris-oscuro); border: 1px solid #ddd; border-radius: 0.5rem; padding: 0; margin-bottom: 0.75rem; overflow: hidden; }
/*
 * v0.2.25 — acordeón "Invitado N" (título + chevron), réplica de BookingGuestItem.tsx
 * (formulario Crear Reserva, arranca ABIERTO por bloque) y DetailBooking.tsx (vista
 * Detalle, arranca CERRADO). `.wps-invitado-card` (Detalle) es un <details>/<summary>
 * nativo; `.wps-invitado-bloque` (Crear Reserva) usa las mismas clases de título/cuerpo
 * pero se abre/cierra con wps-front.js porque su contenido lo genera JS, no PHP.
 */
.wps-invitado-titulo,
.wps-invitado-card summary.wps-invitado-titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	font-weight: 700;
	color: var(--wps-verde);
	cursor: pointer;
	list-style: none;
}
.wps-invitado-card summary.wps-invitado-titulo::-webkit-details-marker { display: none; }
.wps-invitado-chevron {
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--wps-verde);
	border-bottom: 2px solid var(--wps-verde);
	transform: rotate(45deg); /* "▾" = colapsado */
	transition: transform 0.15s ease;
	flex-shrink: 0;
}
/* render_detalle(): <details> nativo, cerrado por defecto (sin [open]) → chevron "▾" ya es el estado base. */
.wps-invitado-card[open] .wps-invitado-chevron { transform: rotate(-135deg); /* "▴" = abierto */ }
.wps-invitado-cuerpo { padding: 0 1rem 1rem; }
/*
 * v0.2.30 — bloque de invitado de Crear Reserva, verde sólido, a pedido explícito de
 * Deiby de seguir el diseño de Reservas del PDF de referencia. NOTA: la fuente real
 * (`BookingGuestItem.tsx`, `guestCard.backgroundColor:'#fff'`) en realidad pinta esta
 * tarjeta BLANCA — el PDF y el código fuente se contradicen acá (documentado en
 * DECISIONES.md ADR-012); esta entrega sigue el PDF porque así lo pidió Deiby
 * explícitamente para esta pantalla, no porque el código fuente lo respalde.
 */
.wps-invitado-bloque { background: var(--wps-verde); border-radius: 0.6rem; margin-bottom: 0.75rem; overflow: hidden; }
.wps-invitado-bloque .wps-invitado-titulo { color: #fff; }
.wps-invitado-bloque .wps-invitado-chevron { border-color: #fff; transform: rotate(-135deg); }
.wps-invitado-bloque .wps-invitado-cuerpo { padding: 0 0.75rem 0.75rem; }
.wps-invitado-bloque .wps-invitado-cuerpo p { margin: 0 0 0.6rem; }
.wps-invitado-bloque .wps-invitado-cuerpo input {
	display: block;
	width: 100%;
	background: var(--wps-verde-secundario);
	border: 1px solid transparent;
	border-radius: 1rem;
	padding: 0.6rem 0.9rem;
	font-size: 1rem;
	min-height: 2.75rem;
	color: #fff;
}
.wps-invitado-bloque .wps-invitado-cuerpo input::placeholder { color: #cfe8d8; }
.wps-invitado-bloque.wps-invitado-colapsado .wps-invitado-chevron { transform: rotate(45deg); }
.wps-invitado-bloque.wps-invitado-colapsado .wps-invitado-cuerpo { display: none; }

/* v0.2.63 — Card de invitado en la vista de Detalle (más pro): borde de acento, sombra suave,
   filas con íconos, y "Ver QR" como botón verde. Scopeado a la card <details> (no toca el bloque
   verde del formulario de Crear Reserva). */
.wps-invitado-card {
	border: 1px solid #e3e7e3;
	border-left: 3px solid var(--wps-verde-claro);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.15s ease;
}
.wps-invitado-card[open] { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); }
.wps-invitado-datos { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.85rem; }
.wps-invitado-fila {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--wps-gris-oscuro);
	font-size: 0.92rem;
	min-width: 0;
}
.wps-invitado-fila .wps-invitado-ic { color: var(--wps-verde); flex-shrink: 0; }
.wps-invitado-fila span { min-width: 0; overflow-wrap: anywhere; }
.wps-invitado-nombre { font-weight: 700; }
.wps-invitado-correo { color: #5a6b5f; }
.wps-invitado-verqr {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.9rem;
	padding: 0.55rem 1.2rem;
	background: var(--wps-verde);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	border-radius: 2rem;
	box-shadow: 0 2px 6px rgba(13, 82, 44, 0.25);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.wps-invitado-verqr:hover { background: var(--wps-verde-claro); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(13, 82, 44, 0.3); }
.wps-invitado-verqr:active { transform: translateY(0); }
/* v0.2.30: "Eliminar invitado" (antes "Quitar invitado") — texto y alineación a la
 * derecha réplica de `deleteButtonText`/`deleteButton.alignSelf:'flex-end'` de
 * BookingGuestItem.tsx real. */
.wps-eliminar-invitado {
	display: block;
	margin-left: auto;
	background: none;
	border: none;
	color: #ff8a8a;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	padding: 0.4rem 0;
}
.wps-empty-state { text-align: center; color: var(--wps-gris-medio); padding: 3rem 1rem; }
.wps-empty-state strong { display: block; color: var(--wps-verde); font-size: 1.1rem; margin-bottom: 0.4rem; }
/*
 * v0.2.25 — tarjeta "Reservas activas" (réplica visual de ActiveBookingCard.tsx).
 * Fondo sólido `#507b08` ≈ `--wps-verde-secundario` (ya definida, diferencia de
 * matiz despreciable), radio y padding equivalentes a `borderRadius: rw(8),
 * padding: rw(5)` de la fuente. Reemplaza el uso incorrecto de `.wps-booking-card`
 * (tarjeta con borde blanco, pensada para "Crear Reserva") en esta vista.
 */
.wps-reserva-activa-card {
	background: var(--wps-verde-secundario);
	color: #fff;
	border-radius: 0.8rem;
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.25rem;
}
/* v0.2.55: en la lista, cada tarjeta se envuelve con la foto del lugar arriba
   (`.wps-reserva-tarjeta` redondea y recorta ambas). El espacio entre ítems lo da
   `.wps-reserva-activa-item`. */
.wps-reserva-activa-item { margin-bottom: 1.25rem; }

/* v0.2.55 — CORRECCIÓN del "escalón" blanco en la unión foto/tarjeta. En escritorio el
   `overflow:hidden` del contenedor recorta bien, pero en el WebView de Android (el PWA)
   ese clip fuga sub-pixel en la unión, y algunos temas de WordPress agregan
   `img{border-radius}` que redondea la foto por su cuenta — ambos dejan una muesca. Se
   controla el radio de CADA esquina de los hijos: la foto redondea ARRIBA y va a ras
   abajo; la tarjeta verde va a ras arriba y redondea ABAJO. Así no depende del recorte. */
.wps-reserva-vista .wps-exito-header img { border-radius: 1rem 1rem 0 0; }
.wps-reserva-activa-item .wps-reserva-activa-card { border-radius: 0 0 1rem 1rem; margin-bottom: 0; }
.wps-pagina-reserva-detalle .wps-reserva-tarjeta > .wps-detalle-reserva,
.wps-pagina-reserva-qr .wps-reserva-tarjeta > .wps-detalle-reserva { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
/* Fila ícono + texto, réplica del estilo `row` (flexDirection: row, alignItems: center) de la fuente. */
.wps-reserva-activa-fila {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
}
.wps-reserva-activa-fila:last-of-type { margin-bottom: 0.9rem; }
.wps-reserva-activa-fila span { color: #fff; }
/* Botón píldora blanco "VER DETALLES", réplica de `detailsButton`/`detailsText` (fondo blanco, texto verde, negrita, centrado, ~70% de ancho). */
.wps-reserva-activa-boton {
	display: inline-block;
	width: 70%;
	max-width: 16rem;
	background: #fff;
	color: var(--wps-verde);
	border-radius: 1.5rem;
	padding: 0.6rem 1rem;
	font-weight: 700;
	font-size: 0.85rem;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.02em;
}

/* ── COOPERATIVA / DONACIONES ───────────────────────────────────────── */
.wps-coop-video { width: 100%; max-width: 100%; height: auto; border-radius: 0.75rem; margin-bottom: 1rem; display: block; background: #000; }
.wps-coop-titulo { font-size: 1.4rem; font-weight: 700; color: var(--wps-verde); margin-bottom: 0.5rem; }
.wps-coop-desc { color: var(--wps-verde); line-height: 1.5; margin-bottom: 1.5rem; }
.wps-montos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem; }
.wps-monto-btn {
	border: 2px solid var(--wps-verde);
	background: #fff;
	color: var(--wps-verde);
	border-radius: 2rem;
	padding: 0.7rem 0.5rem;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
}
.wps-monto-personalizado { display: flex; align-items: center; gap: 0.75rem; }
.wps-monto-personalizado input {
	flex: 1;
	border: 2px solid var(--wps-verde);
	border-radius: 2rem;
	padding: 0.6rem 1rem;
	text-align: center;
	color: var(--wps-verde);
	font-weight: 700;
}

/* ── MEMBRESÍA ───────────────────────────────────────────────────────── */
.wps-membresia-exito { text-align: center; padding: 1.5rem 0; }
.wps-membresia-exito img { width: 5rem; height: 5rem; margin-bottom: 1rem; }
.wps-membresia-exito h2 { color: var(--wps-verde); text-transform: uppercase; margin-bottom: 0.5rem; }
.wps-checkbox-fila { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1.25rem 0; }
.wps-checkbox-fila input { margin-top: 0.2rem; }

.wps-planes-membresia { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; text-align: left; }
.wps-plan-membresia-item { display: flex; align-items: center; gap: 0.6rem; border: 1px solid #eee; border-radius: 0.6rem; padding: 0.7rem 0.9rem; }
.wps-plan-membresia-nombre { font-weight: 700; flex: 1; }
.wps-plan-membresia-precio { color: var(--wps-verde); font-weight: 700; }
.wps-plan-membresia-duracion { font-size: 0.8rem; color: var(--wps-gris-medio); }

/* ── RESULTADO DE PAGO ───────────────────────────────────────────────── */
/* v0.2.57 — pago embebido: el iframe de Bold ocupa casi toda la pantalla, con una barra
   arriba (título + cerrar) y el enlace de respaldo abajo por si el proveedor bloquea el
   framing. */
/* v0.2.63: checkout de Bold embebido SIN chrome — el iframe ocupa todo el área de contenido,
   sin barra, sin borde, sin marco, integrado como una pantalla propia de la app. Se anula el
   padding del contenedor de contenido SOLO en esta página para que llegue de borde a borde. */
.wps-pagina-pago-embebido .wps-main { padding: 0; }
/* v0.2.119: la pantalla embebida ocupa el alto de la ventana menos el header (3.5rem) y el nav
   inferior fijo (4.6rem); el iframe llena lo que sobra por encima de la barra "Ver el resultado". */
/* v0.2.120 (reporte de Deiby: "solo me sale la pantalla de Bold en el pago rechazado"): en los
   navegadores móviles `100vh` cuenta el área detrás de la barra de direcciones, así que el
   contenedor quedaba MÁS alto que la pantalla visible y empujaba la barra del botón "Ver el
   resultado del pago" fuera de la vista (detrás del nav fijo / bajo el pliegue). Se usa `100dvh`
   (alto dinámico del viewport, que sí refleja el área realmente visible), con `100vh` de respaldo
   para navegadores viejos — mismo patrón progresivo que .wps-app (líneas 58-59). */
.wps-bold-embed { display: flex; flex-direction: column; height: calc(100vh - 3.5rem - 4.6rem); height: calc(100dvh - 3.5rem - 4.6rem); }
.wps-bold-embed-iframe {
	display: block;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	border: 0;
	background: #fff;
}
/* v0.2.119 — barra con el botón para volver a la app y ver el resultado real del pago (Opción B). */
.wps-bold-embed-barra { flex: 0 0 auto; background: var(--wps-verde); padding: 0.6rem 1rem 0.7rem; text-align: center; }
/* v0.2.120 (reporte de Deiby): en 0.2.119 el fondo del botón usaba var(--wps-lima), una variable
   que NUNCA se definió en :root — el botón quedaba con fondo transparente y texto verde oscuro
   sobre la barra verde oscuro, es decir invisible. Se usa la variable real --wps-verde-claro
   (#6eb42a, el lima de la app) con texto verde oscuro para contraste legible. */
.wps-bold-embed-barra .wps-bold-embed-btn { display: inline-block; width: 100%; box-sizing: border-box; background: var(--wps-verde-claro); color: var(--wps-verde); font-weight: 700; }
.wps-bold-embed-nota { color: #cfe3d3; font-size: 0.72rem; margin: 0.4rem 0 0; line-height: 1.3; }
.wps-pago-resultado { text-align: center; padding: 1.5rem 0; }
.wps-pago-resultado img { width: 5rem; height: 5rem; margin-bottom: 1rem; }
.wps-pago-resultado h2 { text-transform: uppercase; margin-bottom: 0.5rem; }
.wps-pago-exito h2 { color: var(--wps-verde); }
.wps-pago-error h2 { color: var(--wps-error); }
.wps-pago-monto { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.4rem; }
.wps-pago-error .wps-pago-monto { color: var(--wps-error); text-decoration: line-through; }
.wps-pago-referencia,
.wps-pago-fecha { color: var(--wps-gris-medio); margin-bottom: 0.2rem; }
/* v0.2.56 (H-019): mensaje de estado en un pago no confirmado/rechazado. */
.wps-pago-mensaje { color: var(--wps-error); margin: 0.4rem 0 0.2rem; font-size: 0.95rem; }
.wps-pago-resumen { background: #f6f6f6; border-radius: 0.75rem; padding: 1rem; margin-top: 1.25rem; text-align: left; }
.wps-pago-resumen-fila { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #e2e2e2; }
.wps-pago-resumen-fila:last-child { border-bottom: none; }
.wps-pago-resumen-label { color: var(--wps-gris-medio); font-size: 0.85rem; }
.wps-pago-resumen-valor { font-weight: 700; }

/* ── CONSENTIMIENTO DE MEMBRESÍA ─────────────────────────────────────── */
.wps-membresia-terminos-header { text-align: center; padding: 1rem 0; }
.wps-membresia-terminos-header img { width: 4rem; height: 4rem; margin-bottom: 0.75rem; }
.wps-membresia-terminos-header h2 { color: var(--wps-verde); text-transform: uppercase; margin-bottom: 0.4rem; }
.wps-membresia-terminos-subtitulo { color: var(--wps-gris-medio); font-size: 0.85rem; }
.wps-membresia-terminos-iframe-wrap { margin: 1rem 0; border-radius: 0.75rem; overflow: hidden; background: #f5f5f5; }
.wps-membresia-terminos-iframe { width: 100%; min-height: 60vh; border: none; }
/* v0.2.56: enlace de escape del iframe de términos (por si el dominio bloquea el framing). */
.wps-membresia-terminos-abrir { font-size: 0.85rem; color: var(--wps-gris-medio); margin: 0.2rem 0 0.8rem; text-align: center; }
.wps-membresia-terminos-legal { font-size: 0.85rem; color: var(--wps-gris-medio); margin-bottom: 1rem; }
.wps-membresia-terminos-checkbox { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.25rem; }
.wps-membresia-terminos-checkbox input { margin-top: 0.2rem; }
/* v0.2.116 (reporte de Deiby): en algunos teléfonos el botón ACEPTAR (al final del formulario
   de aceptación de políticas) quedaba tapado por el nav inferior fijo (~4.6rem) y sin espacio
   para tocarlo — esta pantalla no lleva la franja de crédito que en otras da ese despeje. Se
   agrega despeje amplio abajo y se centra el botón, sin tocar la alineación del texto legal. */
.wps-pagina-membresia-terminos .wps-main { padding-bottom: 7rem; }
#wps-form-aceptar-terminos { text-align: center; }
#wps-form-aceptar-terminos .wps-membresia-terminos-legal,
#wps-form-aceptar-terminos .wps-membresia-terminos-checkbox { text-align: left; }
#wps-btn-aceptar-terminos { min-width: 14rem; margin: 0.75rem 0 1rem; }

/* ── PERFIL ──────────────────────────────────────────────────────────── */
.wps-perfil-header { text-align: center; margin-bottom: 1.5rem; }
/* Tarjeta de membresía (réplica de CardProfile.tsx) — hallazgo #7 del DIFF, 2026-07-27.
   v0.2.60 (diseño enviado por Deiby): tarjeta verde OSCURO con el logo CN legible arriba a la
   derecha, y el nombre + número de identificación DENTRO de la tarjeta. */
.wps-perfil-membresia { margin-bottom: 1.5rem; }
.wps-perfil-membresia-card {
	background: var(--wps-verde);
	border-radius: 1.1rem;
	/* v0.2.73: tarjeta más grande. v0.2.74: layout en COLUMNA (logo en su propia fila arriba a la
	   derecha, luego el texto) — antes el logo iba absoluto y se encimaba con el nombre. */
	padding: 1.4rem 1.5rem 1.7rem;
	min-height: 12rem;
	color: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(13, 82, 44, 0.22);
}
/* v0.2.74: logo CN recortado (CN_BLANCO_CROP.png, aspecto ~2.9:1), grande y legible, alineado a la
   derecha en su propia fila arriba — sin encimarse con el texto. */
.wps-perfil-membresia-logo {
	align-self: flex-end;
	width: 9.5rem;
	max-width: 62%;
	height: auto;
	object-fit: contain;
	margin-bottom: 0.5rem;
}
.wps-perfil-membresia-datos { margin-top: auto; } /* empuja el texto a la base de la tarjeta. */
.wps-perfil-membresia-nombre { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.2rem; line-height: 1.2; }
.wps-perfil-membresia-id { font-size: 1.08rem; margin: 0 0 0.7rem; letter-spacing: 0.02em; }
.wps-perfil-membresia-texto { font-size: 1.02rem; margin: 0 0 0.25rem; }
.wps-perfil-membresia-renovacion { font-size: 0.95rem; margin: 0; opacity: 0.95; }
.wps-perfil-membresia-boton {
	display: block;
	text-align: center;
	margin-top: 0.75rem;
	background: var(--wps-verde);
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	border-radius: 2rem;
	padding: 0.75rem 1rem;
}
/* v0.2.60: botón "Ver Certificado" — verde lima (réplica del diseño enviado), debajo de la tarjeta. */
.wps-perfil-certificado-boton {
	display: block;
	text-align: center;
	margin-top: 0.85rem;
	background: var(--wps-verde-claro);
	color: #fff;
	font-weight: 700;
	border-radius: 2rem;
	padding: 0.8rem 1rem;
	text-decoration: none;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 0.95rem;
}
.wps-perfil-certificado-boton:hover { filter: brightness(0.96); }

/* ── CERTIFICADO DE DONACIÓN (autocontenido — v0.2.61) ───────────────────
   Réplica del diseño enviado por Deiby (DonationCertificateScreen.tsx): tarjeta verde con el
   logo CN, "Certifica que", el nombre del socio, el texto de donación y el cierre. No depende de
   ninguna imagen externa (así siempre carga y se puede compartir como PNG). */
.wps-certificado-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 0.5rem 0 1.5rem; }
.wps-certificado-card {
	position: relative;
	width: 100%;
	max-width: 24rem;
	border-radius: 1rem;
	overflow: hidden;
	background: linear-gradient(180deg, #0f5a30 0%, #0a3d22 55%, #082d19 100%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	color: #fff;
}
/* v0.2.66: certificado autocontenido, en orden vertical limpio (sin banner de fondo). */
.wps-certificado-cuerpo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.5rem 1.75rem 2.75rem;
}
.wps-certificado-logo { width: 5rem; height: auto; object-fit: contain; margin: 0 0 1.75rem; }
.wps-certificado-certifica { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 0.5rem; opacity: 0.85; }
.wps-certificado-nombre { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; line-height: 1.25; word-break: break-word; }
.wps-certificado-texto { font-size: 0.95rem; line-height: 1.55; margin: 0 0.25rem; opacity: 0.95; }
.wps-certificado-divisor { display: block; width: 3.5rem; height: 2px; background: rgba(255, 255, 255, 0.5); margin: 1.5rem auto; border-radius: 2px; }
.wps-certificado-gracias { font-size: 0.85rem; line-height: 1.55; margin: 0 0.25rem; opacity: 0.8; }
.wps-certificado-compartir {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid var(--wps-verde);
	background: #fff;
	color: var(--wps-verde);
	font-weight: 600;
	border-radius: 2rem;
	padding: 0.75rem 2rem;
	text-decoration: none;
}
.wps-certificado-compartir-icono { width: 1rem; height: 1rem; object-fit: contain; }

/* ── BLOQUEO "ACCESO EXCLUSIVO PARA SOCIOS" (v0.2.63) ────────────────────
   Pantalla atractiva cuando un no-socio entra a un apartado de socios: tarjeta verde con badge,
   candado, mensaje llamativo y CTA. Animaciones sutiles: la tarjeta entra con fade+subida y el
   botón late suavemente para invitar al toque. Respeta prefers-reduced-motion. */
.wps-gate { display: flex; justify-content: center; padding: 1.5rem 0.5rem 2.5rem; }
.wps-gate-card {
	position: relative;
	width: 100%;
	max-width: 23rem;
	text-align: center;
	color: #fff;
	background: linear-gradient(160deg, #0f5a30 0%, #0d522c 55%, #093c20 100%);
	border-radius: 1.25rem;
	padding: 2.5rem 1.75rem 2rem;
	box-shadow: 0 14px 34px rgba(9, 46, 26, 0.28);
	overflow: hidden;
	animation: wps-gate-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.wps-gate-badge {
	display: inline-block;
	background: var(--wps-verde-claro);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border-radius: 2rem;
	margin-bottom: 1.4rem;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.wps-gate-icono {
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	animation: wps-gate-float 3.5s ease-in-out infinite;
}
.wps-gate-titulo { font-size: 1.45rem; font-weight: 800; margin: 0 0 0.6rem; line-height: 1.2; }
.wps-gate-texto { font-size: 0.98rem; line-height: 1.55; margin: 0 auto 1.6rem; opacity: 0.94; max-width: 20rem; }
.wps-gate-cta {
	display: inline-block;
	background: var(--wps-verde-claro);
	color: #fff;
	font-weight: 800;
	font-size: 1.02rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 2rem;
	padding: 0.9rem 2.4rem;
	box-shadow: 0 6px 18px rgba(110, 180, 42, 0.4);
	animation: wps-gate-pulse 2.2s ease-in-out infinite;
	transition: transform 0.12s ease;
}
.wps-gate-cta:hover { transform: translateY(-2px); }
.wps-gate-cta:active { transform: translateY(0); }
/* v0.2.106: enlace secundario del gate (ej. "¿Ya tienes cuenta? Inicia sesión"). */
.wps-gate-cta-secundaria {
	display: inline-block;
	margin-top: 0.9rem;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: underline;
	opacity: 0.92;
}
.wps-gate-cta-secundaria:hover { opacity: 1; }
@keyframes wps-gate-in {
	from { opacity: 0; transform: translateY(18px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wps-gate-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}
@keyframes wps-gate-pulse {
	0%, 100% { box-shadow: 0 6px 18px rgba(110, 180, 42, 0.4); transform: scale(1); }
	50% { box-shadow: 0 8px 24px rgba(110, 180, 42, 0.6); transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
	.wps-gate-card, .wps-gate-icono, .wps-gate-cta { animation: none; }
}
.wps-perfil-menu { display: flex; flex-direction: column; gap: 0.1rem; }
.wps-perfil-item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 0.2rem;
	border-bottom: 1px solid #eee;
	text-decoration: none;
	color: var(--wps-gris-oscuro);
	font-weight: 600;
}
.wps-perfil-item .wps-icon,
.wps-perfil-item .wps-icon-fallback { width: 1.6rem; height: 1.6rem; }
.wps-tabs { display: flex; border-bottom: 2px solid var(--wps-verde); margin-bottom: 1.25rem; }
.wps-tab { flex: 1; text-align: center; padding: 0.5rem; font-weight: 700; color: var(--wps-verde); text-decoration: none; }
.wps-tab.wps-tab-activo { background: var(--wps-verde); color: #fff; border-radius: 0.4rem; }
/* v0.2.73 (pedido de Deiby: "ordenar el historial, se ve descuadrado y feo, como el PDF"):
   cada orden es una tarjeta blanca redondeada con sombra sutil; estado en verde + badge de portal. */
.wps-orden-card {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	background: #fff;
	border: 1px solid #eef0ee;
	border-radius: 0.9rem;
	padding: 0.9rem;
	margin-bottom: 0.9rem;
	box-shadow: 0 4px 14px rgba(13, 82, 44, 0.08);
}
.wps-orden-card img { width: 3.75rem; height: 3.75rem; border-radius: 0.6rem; object-fit: cover; background: #f2f2f2; flex-shrink: 0; }
.wps-orden-info { flex: 1; min-width: 0; }
.wps-orden-info > strong { display: block; font-size: 0.98rem; margin-bottom: 0.15rem; }
.wps-orden-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.wps-orden-estado { font-size: 0.92rem; font-weight: 700; color: var(--wps-verde); }
.wps-orden-portal-badge {
	display: inline-block;
	padding: 0.22rem 0.7rem;
	background: var(--wps-verde);
	color: #fff;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
}
.wps-orden-meta { font-size: 0.8rem; color: var(--wps-gris-medio); margin-top: 0.3rem; }
.wps-orden-ver-detalle { display: inline-block; margin-top: 0.5rem; color: var(--wps-verde); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.wps-orden-ver-detalle:hover { text-decoration: underline; }

/* Tabla de detalle de orden — tabla nativa con columnas de ancho fijo (alineación perfecta). */
.wps-tabla-orden { width: 100%; border-collapse: collapse; margin-top: 0.85rem; font-size: 0.92rem; }
.wps-tabla-orden thead th {
	color: var(--wps-verde);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0 0 0.55rem;
	border-bottom: 2px solid var(--wps-verde);
}
.wps-tabla-orden .wps-col-prod { text-align: left; }
.wps-tabla-orden .wps-col-cant { text-align: center; width: 4.5rem; white-space: nowrap; }
.wps-tabla-orden .wps-col-monto { text-align: right; width: 6rem; white-space: nowrap; }
.wps-tabla-orden tbody td { padding: 0.65rem 0; border-bottom: 1px solid #eee; vertical-align: middle; color: var(--wps-gris-oscuro); }
.wps-orden-cant-pill {
	display: inline-block;
	min-width: 1.9rem;
	padding: 0.18rem 0.55rem;
	background: #eef3ec;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--wps-verde);
	line-height: 1.2;
}
.wps-tabla-orden tfoot td { padding-top: 0.8rem; border-top: 2px solid var(--wps-verde); }
.wps-orden-total-label { font-weight: 800; color: var(--wps-verde); }
.wps-orden-total-monto { font-weight: 800; color: var(--wps-verde); }

/* ── TÉRMINOS / WEBVIEW ─────────────────────────────────────────────── */
.wps-terminos-frame { width: 100%; min-height: 70vh; border: none; border-radius: 0.6rem; background: #fff; }
/* v0.2.58: enlace de escape del iframe (Términos) cuando el sitio externo tarda. */
.wps-iframe-escape { font-size: 0.85rem; color: var(--wps-gris-medio); text-align: center; margin: 0.6rem 0 0; }
/* v0.2.58: pantalla de Información — contenido propio (HTML) dentro de la app. */
.wps-informacion-contenido { color: var(--wps-gris-oscuro); line-height: 1.6; }
.wps-informacion-contenido p { margin: 0 0 1rem; }
.wps-informacion-contenido h2,
.wps-informacion-contenido h3 { color: var(--wps-verde); margin: 1.4rem 0 0.6rem; }
.wps-informacion-contenido img { max-width: 100%; height: auto; border-radius: 0.6rem; display: block; margin: 0.6rem 0; }
.wps-informacion-contenido a { color: var(--wps-verde); }
.wps-informacion-contenido ul,
.wps-informacion-contenido ol { padding-left: 1.2rem; margin: 0 0 1rem; }

/* ── RESPONSIVE (mobile-first: esta es la única sección "hacia arriba") ──
 * Base de todo el archivo = teléfono angosto. Abajo, dos ajustes en el
 * sentido correcto de mobile-first:
 *   1) <360px  → pantallas muy angostas (iPhone SE y similares): apretar
 *      paddings y bajar un pelín las tipografías para que quepa todo sin
 *      que el layout se sienta apretado contra el borde.
 *   2) >=640px → tablet/escritorio: el "standard" replica una app de
 *      celular a propósito (Deiby: "copiar el HTML... de app móvil"), así
 *      que NO se convierte en un layout de escritorio; se enmarca la
 *      tarjeta de 480px como vista previa de teléfono en vez de dejarla
 *      flotando sola contra el fondo blanco.
 */
@media (max-width: 359px) {
	.wps-header { padding: 1rem 1rem 0.85rem; }
	.wps-main { padding: 1rem 1rem 0.85rem; }
	.wps-header-titulo { font-size: 1.15rem; }
	.wps-home-lista { gap: 0.7rem; }
	.wps-montos-grid { gap: 0.5rem; }
	.wps-producto-card { width: 8.25rem; }
}

@media (min-width: 640px) {
	body {
		background: #f1f3f1;
	}
	.wps-app {
		margin: 1.5rem auto;
		min-height: calc(100vh - 3rem);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.12);
		border-radius: 1rem;
		overflow: hidden;
	}
	.wps-header {
		border-radius: 0; /* la tarjeta ya redondea las esquinas exteriores */
	}
	.wps-footer {
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
	}
}

/* ── BOTÓN "INSTALAR APP" (v0.2.23) ─────────────────────────────────────
   Globito discreto, arranca oculto (WPS_Pwa::boton_instalar_html() ya lo
   imprime con display:none inline) — wps-front.js decide si corresponde
   mostrarlo según la plataforma.

   HISTORIAL DE POSICIONAMIENTO (importante para no repetir el mismo error):
   - v0.2.23: envoltura `position:fixed` (esta regla), impresa en TODAS las
     páginas del plugin vía wp_footer.
   - v0.2.27: con padding-right 0.85rem quedaba anclado casi al mismo punto
     que la campana del header de Inicio — se tapaban entre sí (Deiby: "hay
     una campanita que choca con el símbolo de descarga"). Se corrió con
     padding-right 0.85rem → 4rem.
   - v0.2.29: ese parche (4rem) solo "acomodaba" la coincidencia, no la
     arreglaba de raíz — seguía siendo 2 posicionamientos independientes que
     debían coincidir por casualidad, y en Inicio (header alto de 2 líneas,
     bloque `foto_perfil`) volvían a quedar corridos verticalmente uno del
     otro (Deiby, con captura: "se ve corrido no se ven profesionales").
     Arreglado de raíz: el botón ahora vive DENTRO del `<header>` flex de
     WPS_Template::header() en todas las páginas que tienen header (ver
     `.wps-pwa-boton` más abajo, sin envoltura ahí) — hereda el mismo
     `align-items:center` que la campana, en cualquier alto de header, sin
     depender de coincidencias. Esta envoltura `position:fixed` queda viva
     SOLO para las 2 páginas sin `<header>` (Login/Registro-exitoso, ver
     WPS_Pwa::imprimir_boton_instalar_flotante()), donde no hay ninguna
     campana con la que alinearse. */
.wps-pwa-boton-envoltura {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 480px;
	z-index: 110;
	display: flex;
	justify-content: flex-end;
	padding: 0.85rem 4rem 0 0;
	pointer-events: none;
}
.wps-pwa-boton {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0; /* v0.2.29: ahora vive dentro del <header> flex (ver WPS_Template::header()) — sin esto, un título largo lo podría comprimir. */
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: none;
	background: rgba(13, 82, 44, 0.85);
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}
/*
 * v0.2.28 — pulso de "llamar la atención" (a pedido de Deiby: "un globito
 * vibrando... como Claude... para llamar la atención"): anillo verde que se
 * expande y se desvanece en loop, mismo patrón que un badge de notificación.
 * wps-front.js agrega la clase `wps-pwa-pulsando` recién cuando el botón pasa
 * a ser visible (nunca antes, para no pulsar un botón oculto) y la quita sola
 * a los 7 segundos (pedido explícito de Deiby) o al primer toque, lo que
 * ocurra primero. `prefers-reduced-motion` la desactiva por completo — no hay
 * forma de "pedir menos movimiento" desde JS de forma más confiable que dejar
 * que el propio navegador la corte acá.
 */
.wps-pwa-boton.wps-pwa-pulsando {
	animation: wps-pwa-pulso 2.2s ease-out infinite;
}
/*
 * El anillo es BLANCO (no verde) a propósito: el botón vive sobre el header
 * verde oscuro (--wps-verde: #0d522c) — un anillo del mismo verde con
 * transparencia queda casi invisible ahí (probado y descartado con una
 * captura real). Blanco sobre verde oscuro sí se ve, igual que el resto de
 * los íconos del header (que también son blancos por el mismo motivo).
 */
@keyframes wps-pwa-pulso {
	0% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.55); }
	70% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 0.85rem rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.wps-pwa-boton.wps-pwa-pulsando { animation: none; }
}
.wps-pwa-instrucciones {
	/* SEGURIDAD: no aplica — solo estilos visuales. IMPORTANTE: "display" default es
	   "none" acá (NO "flex" en esta misma regla) porque el atributo HTML `hidden`
	   (que wps-front.js activa/desactiva) tiene la MISMA especificidad que una clase
	   sola — si "display:flex" estuviera acá, esta regla le ganaría a "[hidden]
	   {display:none}" del navegador por orden de aparición, y el panel quedaría
	   visible (e interceptando clicks) aunque tuviera el atributo hidden puesto.
	   Verificado con Playwright: sin este split, el panel bloqueaba los clicks del
	   botón de instalar aunque estuviera "oculto". */
	position: fixed;
	inset: 0;
	z-index: 200;
	align-items: flex-end;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	padding: 1rem;
	display: none;
}
.wps-pwa-instrucciones:not([hidden]) {
	display: flex;
}
.wps-pwa-instrucciones-caja {
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem;
	width: 100%;
	max-width: 420px;
	text-align: center;
}
.wps-pwa-instrucciones-titulo {
	color: var(--wps-verde);
	font-weight: 700;
	font-size: 1.15rem;
	margin-top: 0;
}
.wps-pwa-instrucciones-caja p { line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════
   MICROINTERACCIONES / ANIMACIONES SUTILES DE BOTONES (v0.2.67)
   Pedido de Deiby: darle a TODOS los botones de la app animaciones sutiles
   para mejorar el look & feel. Todo respeta prefers-reduced-motion (abajo).
   ══════════════════════════════════════════════════════════════════════ */

/* Botones primarios (.wps-btn): CONFIRMAR, PAGAR/DONAR, RESERVAR, Ingresar, etc.
   Elevación + sombra al pasar/tocar, y "presión" al hacer clic. */
.wps-btn {
	transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, filter 0.14s ease;
}
.wps-btn:not(:disabled):not(.wps-btn-disabled):hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(13, 82, 44, 0.25);
}
.wps-btn:not(:disabled):not(.wps-btn-disabled):active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(13, 82, 44, 0.2);
}
.wps-btn-secundario:not(:disabled):hover { background: #f2f7f2; }

/* Footer / nav inferior (Inicio, Tienda, Reservas, Perfil): hover muy sutil —
   el ícono sube un poco y toma opacidad plena, y "presiona" al tocar. */
.wps-footer-item { transition: transform 0.14s ease, opacity 0.14s ease; opacity: 0.92; }
.wps-footer-item .wps-icon,
.wps-footer-item .wps-icon-fallback,
.wps-footer-item .wps-icon-mascara { transition: transform 0.16s ease; }
.wps-footer-item:hover { opacity: 1; }
.wps-footer-item:hover .wps-icon,
.wps-footer-item:hover .wps-icon-fallback,
.wps-footer-item:hover .wps-icon-mascara { transform: translateY(-2px) scale(1.06); }
.wps-footer-item:active { transform: scale(0.96); }

/* Perfil: cada fila del menú (Información personal, Mis órdenes, etc.) se
   desliza levemente y realza el chevron; el botón de cerrar sesión se cubre en
   la regla global de .wps-btn de arriba. */
.wps-perfil-item { transition: background 0.14s ease, transform 0.14s ease, padding-left 0.14s ease; border-radius: 0.5rem; }
.wps-perfil-item:hover { background: #f2f7f2; transform: translateX(2px); padding-left: 0.5rem; }
.wps-perfil-item .wps-icon,
.wps-perfil-item .wps-icon-fallback { transition: transform 0.16s ease; }
.wps-perfil-item:hover .wps-icon,
.wps-perfil-item:hover .wps-icon-fallback { transform: scale(1.08); }
.wps-perfil-item:active { transform: translateX(0) scale(0.995); }
.wps-perfil-membresia-boton { transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
.wps-perfil-membresia-boton:hover { transform: translateY(-2px); filter: brightness(1.03); }

/* Tienda: botón "Ver más" de cada categoría — realce sutil. */
.wps-ver-mas { transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease; }
.wps-ver-mas:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 4px 10px rgba(0, 82, 43, 0.28); }
.wps-ver-mas:active { transform: scale(0.97); }

/* "Ser socio" / CTA de membresía: latido de atención sutil (mismo espíritu que
   el pulso del botón de instalar la app). Aplica al CTA del Inicio y al de la
   tarjeta de Perfil. El botón del gate de socios ya tiene su propio pulso. */
.wps-home-cta,
.wps-perfil-membresia-boton {
	animation: wps-cta-latido 2.6s ease-in-out infinite;
}
.wps-home-cta { transition: transform 0.14s ease, box-shadow 0.14s ease; }
.wps-home-cta:hover { transform: translateY(-2px); }
@keyframes wps-cta-latido {
	0%, 100% { box-shadow: 0 4px 12px rgba(110, 180, 42, 0.28); }
	50% { box-shadow: 0 6px 20px rgba(110, 180, 42, 0.55); }
}

/* Badge del carrito: "pop" breve cada vez que se agrega algo (wps-front.js le
   pone la clase al actualizar el contador). */
.wps-carrito-badge { transition: transform 0.14s ease; }
.wps-carrito-badge.wps-badge-pop { animation: wps-badge-pop 0.55s ease; }
@keyframes wps-badge-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.45); }
	60% { transform: scale(0.9); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.wps-btn,
	.wps-footer-item,
	.wps-footer-item .wps-icon,
	.wps-footer-item .wps-icon-fallback,
	.wps-footer-item .wps-icon-mascara,
	.wps-perfil-item,
	.wps-perfil-item .wps-icon,
	.wps-perfil-item .wps-icon-fallback,
	.wps-perfil-membresia-boton,
	.wps-perfil-membresia-boton::after,
	.wps-ver-mas,
	.wps-home-cta,
	.wps-carrito-badge,
	.wps-descuento-badge,
	.wps-producto-card .wps-producto-precio { transition: none; animation: none; }
	.wps-descuento-badge { transform: none; }
	.wps-btn:hover, .wps-footer-item:hover, .wps-perfil-item:hover, .wps-ver-mas:hover, .wps-home-cta:hover, .wps-perfil-membresia-boton:hover { transform: none; }
}

/* ── TIENDA / DETALLE DE PRODUCTO — rediseño v0.2.79 ─────────────────────────
   Pedido de Deiby (capturas "MI PROVISIÓN" de `Conexión Natural APP.pdf`, pág. catálogo
   y detalle): "tipo McDonald's, sombras, algo bien profesional". Estructura:
   - Toda la pantalla es verde oscuro; el header solo lleva la flecha + título en LIMA,
     mayúsculas y espaciado (izquierda) + el carrito (se conserva, pedido explícito).
   - El contenido (`.wps-main`) es una "hoja" clara con esquinas superiores redondeadas
     que se monta sobre el verde, con sombra hacia arriba.
   - Nombre de la localización como título grande centrado en lima; buscador en píldora
     con borde lima y lupa a la derecha; categorías con "•••" (= Ver más) en lima.
   - Fichas de producto blancas con sombra real (elevación), imagen redondeada, nombre y
     precio centrados. Badge "-X%" rojo sobre la imagen (ya existía).
   - Detalle: fila "← Producto" + tarjeta blanca con sombra que contiene media, puntos,
     Descripción, existencia (chip lima), Cant./Donación en píldoras grises y el botón
     AGREGAR en lima, grande, a la DERECHA (zona del pulgar) y con pulso leve.
   ------------------------------------------------------------------------------ */
.wps-pagina-tienda,
.wps-pagina-producto { background: var(--wps-verde); }
.wps-pagina-tienda .wps-header,
.wps-pagina-producto .wps-header {
	border-radius: 0;
	padding: 2.4rem 1.5rem 2.6rem;
	min-height: 0;
	gap: 0.6rem;
}
.wps-pagina-tienda .wps-header-back,
.wps-pagina-producto .wps-header-back { color: var(--wps-verde-claro); font-size: 1.45rem; }
.wps-pagina-tienda .wps-header-titulos,
.wps-pagina-producto .wps-header-titulos { text-align: left; }
.wps-pagina-tienda .wps-header-titulo,
.wps-pagina-producto .wps-header-titulo {
	color: var(--wps-verde-claro);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.wps-pagina-tienda .wps-main,
.wps-pagina-producto .wps-main {
	background: #f4f5f3;
	border-radius: 1.6rem 1.6rem 0 0;
	margin-top: -1.4rem;
	padding: 2rem 1.25rem 2.5rem;
	box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.22);
	position: relative;
	z-index: 1;
}

/* Nombre de la localización: título grande centrado en lima (el pin ya no se muestra acá). */
.wps-pagina-tienda .wps-ubicacion,
.wps-pagina-producto .wps-ubicacion { justify-content: center; margin-bottom: 1.1rem; }
.wps-pagina-tienda .wps-ubicacion-pin,
.wps-pagina-producto .wps-ubicacion-pin { display: none; }
.wps-pagina-tienda .wps-ubicacion-nombre,
.wps-pagina-producto .wps-ubicacion-nombre {
	color: var(--wps-verde-claro);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
}
/* Con 2+ sucursales sigue siendo botón (abre el modal), pero sin la píldora blanca: solo
   el nombre grande + chevron lima debajo, para que se entienda que se puede tocar. */
.wps-pagina-tienda .wps-ubicacion-boton,
.wps-pagina-producto .wps-ubicacion-boton {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	flex-direction: column;
	gap: 0.35rem;
}
.wps-pagina-tienda .wps-ubicacion-boton:hover,
.wps-pagina-producto .wps-ubicacion-boton:hover { box-shadow: none; transform: none; }
.wps-pagina-tienda .wps-ubicacion-boton .wps-ubicacion-nombre,
.wps-pagina-producto .wps-ubicacion-boton .wps-ubicacion-nombre { white-space: normal; }
.wps-pagina-tienda .wps-ubicacion-chevron,
.wps-pagina-producto .wps-ubicacion-chevron { border-color: var(--wps-verde-claro); width: 0.6rem; height: 0.6rem; margin: 0 0 0.3rem; }

/* Buscador: píldora con borde lima, texto en mayúsculas espaciado y lupa a la derecha. */
.wps-pagina-tienda .wps-buscador,
.wps-pagina-producto .wps-buscador { position: relative; margin-bottom: 1.6rem; }
.wps-pagina-tienda .wps-buscador input,
.wps-pagina-producto .wps-buscador input {
	border: 1.5px solid var(--wps-verde-claro);
	background: #fff;
	padding: 0.85rem 3rem 0.85rem 1.4rem;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wps-verde);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.wps-pagina-tienda .wps-buscador input::placeholder,
.wps-pagina-producto .wps-buscador input::placeholder { color: var(--wps-verde-claro); opacity: 1; }
.wps-buscador-lupa {
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.35rem;
	height: 1.35rem;
	color: var(--wps-verde-claro);
	pointer-events: none;
}

/* Categorías: título verde oscuro + "•••" lima a la derecha (= Ver más). */
.wps-pagina-tienda .wps-categoria-block { margin-bottom: 1.5rem; }
.wps-pagina-tienda .wps-categoria-titulo { font-size: 1.15rem; font-weight: 700; color: var(--wps-verde); }
.wps-pagina-tienda .wps-ver-mas {
	background: none;
	color: var(--wps-verde-claro);
	font-size: 1.6rem;
	line-height: 0.5;
	letter-spacing: 0.08em;
	padding: 0.4rem 0.2rem;
	font-weight: 800;
}
/* En el catálogo las fichas van en cuadrícula de 2 (réplica del PDF), no en carrusel horizontal. */
.wps-pagina-tienda .wps-carrusel-categoria {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	overflow: visible;
	padding-bottom: 0;
}
.wps-pagina-tienda .wps-grid-productos { gap: 1rem; }
.wps-pagina-tienda .wps-carrusel-categoria .wps-producto-card { width: auto; }
.wps-pagina-tienda .wps-producto-card {
	border-radius: 1rem;
	padding: 0.6rem 0.6rem 0.9rem;
	text-align: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wps-pagina-tienda .wps-producto-card:hover { box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08); }
.wps-pagina-tienda .wps-producto-img-wrap { border-radius: 0.8rem; }
.wps-pagina-tienda .wps-producto-nombre { color: var(--wps-verde); font-size: 0.95rem; font-weight: 700; margin-top: 0.7rem; }
.wps-pagina-tienda .wps-producto-precio { color: var(--wps-gris-medio); font-weight: 500; font-size: 0.95rem; margin-top: 0.15rem; }
.wps-pagina-tienda .wps-producto-precio-tachado { margin: 0; font-size: 0.8rem; }

/* ── Detalle ── */
.wps-detalle-titulo-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}
.wps-detalle-volver {
	color: var(--wps-verde-claro);
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}
.wps-pagina-producto .wps-detalle-nombre {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 1.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wps-detalle-tarjeta {
	background: #fff;
	border-radius: 1.1rem;
	padding: 1.1rem 1.1rem 1.4rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wps-pagina-producto .wps-detalle-media { margin-bottom: 1rem; }
.wps-pagina-producto .wps-detalle-media img,
.wps-pagina-producto .wps-carrusel-slide img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 0.8rem; }
.wps-pagina-producto .wps-carrusel-punto { background: #fff; border: 1.5px solid var(--wps-verde-claro); box-sizing: border-box; }
.wps-pagina-producto .wps-carrusel-punto--activo { background: var(--wps-verde-claro); }
.wps-pagina-producto .wps-detalle-seccion { flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-bottom: 0.3rem; }
.wps-pagina-producto .wps-seccion-titulo { color: var(--wps-verde); font-weight: 700; font-size: 1.15rem; }
.wps-pagina-producto .wps-detalle-descripcion { margin-bottom: 0.7rem; font-size: 0.98rem; }
.wps-pagina-producto .wps-existencia-badge {
	border: none;
	border-left: 2px solid var(--wps-verde-claro);
	border-bottom: 1px solid var(--wps-verde-claro);
	border-radius: 0;
	color: var(--wps-verde-claro);
	padding: 0.1rem 0.5rem 0.15rem;
	font-size: 0.8rem;
	display: inline-block;
	margin-bottom: 1.2rem;
}
/* v0.2.80 — Barra FLOTANTE de compra (referencia: app de McDonald's, captura de Deiby):
   fija sobre el nav inferior, píldora lima con el stepper blanco a la izquierda y el botón
   "Agregar  $precio" ocupando el resto. Pulso leve continuo (pedido: "pulsación leve");
   sin pulso cuando está AGOTADO o el usuario prefiere menos movimiento. */
.wps-pagina-producto .wps-main { padding-bottom: 7.5rem; }
.wps-detalle-flotante {
	position: fixed;
	left: 50%;
	bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	width: calc(100% - 2rem);
	max-width: 448px;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--wps-verde-claro);
	border-radius: 3rem;
	padding: 0.5rem 0.5rem 0.5rem 0.55rem;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
	animation: wps-agregar-pulso 2.4s ease-in-out infinite;
}
.wps-detalle-flotante .wps-cantidad-selector {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 2rem;
	padding: 0.15rem 0.3rem;
	gap: 0;
}
.wps-detalle-flotante .wps-cantidad-selector button {
	width: 2.4rem;
	height: 2.4rem;
	border: none;
	background: none;
	color: var(--wps-verde);
	font-size: 1.45rem;
	font-weight: 700;
	border-radius: 50%;
	cursor: pointer;
}
.wps-detalle-flotante .wps-cantidad-selector button:active { background: rgba(13, 82, 44, 0.1); }
.wps-detalle-flotante .wps-cantidad-selector input {
	width: 2rem;
	text-align: center;
	border: none;
	background: none;
	color: var(--wps-gris-oscuro);
	font-weight: 700;
	font-size: 1.05rem;
	-moz-appearance: textfield;
}
.wps-detalle-flotante .wps-cantidad-selector input::-webkit-outer-spin-button,
.wps-detalle-flotante .wps-cantidad-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wps-detalle-flotante .wps-btn-agregar {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	background: none;
	color: #fff;
	border: none;
	border-radius: 2rem;
	padding: 0.6rem 0.9rem 0.6rem 0.6rem;
	min-height: 2.9rem;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}
.wps-detalle-flotante .wps-btn-agregar:active { transform: scale(0.98); }
.wps-detalle-flotante .wps-precio-donacion {
	color: #fff;
	font-weight: 800;
	font-size: 1.15rem;
	margin: 0;
	white-space: nowrap;
}
.wps-detalle-flotante--agotado {
	background: var(--wps-gris-claro);
	animation: none;
}
.wps-detalle-flotante--agotado .wps-btn-agregar[disabled] { background: none; color: #fff; cursor: not-allowed; }
@keyframes wps-agregar-pulso {
	0%, 100% { transform: translateX(-50%) scale(1);    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); }
	50%      { transform: translateX(-50%) scale(1.02); box-shadow: 0 14px 34px rgba(110, 180, 42, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
	.wps-detalle-flotante { animation: none; }
}
/* "← Regresar a categorías" (búsqueda / categoría completa) con el mismo lenguaje que el "←" del detalle. */
.wps-pagina-tienda .wps-volver-catalogo { margin: 0 0 0.6rem; }
.wps-pagina-tienda .wps-volver-catalogo a { color: var(--wps-verde-claro); font-weight: 700; text-decoration: none; font-size: 0.95rem; }
.wps-pagina-tienda .wps-grid-productos .wps-producto-card { width: auto; }
/* El crédito del pie queda sobre el verde de la página: mismo ajuste de contraste que en Login (ADR-030). */
.wps-pagina-tienda .wps-footer-credito,
.wps-pagina-producto .wps-footer-credito { color: #cfe3d3; }
.wps-pagina-tienda .wps-footer-credito a,
.wps-pagina-producto .wps-footer-credito a { color: #ACCB46; }

/* ── MI PERFIL (edición) — v0.2.80 ────────────────────────────────────────
   Réplica visual de MyProfile.tsx tal como se ve en la app real (capturas de Deiby,
   2026-09-03: avatar arriba, tabs "Mis Datos" / "Direcciones", campos píldora con la
   etiqueta flotante ADENTRO del campo, botón CONFIRMAR verde centrado).
   Solo presentación: el <form>, sus names, la cascada AJAX y el guardado no cambian. */
.wps-perfil-avatar {
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
	background: #ececec;
	margin: 0.25rem auto 1.5rem;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.wps-perfil-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wps-perfil-avatar-wrap { position: relative; width: 7rem; margin: 0.25rem auto 1.5rem; }
.wps-perfil-avatar-wrap .wps-perfil-avatar { margin: 0; }
.wps-perfil-camara {
	position: absolute;
	right: -0.2rem;
	bottom: 0.1rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: #fff;
	border: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	color: var(--wps-gris-oscuro);
}
.wps-perfil-camara svg { width: 1.25rem; height: 1.25rem; }

/* Tabs: la activa es una píldora verde con texto blanco; la inactiva, texto verde con
   subrayado grueso (igual que la app). */
.wps-perfil-tabs {
	display: flex;
	margin-bottom: 1.25rem;
}
.wps-perfil-tab {
	flex: 1;
	background: none;
	border: none;
	border-bottom: 3px solid var(--wps-verde);
	color: var(--wps-verde);
	font: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	padding: 0.7rem 0.5rem;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 0;
	transition: background 0.15s ease, color 0.15s ease;
}
.wps-perfil-tab[aria-selected="true"] {
	background: var(--wps-verde);
	color: #fff;
	border-bottom-color: var(--wps-verde);
	border-radius: 0.75rem;
}
.wps-perfil-panel[hidden] { display: none; }

/* Campo píldora con etiqueta flotante adentro (2 clases para ganarle a `.wps-campo input`). */
.wps-campo-flotante { position: relative; margin-bottom: 0.9rem; }
.wps-campo-flotante > label {
	position: absolute;
	top: 0.6rem;
	left: 1.4rem;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 400;
	color: #6b6b6b;
	pointer-events: none;
	z-index: 1;
}
.wps-form .wps-campo-flotante input,
.wps-form .wps-campo-flotante textarea,
.wps-form .wps-campo-flotante button.wps-geo-trigger {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e3e3e3;
	border-radius: 2rem;
	background: #fff;
	padding: 1.65rem 1.4rem 0.6rem;
	min-height: 3.75rem;
	font-size: 1.05rem;
	color: var(--wps-gris-oscuro);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}
.wps-form .wps-campo-flotante textarea { border-radius: 1.5rem; min-height: 5.25rem; font-family: inherit; resize: vertical; }
.wps-form .wps-campo-flotante input:focus,
.wps-form .wps-campo-flotante textarea:focus,
.wps-form .wps-campo-flotante button.wps-geo-trigger:focus-visible {
	outline: none;
	border-color: var(--wps-verde-claro);
	box-shadow: 0 0 0 3px rgba(110, 180, 42, 0.25), 0 3px 10px rgba(0, 0, 0, 0.10);
}
.wps-form .wps-campo-flotante input::placeholder { color: #9a9a9a; opacity: 1; }
.wps-form .wps-campo-flotante button.wps-geo-trigger { transition: none; }
.wps-form .wps-campo-flotante .wps-geo-trigger--vacio .wps-geo-trigger-label { color: #9a9a9a; }

/* Direcciones → tarjeta "Principal" desplegable (borde píldora, título + lápiz + chevron). */
.wps-direccion-card {
	border: 1px solid #e3e3e3;
	border-radius: 1.5rem;
	padding: 0 1.2rem;
	margin-bottom: 1rem;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.wps-direccion-card > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.2rem 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--wps-gris-oscuro);
}
.wps-direccion-card > summary::-webkit-details-marker { display: none; }
.wps-direccion-lapiz { width: 1.1rem; height: 1.1rem; color: var(--wps-verde-claro); flex-shrink: 0; }
.wps-direccion-chevron {
	margin-left: auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--wps-gris);
	border-bottom: 2px solid var(--wps-gris);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	margin-right: 0.2rem;
}
.wps-direccion-card[open] > .wps-direccion-chevron,
.wps-direccion-card[open] > summary .wps-direccion-chevron { transform: rotate(225deg); margin-top: 0.3rem; }
.wps-direccion-cuerpo { padding: 0.2rem 0 1.1rem; }

/* Botón CONFIRMAR: verde, centrado, ancho contenido (como la app), con elevación. */
.wps-pagina-mi-perfil .wps-btn-confirmar {
	display: block;
	margin: 1.4rem auto 0.5rem;
	min-width: 60%;
	min-height: 3.2rem;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	box-shadow: 0 5px 14px rgba(13, 82, 44, 0.3);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wps-pagina-mi-perfil .wps-btn-confirmar:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(13, 82, 44, 0.35); }
.wps-pagina-mi-perfil .wps-btn-confirmar:active { transform: translateY(0); }

.wps-direccion-agregar {
	display: flex; align-items: center; justify-content: space-between;
	border: 1px solid #e3e3e3; border-radius: 2rem; padding: 0.95rem 1.4rem; margin-bottom: 1rem;
	background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10); color: #6b6b6b; font-size: 1.05rem; cursor: pointer;
}
.wps-direccion-mas { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--wps-verde-claro); color: #fff; font-weight: 800; font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; }

/* Celular: prefijo-país adelante (MyProfile.tsx styles.prefixContainer) + número, en una sola píldora. */
.wps-form .wps-campo-celular .wps-celular-pill {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid #e3e3e3;
	border-radius: 2rem;
	background: #fff;
	padding: 1.55rem 0.9rem 0.5rem 1.4rem;
	min-height: 3.75rem;
	box-sizing: border-box;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}
.wps-form .wps-campo-celular .wps-celular-pill:focus-within { border-color: var(--wps-verde-claro); box-shadow: 0 0 0 3px rgba(110, 180, 42, 0.25), 0 3px 10px rgba(0, 0, 0, 0.10); }
.wps-form .wps-campo-celular .wps-celular-prefijo { flex: 0 0 auto; }
.wps-form .wps-campo-celular .wps-celular-prefijo button.wps-geo-trigger {
	width: auto;
	min-height: 0;
	border: none;
	background: none;
	box-shadow: none;
	padding: 0.1rem 0.2rem;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--wps-gris-oscuro);
	gap: 0.3rem;
}
.wps-form .wps-campo-celular .wps-celular-prefijo .wps-geo-chevron { border-color: var(--wps-gris-oscuro); width: 0.45rem; height: 0.45rem; }
.wps-form .wps-campo-celular .wps-celular-pill input[type="tel"] {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	box-shadow: none;
	padding: 0.1rem 0.2rem;
	min-height: 0;
	font-size: 1.05rem;
}
.wps-form .wps-campo-celular .wps-celular-pill input[type="tel"]:focus { outline: none; box-shadow: none; }

/* "Dirección" en Mis Datos: solo lectura, al tocar lleva a la pestaña Direcciones (MyProfile.tsx:1173). */
.wps-form .wps-campo-flotante button.wps-campo-solo-lectura {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	border: 1px solid #e3e3e3;
	border-radius: 2rem;
	background: #fff;
	padding: 1.65rem 1.4rem 0.6rem;
	min-height: 3.75rem;
	font: inherit;
	font-size: 1.05rem;
	color: var(--wps-gris-oscuro);
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
	cursor: pointer;
}
.wps-form .wps-campo-flotante button.wps-campo-solo-lectura span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wps-campo-solo-lectura-chevron { width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--wps-verde-claro); border-bottom: 2px solid var(--wps-verde-claro); transform: rotate(-45deg); flex-shrink: 0; }

/* Modal "Seleccionar foto" (Photo.tsx:281-311). */
.wps-foto-opcion {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.9rem 0.6rem;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	color: var(--wps-gris-oscuro);
	font-size: 1rem;
}
.wps-foto-opcion svg { width: 1.5rem; height: 1.5rem; color: var(--wps-verde); flex-shrink: 0; }
.wps-foto-cancelar { margin-top: 0.9rem; }
.wps-perfil-avatar img.wps-foto-personalizada { background: #fff; }

/* Tarjeta de dirección: lápiz como botón, cuerpo, checkbox y acciones (AddressForm.tsx). */
/* Botones "de ícono" dentro del <form> del perfil: anulan la regla base `.wps-form button` (píldora verde). */
.wps-form .wps-direccion-lapiz-btn,
.wps-direccion-lapiz-btn { background: none; border: none; border-radius: 0; box-shadow: none; padding: 0.2rem; margin: 0; min-height: 0; cursor: pointer; display: inline-flex; color: var(--wps-verde-claro); }
.wps-direccion-lapiz-btn .wps-direccion-lapiz { width: 1.1rem; height: 1.1rem; }
.wps-direccion-card > summary { gap: 0.4rem; }
.wps-direccion-predeterminada { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0.4rem 1rem; font-size: 0.95rem; color: var(--wps-gris-oscuro); cursor: pointer; }
.wps-direccion-predeterminada input { width: 1.15rem; height: 1.15rem; accent-color: var(--wps-verde); margin: 0; }
.wps-direccion-acciones { display: flex; align-items: stretch; gap: 0.6rem; }
.wps-direccion-acciones .wps-btn-guardar-direccion { flex: 1; }
.wps-form .wps-btn-guardar-direccion,
.wps-direccion-acciones .wps-btn-guardar-direccion {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0.4rem 0 0;
	min-height: 3rem;
	box-shadow: 0 5px 14px rgba(13, 82, 44, 0.3);
}
.wps-direccion-borrar {
	flex: 0 0 auto;
	width: 3rem;
	margin-top: 0.4rem;
	border: none;
	border-radius: 0.8rem;
	background: #ff4d4f;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.wps-direccion-borrar svg { width: 1.25rem; height: 1.25rem; }
.wps-form .wps-direccion-mas,
.wps-direccion-mas { border: none; cursor: pointer; padding: 0; min-height: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--wps-verde-claro); color: #fff; font-weight: 800; font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: none; }
.wps-form .wps-direccion-borrar { min-height: 0; padding: 0; border-radius: 0.8rem; }

/* Modal "Editar nombre" (AddressForm.tsx:224-248). */
.wps-modal-nombre-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wps-borde);
	border-radius: 0.6rem;
	padding: 0.7rem 0.9rem;
	font-size: 1rem;
	margin-bottom: 1rem;
}
.wps-modal-nombre-acciones { display: flex; gap: 0.6rem; }
.wps-modal-nombre-acciones .wps-btn { flex: 1; margin: 0; padding-inline: 0.5rem; }

/* ── COOPERATIVA / DONACIONES — rediseño v0.2.83 (PDF "Cooperativa de Mujeres") ──
   Tarjeta blanca con sombra sobre fondo claro; media arriba (video con su cuadro oscurecido y
   botón de play, réplica de playButtonOverlay de CooperativeForm.tsx); título verde,
   descripción gris; montos en píldoras grises (la elegida en verde oscuro con texto blanco),
   "Otro valor" como píldora y DONAR en lima, todo en la misma cuadrícula de 2 columnas. */
.wps-pagina-cooperativa,
.wps-pagina-cooperativa .wps-main { background: #f4f5f3; }
.wps-coop-card {
	background: #fff;
	border-radius: 1.25rem;
	padding: 1.1rem 1.1rem 1.4rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wps-coop-media {
	position: relative;
	border-radius: 0.9rem;
	overflow: hidden;
	background: #000;
	margin-bottom: 1.1rem;
}
.wps-coop-media .wps-coop-video { margin: 0; border-radius: 0; display: block; width: 100%; }
.wps-coop-media-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 30, 40, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	padding: 0;
}
.wps-coop-media-overlay[hidden] { display: none; }
.wps-coop-play {
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.wps-coop-play svg { width: 1.6rem; height: 1.6rem; margin-left: 0.25rem; }
.wps-coop-card .wps-coop-titulo { font-size: 1.35rem; margin: 0 0 0.35rem; }
.wps-coop-card .wps-coop-desc { color: #7a7a7a; font-size: 1.02rem; line-height: 1.45; margin-bottom: 1.3rem; }
.wps-coop-card .wps-montos-grid { gap: 0.8rem; margin-bottom: 0.8rem; }
.wps-coop-card .wps-monto-btn {
	border: none;
	background: #f1f1f1;
	color: #7a7a7a;
	font-weight: 500;
	font-size: 1rem;
	padding: 0.95rem 0.5rem;
	border-radius: 2.5rem;
	transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.wps-coop-card .wps-monto-btn:active { transform: scale(0.98); }
.wps-coop-card .wps-monto-btn.wps-monto-seleccionado {
	background: var(--wps-verde);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 5px 14px rgba(13, 82, 44, 0.3);
}
.wps-coop-card .wps-monto-personalizado { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.wps-coop-card .wps-monto-personalizado label { display: none; }
.wps-coop-card .wps-monto-personalizado input {
	border: none;
	background: #f1f1f1;
	border-radius: 2.5rem;
	padding: 0.95rem 1.1rem;
	text-align: left;
	color: var(--wps-gris-oscuro);
	font-weight: 500;
	font-size: 1rem;
	min-width: 0;
	box-sizing: border-box;
	width: 100%;
}
.wps-coop-card .wps-monto-personalizado input::placeholder { color: #7a7a7a; opacity: 1; }
.wps-coop-card .wps-monto-personalizado input:focus { outline: none; box-shadow: 0 0 0 3px rgba(110, 180, 42, 0.3); }
.wps-coop-card .wps-monto-personalizado .wps-btn {
	background: var(--wps-verde-claro);
	color: #fff;
	letter-spacing: 0.16em;
	font-size: 0.9rem;
	padding: 0.95rem 0.5rem;
	border-radius: 2.5rem;
	box-shadow: 0 6px 16px rgba(110, 180, 42, 0.4);
	margin: 0;
}

/* ── LOADER de navegación (splash) — v0.2.86 ──────────────────────────────
   Velo a pantalla completa (color configurable, se aplica inline desde WPS_Template::loader_html())
   con el logo latiendo y un spinner. Arranca invisible y sin capturar toques; wps-front.js le pone
   `.wps-loader--visible` al iniciar una navegación (y ahí sí bloquea toda la pantalla). */
.wps-loader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #005722;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wps-loader--visible { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.18s ease; }
.wps-loader .wps-loader-logo { width: 30%; max-width: 140px; height: auto; animation: wps-loader-latido 1.6s ease-in-out infinite; }
.wps-loader-spinner { width: 2.4rem; height: 2.4rem; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #ACCB46; border-radius: 50%; animation: wps-loader-giro 0.8s linear infinite; }
.wps-loader-texto { color: #cfe3d3; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
@keyframes wps-loader-giro { to { transform: rotate(360deg); } }
@keyframes wps-loader-latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .wps-loader .wps-loader-logo { animation: none; } }

/* ── DETALLE DE PRODUCTO v2 — v0.2.86 (Deiby: "se ve toda pelada"): foto a todo el ancho de la
   tarjeta, nombre + precio unitario, chips, descripción y sucursal. La barra flotante no cambia. ── */
.wps-pagina-producto .wps-detalle-tarjeta { padding: 0 0 1.4rem; overflow: hidden; }
.wps-pagina-producto .wps-detalle-media { margin: 0; position: relative; }
.wps-pagina-producto .wps-detalle-media img,
.wps-pagina-producto .wps-carrusel-slide img { aspect-ratio: 1 / 1; border-radius: 0; }
.wps-pagina-producto .wps-carrusel-track { border-radius: 0; }
.wps-pagina-producto .wps-carrusel-puntos { position: absolute; left: 0; right: 0; bottom: 0.8rem; margin: 0; }
.wps-pagina-producto .wps-carrusel-punto { background: rgba(255,255,255,0.55); border: none; width: 0.5rem; height: 0.5rem; }
.wps-pagina-producto .wps-carrusel-punto--activo { background: #fff; width: 1.4rem; border-radius: 0.5rem; }
.wps-detalle-cuerpo { padding: 1.1rem 1.2rem 0; }
.wps-detalle-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.6rem; }
.wps-detalle-nombre-card { font-size: 1.3rem; font-weight: 800; color: var(--wps-verde); margin: 0; line-height: 1.2; }
.wps-detalle-precio-unit { text-align: right; flex-shrink: 0; }
.wps-detalle-precio-unit .wps-detalle-precio-valor { display: block; color: var(--wps-verde-claro); font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
.wps-detalle-precio-unit .wps-detalle-precio-tachado { display: block; color: var(--wps-gris-claro); text-decoration: line-through; font-size: 0.85rem; }
.wps-detalle-precio-unit .wps-detalle-precio-rotulo { display: block; color: var(--wps-gris-medio); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.wps-detalle-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 1.1rem; }
.wps-detalle-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: #eef6e6; color: var(--wps-verde); border-radius: 2rem; padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 600; }
.wps-detalle-chip--gris { background: #f1f1f1; color: var(--wps-gris); font-weight: 500; }
.wps-detalle-chip svg { width: 0.9rem; height: 0.9rem; }
.wps-detalle-separador { border: none; border-top: 1px solid #ececec; margin: 0 0 0.9rem; }
.wps-pagina-producto .wps-detalle-seccion { margin-bottom: 0.3rem; }
.wps-pagina-producto .wps-seccion-titulo { font-size: 1rem; }
.wps-pagina-producto .wps-detalle-descripcion { margin-bottom: 0.4rem; font-size: 0.95rem; color: var(--wps-gris); }
.wps-detalle-ubicacion { display: flex; align-items: center; gap: 0.45rem; color: var(--wps-gris-medio); font-size: 0.85rem; margin-top: 0.9rem; }
.wps-detalle-ubicacion svg { width: 1rem; height: 1rem; color: var(--wps-verde-claro); flex-shrink: 0; }
.wps-detalle-chip--agotado { background: #fdeaea; color: #b42318; }

/* ── PERFIL (menú) — rediseño v0.2.86 (PDF "Mi Perfil") ─────────────────────
   Hoja clara con esquinas redondeadas montada sobre el header verde (mismo patrón que la
   tienda); adentro UNA tarjeta blanca con sombra que contiene la tarjeta de membresía verde,
   VER CERTIFICADO y el menú (Cerrar sesión pasa a ser un ítem más, con su ícono, como en
   Profile.tsx). Al pie, los mismos logos de aliados del login (Profile.tsx → <LoginFooterImages/>).
   Tipografía un punto más chica ("para que se vea más fino"). */
.wps-pagina-perfil { background: var(--wps-verde); }
.wps-pagina-perfil .wps-header { border-radius: 0; padding-bottom: 2.4rem; }
.wps-pagina-perfil .wps-main {
	background: #f4f5f3;
	border-radius: 1.6rem 1.6rem 0 0;
	margin-top: -1.4rem;
	padding: 1.6rem 1.25rem 2rem;
	box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.22);
	position: relative;
	z-index: 1;
}
.wps-perfil-card {
	background: #fff;
	border-radius: 1.25rem;
	padding: 1.25rem 1.25rem 0.6rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wps-perfil-card .wps-perfil-membresia { margin-bottom: 1.4rem; }
.wps-perfil-card .wps-perfil-membresia-card { background: #0e3a2d; border-radius: 1rem; padding: 1.25rem 1.4rem 1.5rem; min-height: 11rem; box-shadow: none; }
.wps-perfil-card .wps-perfil-membresia-logo { width: 8.5rem; margin-bottom: 0.9rem; }
.wps-perfil-card .wps-perfil-membresia-nombre { font-size: 1.25rem; }
.wps-perfil-card .wps-perfil-membresia-id { font-size: 1rem; margin-bottom: 1.3rem; }
.wps-perfil-card .wps-perfil-membresia-texto { font-size: 0.95rem; margin-bottom: 0.35rem; }
.wps-perfil-card .wps-perfil-membresia-texto .wps-perfil-sep { display: inline-block; width: 1px; height: 1em; background: rgba(255, 255, 255, 0.45); margin: 0 0.9rem; vertical-align: -0.15em; }
.wps-perfil-card .wps-perfil-membresia-renovacion { font-size: 0.9rem; }
.wps-perfil-card .wps-perfil-certificado-boton {
	display: block;
	width: max-content;
	min-width: 60%;
	margin: 1rem auto 0;
	padding: 0.8rem 1.6rem;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	box-shadow: 0 6px 16px rgba(110, 180, 42, 0.4);
}
.wps-perfil-card .wps-perfil-menu { gap: 0; }
.wps-perfil-card .wps-perfil-item {
	gap: 1rem;
	padding: 0.95rem 0.25rem;
	border-bottom: 1px solid #e6e6e6;
	color: var(--wps-verde);
	font-weight: 500;
	font-size: 0.95rem;
	background: none;
	width: 100%;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 0;
	min-height: 0;
	border-top: none; border-left: none; border-right: none;
	box-shadow: none;
}
.wps-perfil-card .wps-perfil-item:last-child,
.wps-perfil-card .wps-perfil-form-logout .wps-perfil-item { border-bottom: none; }
.wps-perfil-card .wps-perfil-item:hover { background: #f6faf6; transform: none; padding-left: 0.5rem; }
.wps-perfil-card .wps-perfil-item .wps-icon,
.wps-perfil-card .wps-perfil-item .wps-icon-fallback { width: 1.5rem; height: 1.5rem; }
.wps-perfil-card .wps-perfil-item > span:not(.wps-perfil-item-chevron) { flex: 1; }
.wps-perfil-item-chevron { width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--wps-verde-claro); border-bottom: 2px solid var(--wps-verde-claro); transform: rotate(-45deg); flex-shrink: 0; margin-right: 0.3rem; }
.wps-perfil-form-logout { margin: 0; }
.wps-pagina-perfil .wps-login-footer-logos { margin: 2.2rem 0 0.5rem; }
.wps-pagina-perfil .wps-login-footer-logo { max-height: 3.5rem; max-width: 9rem; }
.wps-pagina-perfil .wps-footer-credito { color: #cfe3d3; }
.wps-pagina-perfil .wps-footer-credito a { color: #ACCB46; }

/* ── CARRITO v2 — v0.2.87 (referencia "Mi pedido" de la app de McDonald's, pedido de Deiby):
   hoja clara sobre el header, tarjeta "Tu pedido" con miniatura + píldora de cantidad, carrusel
   "Otros socios han elegido" y barra fija con Total + Seguir comprando / Pagar. ── */
.wps-pagina-carrito { background: var(--wps-verde); }
.wps-pagina-carrito .wps-header { border-radius: 0; padding-bottom: 2.2rem; }
.wps-pagina-carrito .wps-main { background: #f4f5f3; border-radius: 1.6rem 1.6rem 0 0; margin-top: -1.4rem; padding: 1.5rem 1.25rem 9.5rem; box-shadow: 0 -8px 22px rgba(0,0,0,.22); position: relative; z-index: 1; }
.wps-pagina-carrito .wps-carrito-card { background: #fff; border-radius: 1.25rem; padding: 1.1rem 1.1rem 0.4rem; box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06); }
.wps-pagina-carrito .wps-carrito-card .wps-carrito-titulo { font-size: 1.15rem; font-weight: 800; color: var(--wps-verde); margin: 0 0 0.6rem; }
.wps-carrito-item { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: 0.8rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid #ececec; }
.wps-carrito-item:last-child { border-bottom: none; }
.wps-carrito-item-img { width: 3.6rem; height: 3.6rem; border-radius: 0.8rem; object-fit: cover; background: #f1f1f1; }
.wps-carrito-item-nombre { font-weight: 600; color: var(--wps-gris-oscuro); font-size: 0.92rem; line-height: 1.25; margin: 0 0 0.2rem; }
.wps-carrito-item-unit { color: var(--wps-gris-medio); font-size: 0.8rem; margin: 0; }
.wps-carrito-item-der { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.wps-carrito-item-total { font-weight: 800; color: var(--wps-verde); font-size: 0.95rem; white-space: nowrap; }
.wps-carrito-stepper.wps-carrito-pill { display: inline-flex; align-items: center; border: 1.5px solid var(--wps-verde); border-radius: 2rem; padding: 0.1rem 0.25rem; gap: 0; background: #fff; }
.wps-carrito-stepper.wps-carrito-pill button { width: 2rem; height: 2rem; border: none; background: none; color: var(--wps-verde); font-size: 1.2rem; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; }
.wps-carrito-stepper.wps-carrito-pill button svg { width: 1rem; height: 1rem; }
.wps-carrito-stepper.wps-carrito-pill input { min-width: 1.6rem; text-align: center; font-weight: 700; font-size: 1rem; }
.wps-sugeridos { margin-top: 1.5rem; }
.wps-sugeridos-titulo { font-size: 1.05rem; font-weight: 800; color: var(--wps-verde); margin: 0 0 0.8rem; }
.wps-sugeridos .wps-sugeridos-carrusel { display: flex; gap: 0.8rem; overflow-x: auto; padding: 0.2rem 0.2rem 0.8rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.wps-sugeridos .wps-sugeridos-carrusel::-webkit-scrollbar { display: none; }
.wps-sugeridos .wps-producto-card { flex: 0 0 8.6rem; width: 8.6rem; scroll-snap-align: start; border-radius: 1rem; padding: 0.5rem 0.5rem 0.8rem; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06); }
.wps-sugeridos .wps-producto-nombre { color: var(--wps-verde); font-size: 0.82rem; font-weight: 700; margin-top: 0.5rem; }
.wps-sugeridos .wps-producto-precio { color: var(--wps-gris-medio); font-weight: 500; font-size: 0.85rem; }
.wps-carrito-barra { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 480px; z-index: 40; background: #fff; border-radius: 1.4rem 1.4rem 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.18); padding: 0.9rem 1.1rem 0.9rem; }
.wps-carrito-barra-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; }
.wps-carrito-barra-total span:first-child { font-size: 1.15rem; font-weight: 800; color: var(--wps-verde); }
.wps-carrito-barra-total span:last-child { font-size: 1.35rem; font-weight: 800; color: var(--wps-verde); }
.wps-carrito-barra-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.wps-carrito-barra-botones .wps-btn { margin: 0; padding: 0.85rem 0.5rem; font-size: 0.9rem; letter-spacing: 0.04em; border-radius: 2rem; }
.wps-btn-seguir { background: #fff; color: var(--wps-verde); border: 1.5px solid var(--wps-verde) !important; }
.wps-btn-pagar { background: var(--wps-verde-claro); box-shadow: 0 6px 16px rgba(110,180,42,.4); }
.wps-carrito-stepper.wps-carrito-pill input { width: 1.8rem; min-width: 0; border: none; background: none; text-align: center; font-weight: 700; font-size: 1rem; color: var(--wps-gris-oscuro); -moz-appearance: textfield; padding: 0; }
.wps-carrito-stepper.wps-carrito-pill input::-webkit-outer-spin-button,
.wps-carrito-stepper.wps-carrito-pill input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wps-carrito-stepper.wps-carrito-pill .wps-carrito-quitar { color: var(--wps-verde); }
.wps-carrito-item-img { display: block; }
.wps-carrito-barra-aviso { margin: -0.3rem 0 0.6rem; text-align: center; color: var(--wps-gris-medio); font-size: 0.85rem; }
.wps-carrito-barra .wps-checkout-form { margin: 0; }
.wps-pagina-carrito .wps-footer-credito { color: #cfe3d3; }
.wps-pagina-carrito .wps-footer-credito a { color: #ACCB46; }
.wps-pagina-carrito .wps-carrito-card .wps-btn-seguir { display: inline-block; }

/* ── MODAL "ACCESO EXCLUSIVO PARA SOCIOS" — v0.2.88 (réplica de ExclusiveAccessModal.tsx /
   MembershipModal.tsx, pedido de Deiby): la imagen configurada en wp-admin con la X arriba a la
   derecha y el botón de acción (Registrarse / Hacerse socio) montado sobre el borde inferior. ── */
.wps-modal-membresia {
	border: none;
	background: transparent;
	padding: 0;
	max-width: min(92vw, 420px);
	width: 100%;
	max-height: 96vh;
	overflow: visible;
}
.wps-modal-membresia::backdrop { background: rgba(0, 0, 0, 0.55); }
.wps-membresia-tarjeta { position: relative; padding-bottom: 1.8rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.wps-membresia-tarjeta--modal { max-height: 96vh; overflow-y: auto; scrollbar-width: none; }
.wps-membresia-tarjeta--modal::-webkit-scrollbar { display: none; }
.wps-membresia-imagen {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1.2rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
	background: #fff;
}
.wps-membresia-texto {
	background: #fff;
	border-radius: 1.2rem;
	padding: 2rem 1.5rem 2.4rem;
	text-align: center;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.wps-membresia-cerrar {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 2;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	border: none;
	background: #111;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.wps-membresia-accion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-top: -1.7rem; /* el botón "sale" por el borde inferior de la imagen, como en la app. */
	position: relative;
	z-index: 1;
}
.wps-membresia-form { margin: 0; display: flex; justify-content: center; }
.wps-membresia-cta,
.wps-membresia-form .wps-membresia-cta {
	display: inline-block;
	min-width: 11rem;
	min-height: 3.3rem;
	padding: 0.9rem 2.2rem;
	background: var(--wps-verde);
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 2rem;
	border: 3px solid #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	text-align: center;
	animation: wps-cta-latido 2.6s ease-in-out infinite;
}
.wps-membresia-login { color: var(--wps-verde); font-size: 0.85rem; text-decoration: underline; }
.wps-modal-membresia .wps-membresia-login { color: #fff; }
.wps-pagina-membresia .wps-membresia-tarjeta { max-width: 420px; margin: 0 auto; }
.wps-membresia-tarjeta h2, .wps-membresia-tarjeta p { font-family: inherit; }

/* v0.2.89 — Carrito en pantallas chicas (captura iPhone de Deiby): barra inferior de UNA fila
   (Total a la izquierda, PAGAR a la derecha) y "Seguir comprando" arriba, junto a "Tu pedido". */
.wps-pagina-carrito .wps-main { padding-bottom: 7rem; }
.wps-carrito-encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.wps-carrito-encabezado .wps-carrito-titulo { margin: 0; }
.wps-carrito-seguir { color: var(--wps-verde-claro); font-weight: 700; font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.wps-carrito-barra { padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
.wps-carrito-barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.wps-carrito-barra-total { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
.wps-carrito-barra-rotulo { font-size: 0.75rem; font-weight: 600; color: var(--wps-gris-medio); text-transform: uppercase; letter-spacing: 0.08em; }
.wps-carrito-barra-monto { font-size: 1.35rem; font-weight: 800; color: var(--wps-verde); line-height: 1.1; }
.wps-carrito-barra .wps-btn-pagar { flex: 0 0 auto; min-width: 9rem; padding: 0.85rem 1.6rem; font-size: 0.95rem; letter-spacing: 0.1em; margin: 0; }
.wps-carrito-barra-aviso { margin: 0.5rem 0 0; }

/* ===== v0.2.90 — Reservas: Detalles / ¡Tu entrada está lista! (diseño del PDF) ==========
   NOTA: las reglas anteriores .wps-exito-cols/.wps-exito-qr/.wps-exito-compartir/.wps-detalle-reserva/
   .wps-invitado-card/.wps-invitados-lista/.wps-invitado-verqr quedan SIN USO en Detalles y en la
   página del QR (se conservan porque comparten bloques con .wps-invitado-bloque de Crear reserva y
   con .wps-reserva-tarjeta/.wps-exito-header, que Reservas activas sigue usando).
   Colores medidos del PDF de referencia: verde oscuro #235528, lima #80b345. La tarjeta
   principal usa QR lima sobre verde (como el PDF); los invitados, QR verde sobre blanco.
   El JS (wpsTintarQr) recolorea el PNG blanco/negro que manda el PV. */
.wps-reserva-v2 { --wps-r2-verde: #235528; --wps-r2-lima: #80b345; --wps-r2-texto: #2f4a33; }
.wps-reserva-v2 h2, .wps-reserva-v2 p { font-family: inherit; }

/* Tarjeta blanca: foto + nombre del lugar */
.wps-lugar-card { background: #fff; border-radius: 1.1rem; padding: 0.8rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); margin-bottom: 1rem; }
.wps-lugar-foto { border-radius: 0.85rem; overflow: hidden; aspect-ratio: 16 / 9; background: #e6e6e6; }
.wps-lugar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wps-lugar-nombre { margin: 0.8rem 0.35rem 0.2rem; font-size: 1.25rem; font-weight: 800; color: var(--wps-r2-verde); line-height: 1.2; }
.wps-lugar-card:not(:has(.wps-lugar-foto)) .wps-lugar-nombre { margin-top: 0.2rem; }

/* Tarjeta verde: datos + QR */
.wps-ticket-card { background: var(--wps-r2-verde); border-radius: 1.1rem; padding: 1.1rem 1rem 1rem; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); }
.wps-ticket-principal { display: flex; gap: 0.9rem; align-items: flex-start; }
.wps-ticket-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.15rem; }
.wps-ticket-fila, .wps-entrada-fila { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.3; }
.wps-ticket-fila span, .wps-entrada-fila span { min-width: 0; overflow-wrap: anywhere; }
.wps-ticket-fila svg, .wps-entrada-fila svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--wps-r2-lima); margin-top: 0.05rem; }
.wps-ticket-qr { position: relative; flex-shrink: 0; width: 8.6rem; padding-right: 1.7rem; }
/* v0.2.91 — SIN alturas porcentuales: en Safari iOS un <img height:100%> dentro de una caja
   con aspect-ratio (+flex) se resolvía a 0 px y el QR salía en blanco (reporte de Deiby con
   captura). El PNG del QR es cuadrado: width:100% + height:auto llena la caja igual. La caja
   solo usa aspect-ratio/flex mientras espera el QR (placeholder de texto). */
.wps-qr-lima { border: 2px solid var(--wps-r2-lima); border-radius: 0.9rem; padding: 0.4rem; background: var(--wps-r2-verde); overflow: hidden; }
.wps-qr-lima img { width: 100%; height: auto; display: block; }
.wps-qr-lima--blanco { background: #fff; }
.wps-qr-verde { border-radius: 0.5rem; overflow: hidden; background: #fff; }
.wps-qr-verde img { width: 100%; height: auto; display: block; }
.wps-qr-esperando { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.wps-qr-esperando span { font-size: 0.72rem; text-align: center; line-height: 1.25; opacity: 0.85; padding: 0.3rem; }
.wps-qr-lima.wps-qr-esperando span { color: var(--wps-r2-lima); }
.wps-qr-verde.wps-qr-esperando span { color: var(--wps-r2-verde); }
.wps-ticket-share { position: absolute; top: -0.15rem; right: 0; width: 1.5rem; height: 1.5rem; color: var(--wps-r2-lima); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wps-ticket-share svg { width: 1.35rem; height: 1.35rem; }
.wps-ticket-share:hover, .wps-ticket-share:focus-visible { color: #fff; outline: none; }

/* Invitados desplegables */
.wps-ticket-invitados { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.wps-invitado-v2 { background: #fff; border-radius: 0.9rem; color: var(--wps-r2-verde); overflow: hidden; }
.wps-invitado-v2 > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1rem; font-weight: 800; font-size: 1rem; cursor: pointer; user-select: none; }
.wps-invitado-v2 > summary::-webkit-details-marker { display: none; }
.wps-invitado-v2-chevron { width: 1.35rem; height: 1.35rem; color: var(--wps-r2-lima); transition: transform 0.2s ease; }
.wps-invitado-v2[open] > summary .wps-invitado-v2-chevron { transform: rotate(180deg); }
.wps-invitado-v2-cuerpo { display: flex; gap: 0.75rem; padding: 0 1rem 0.95rem; align-items: flex-start; }
.wps-invitado-v2-info { flex: 1; min-width: 0; padding-top: 0.35rem; }
.wps-invitado-v2-nombre { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--wps-r2-verde); line-height: 1.25; overflow-wrap: anywhere; }
.wps-invitado-v2-dato { font-size: 0.92rem; margin: 0 0 0.25rem; color: var(--wps-r2-texto); overflow-wrap: anywhere; }
.wps-invitado-v2-qr { width: 7.6rem; flex-shrink: 0; border: 1.5px solid var(--wps-r2-verde); border-radius: 0.8rem; padding: 0.4rem 0.4rem 0.3rem; text-align: center; margin-top: -0.35rem; }
.wps-invitado-v2-compartir { display: inline-flex; gap: 0.3rem; align-items: center; color: var(--wps-r2-verde); font-size: 0.82rem; font-weight: 600; text-decoration: none; padding: 0.25rem 0 0.05rem; }
.wps-invitado-v2-compartir svg { width: 1.1rem; height: 1.1rem; }
.wps-invitado-v2-compartir:hover { color: var(--wps-r2-lima); }

/* Modal de éxito post-reserva: mismo contenido, sin doble marco */
.wps-modal-reserva-exito .wps-reserva-v2 { padding: 2.6rem 0.9rem 0.9rem; background: #f3f4f1; }
.wps-modal-reserva-exito .wps-lugar-card { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); }

/* ¡Tu entrada está lista! — una sola tarjeta verde */
.wps-entrada-card { background: var(--wps-r2-verde); border-radius: 1.2rem; padding: 0.85rem 0.85rem 1.2rem; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); }
.wps-entrada-foto { border-radius: 0.9rem; overflow: hidden; aspect-ratio: 16 / 9; background: #1a3f1e; }
.wps-entrada-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wps-entrada-lugar { font-size: 1.3rem; font-weight: 800; margin: 0.95rem 0.35rem 0.15rem; color: #fff; line-height: 1.2; }
.wps-entrada-sub { color: var(--wps-r2-lima); font-size: 1.05rem; margin: 0 0.35rem 0.85rem; }
.wps-entrada-datos { padding: 0 0.35rem 0 1.05rem; display: flex; flex-direction: column; gap: 0.55rem; }
.wps-entrada-nombre { font-size: 1.35rem; font-weight: 800; margin: 0 0 0.25rem; color: #fff; line-height: 1.2; }
.wps-entrada-fila { font-size: 0.98rem; }
.wps-entrada-qr { margin: 1.35rem auto 0.75rem; width: min(64%, 16rem); }
.wps-entrada-qr .wps-qr-lima { padding: 0.75rem; border-radius: 1.1rem; }
.wps-entrada-msg { text-align: center; color: var(--wps-r2-lima); font-size: 1.02rem; margin: 0; }
.wps-entrada-compartir { display: flex; justify-content: center; align-items: center; gap: 0.45rem; margin: 1.1rem auto 0; width: fit-content; padding: 0.6rem 1.3rem; border-radius: 999px; background: var(--wps-r2-lima); color: #fff; font-weight: 700; font-size: 0.95rem; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wps-entrada-compartir svg { width: 1.15rem; height: 1.15rem; }
.wps-entrada-compartir:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24); color: #fff; }
.wps-entrada-compartir:active { transform: translateY(0); }
.wps-entrada-compartir[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.wps-pagina-reserva-qr .wps-main { padding-top: 1rem; }

/* ===== v0.2.92 — Perfil: nombre completo (sin "...") y CTA "¡Ser socio ahora!" metálico ====
   Pedido de Deiby: quitar los puntos suspensivos del nombre (header y tarjeta), letra más
   pequeña, y en el botón quitar el subrayado y poner un brillo metálico que recorre el botón. */
.wps-header-saludo { min-width: 0; }
.wps-header-saludo strong {
	font-size: 0.95rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wps-perfil-card .wps-perfil-membresia-nombre { font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.wps-perfil-card .wps-perfil-membresia-id { font-size: 0.95rem; }

.wps-perfil-membresia-boton {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	letter-spacing: 0.01em;
	background: linear-gradient(180deg, #156b39 0%, var(--wps-verde) 55%, #0a4224 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 4px 12px rgba(13, 82, 44, 0.3);
}
.wps-perfil-membresia-boton:hover, .wps-perfil-membresia-boton:focus-visible { text-decoration: none; color: #fff; }
/* Destello metálico: una franja clara inclinada que cruza el botón de izquierda a derecha,
   con pausa entre pasadas para que no canse. */
.wps-perfil-membresia-boton::after {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -45%;
	width: 38%;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.10) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	animation: wps-brillo-metalico 3.4s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes wps-brillo-metalico {
	0% { left: -45%; }
	55%, 100% { left: 125%; }
}

/* ===== v0.2.93 — Ficha de producto: botón Compartir sobre la foto ===== */
.wps-detalle-share {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem; /* arriba a la izquierda: el badge de descuento (-20%) vive arriba a la derecha. */
	z-index: 3;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.94);
	color: var(--wps-verde);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: transform 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.wps-detalle-share svg { width: 1.2rem; height: 1.2rem; }
.wps-detalle-share:hover, .wps-detalle-share:focus-visible { background: var(--wps-verde); color: #fff; transform: translateY(-1px); outline: none; }
.wps-detalle-share:active { transform: scale(0.94); }

/* ===== v0.2.93 — Carrito: tipografía más fina y liviana (pedido de Deiby, referencia Falabella:
   "está perfecto el diseño... las letras más pequeñas... que se vea más lindo"). Solo tamaños y
   pesos; el diseño McDonald's del carrito (v0.2.87/0.2.89) no cambia. Preview aprobado. ===== */
.wps-pagina-carrito .wps-header-titulo { font-size: 1.15rem; font-weight: 700; }
.wps-pagina-carrito .wps-header-subtitulo { font-size: 0.8rem; }
.wps-pagina-carrito .wps-carrito-card .wps-carrito-titulo { font-size: 1rem; font-weight: 700; }
.wps-carrito-seguir { font-size: 0.78rem; font-weight: 600; }
.wps-carrito-item { grid-template-columns: 3.4rem 1fr auto; gap: 0.75rem; padding: 0.8rem 0; }
.wps-carrito-item-img { width: 3.4rem; height: 3.4rem; border-radius: 0.7rem; }
.wps-carrito-item-nombre { font-size: 0.85rem; font-weight: 500; line-height: 1.3; color: #232323; letter-spacing: 0.005em; }
.wps-carrito-item-unit { font-size: 0.74rem; margin-top: 0.15rem; }
.wps-carrito-item-total { font-size: 0.9rem; font-weight: 700; }
.wps-carrito-stepper.wps-carrito-pill { border-width: 1px; padding: 0.05rem 0.2rem; }
.wps-carrito-stepper.wps-carrito-pill button { width: 1.75rem; height: 1.75rem; font-size: 1.05rem; }
.wps-carrito-stepper.wps-carrito-pill button svg { width: 0.9rem; height: 0.9rem; }
.wps-carrito-stepper.wps-carrito-pill input { font-size: 0.9rem; font-weight: 600; width: 1.6rem; }
.wps-sugeridos-titulo { font-size: 0.95rem; font-weight: 700; }
.wps-sugeridos .wps-producto-nombre { font-size: 0.78rem; font-weight: 600; }
.wps-sugeridos .wps-producto-precio { font-size: 0.8rem; }
.wps-carrito-barra-rotulo { font-size: 0.68rem; letter-spacing: 0.1em; }
.wps-carrito-barra-monto { font-size: 1.2rem; }
.wps-carrito-barra .wps-btn-pagar { font-size: 0.85rem; padding: 0.75rem 1.4rem; min-width: 8rem; letter-spacing: 0.08em; }
.wps-carrito-barra .wps-btn { font-size: 0.85rem; }

/* ===== v0.2.94 — iPhone: misma "voz" de letra que Android ==================================
   Reporte de Deiby: el carrito se ve más pesado en iPhone que en Android. Dos causas reales:
   (1) Safari iOS renderiza la fuente del sistema (SF) con suavizado "subpixel", que engrosa
   los trazos; Android (Roboto) usa antialias fino. (2) SF pesa más que Roboto a igual
   font-weight. Arreglo: antialias en toda la app (no cambia nada en Android) y, SOLO en
   iOS (@supports -webkit-touch-callout es exclusivo de WebKit móvil), un punto menos de peso
   en el carrito. */
.wps-app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@supports (-webkit-touch-callout: none) {
	.wps-pagina-carrito .wps-header-titulo { font-weight: 600; }
	.wps-pagina-carrito .wps-carrito-card .wps-carrito-titulo,
	.wps-sugeridos-titulo { font-weight: 600; }
	.wps-carrito-seguir { font-weight: 500; }
	.wps-carrito-item-nombre { font-weight: 400; }
	.wps-carrito-item-total { font-weight: 600; }
	.wps-carrito-stepper.wps-carrito-pill input { font-weight: 500; }
	.wps-sugeridos .wps-producto-nombre { font-weight: 500; }
	.wps-carrito-barra-monto { font-weight: 700; }
	.wps-carrito-barra-rotulo { font-weight: 500; }
}

/* ===== v0.2.95 — Crear reserva: campos que no se descuadran en iPhone ======================
   (1) Zona a fila completa y Personas debajo a media columna (los nombres de zona son largos).
   (2) Los botones-selector (Zona / Fecha y horario) van en UNA línea con puntos suspensivos si
   el texto no cabe, y con un chevron a la derecha para que se vea que se toca.
   (3) Inicia/Finaliza (solo lectura) con letra un punto más pequeña y menos relleno: en iOS la
   fuente es más ancha y "15/01/2027 10:00" se cortaba. */
.wps-campo-fila--zona .wps-campo { flex: 1 1 100%; }
/* v0.2.96: Personas justo encima de "Datos de tus invitados", a media columna. */
.wps-booking-form .wps-campo--personas { width: 48%; }
.wps-abrir-turnos-btn {
	position: relative;
	padding-right: 2.2rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.92rem;
	line-height: 1.3;
}
.wps-abrir-turnos-btn > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wps-abrir-turnos-btn::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--wps-verde);
	border-bottom: 2px solid var(--wps-verde);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.wps-booking-card--crear .wps-campo-lectura {
	font-size: 0.88rem;
	padding-left: 0.65rem;
	padding-right: 0.5rem;
	font-variant-numeric: tabular-nums;
	text-overflow: ellipsis;
}

/* ===== v0.2.97 — Tarjeta de membresía (Perfil): estado como píldora + carné con código de barras ===== */
.wps-perfil-membresia-estado { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.7rem; margin: 0 0 0.35rem; }
.wps-estado-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.22rem 0.7rem 0.22rem 0.55rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.3;
}
.wps-estado-pill::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.wps-estado-pill--activo { background: rgba(172, 203, 70, 0.18); color: #c7e46b; border: 1px solid rgba(172, 203, 70, 0.55); }
.wps-estado-pill--vencido { background: rgba(255, 176, 32, 0.16); color: #ffcf70; border: 1px solid rgba(255, 176, 32, 0.5); }
.wps-estado-pill--basico { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.28); }
.wps-perfil-membresia-plan { font-size: 0.92rem; color: rgba(255, 255, 255, 0.92); overflow-wrap: anywhere; }
.wps-perfil-card .wps-perfil-membresia-renovacion { font-size: 0.8rem; opacity: 0.7; margin: 0; }
.wps-perfil-card .wps-perfil-membresia-id { margin-bottom: 0.9rem; }
.wps-perfil-barcode {
	margin-top: 1.1rem;
	background: #fff;
	border-radius: 0.8rem;
	padding: 0.7rem 0.85rem 0.45rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}
.wps-perfil-barcode-svg { display: block; width: 100%; max-width: 17rem; height: 3.2rem; }
.wps-perfil-barcode .wps-barcode { width: 100%; height: 100%; display: block; }
.wps-perfil-barcode-num { font-size: 0.78rem; letter-spacing: 0.22em; color: #0e3a2d; font-variant-numeric: tabular-nums; }

/* ===== v0.2.99 — Recuperar contraseña: misma tarjeta que Registro ===== */
.wps-auth-card--recuperar { min-height: calc(100vh - 9rem); }
.wps-auth-intro { color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; line-height: 1.45; margin: -0.2rem 0 1.2rem; }
.wps-auth-recuperar-volver { margin-top: 1.4rem; text-align: center; color: rgba(255, 255, 255, 0.9); }

/* ===== v0.2.100 — Mismo destello metálico de "¡Ser socio ahora!" en HACERSE SOCIO / Registrarse
   (tarjeta de Membresía y modal de acceso exclusivo). Pedido de Deiby: "solo el brillito en el
   botón". Reutiliza los keyframes wps-brillo-metalico de v0.2.92. ===== */
.wps-membresia-cta,
.wps-membresia-form .wps-membresia-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.wps-membresia-cta::after {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -45%;
	width: 38%;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.10) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	animation: wps-brillo-metalico 3.4s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.wps-membresia-cta::after { animation: none; display: none; }
}

/* ===== v0.2.101 — Mismo destello metálico en "¡Conviértete en socio ahora!" (Inicio) ===== */
.wps-home-cta { position: relative; overflow: hidden; isolation: isolate; }
.wps-home-cta::after {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -45%;
	width: 38%;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.10) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.10) 70%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	animation: wps-brillo-metalico 3.4s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.wps-home-cta::after { animation: none; display: none; }
}

/* ===== v0.2.102 — Ayuda guiada por audio: globito discreto arriba de la pantalla ===== */
.wps-audio-globo {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	background: #fff;
	border-radius: 999px;
	padding: 0.4rem 0.5rem 0.4rem 0.4rem;
	margin: 0 0 1rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
	color: var(--wps-gris-oscuro);
	position: relative;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.wps-audio-globo--visible { opacity: 1; transform: translateY(0); }
.wps-audio-globo-avatar {
	position: relative;
	flex-shrink: 0;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: var(--wps-verde);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.wps-audio-globo-avatar > svg { width: 1.4rem; height: 1.4rem; }
.wps-audio-globo-badge {
	position: absolute;
	right: -0.15rem;
	bottom: -0.15rem;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: #fff;
	color: var(--wps-verde);
	border: 1.5px solid var(--wps-verde);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wps-audio-globo-badge svg { width: 0.7rem; height: 0.7rem; }
.wps-audio-globo-badge svg[hidden] { display: none; } /* el UA no oculta <svg hidden> dentro de HTML en todos los navegadores. */
/* Autoplay bloqueado: la carita pulsa invitando a tocar. */
.wps-audio-globo--invita .wps-audio-globo-avatar { animation: wps-audio-pulso 1.6s ease-out infinite; }
@keyframes wps-audio-pulso {
	0% { box-shadow: 0 0 0 0 rgba(110, 180, 42, 0.55); }
	70% { box-shadow: 0 0 0 0.75rem rgba(110, 180, 42, 0); }
	100% { box-shadow: 0 0 0 0 rgba(110, 180, 42, 0); }
}
.wps-audio-globo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; cursor: pointer; }
.wps-audio-globo-texto strong { font-size: 0.9rem; color: var(--wps-verde); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wps-audio-globo-texto span { font-size: 0.76rem; color: var(--wps-gris-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ondas (ecualizador) mientras suena. */
.wps-audio-globo-ondas { display: none; align-items: flex-end; gap: 2px; height: 1rem; margin-right: 0.2rem; }
.wps-audio-globo-ondas i { display: block; width: 3px; height: 40%; background: var(--wps-verde-claro); border-radius: 2px; }
.wps-audio-globo--sonando .wps-audio-globo-ondas { display: inline-flex; }
.wps-audio-globo--sonando .wps-audio-globo-ondas i { animation: wps-audio-onda 0.9s ease-in-out infinite; }
.wps-audio-globo--sonando .wps-audio-globo-ondas i:nth-child(2) { animation-delay: 0.15s; }
.wps-audio-globo--sonando .wps-audio-globo-ondas i:nth-child(3) { animation-delay: 0.3s; }
.wps-audio-globo--sonando .wps-audio-globo-ondas i:nth-child(4) { animation-delay: 0.45s; }
@keyframes wps-audio-onda { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.wps-audio-globo-cerrar {
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	border: 0;
	background: #f1f3ef;
	color: #5a6b5f;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wps-audio-globo-cerrar:hover { background: #e3e7df; color: var(--wps-verde); }
/* Pantallas con fondo verde (login/registro): el globito blanco ya contrasta; solo separa un poco más. */
.wps-app--sin-header .wps-audio-globo { margin: 0.75rem 0 1rem; }
@media (prefers-reduced-motion: reduce) {
	.wps-audio-globo--invita .wps-audio-globo-avatar, .wps-audio-globo--sonando .wps-audio-globo-ondas i { animation: none; }
}

/* ── CHATBOT (v0.2.107) — globito flotante + panel de chat (IA de Reducción de Riesgos y Daños) ── */
.wps-chat-launcher {
	position: fixed;
	/* v0.2.108: alineado al borde derecho del frame de la app (columna centrada de 480px), NO al
	   borde del navegador. En móvil (viewport < 482px) max() elige 1rem; en escritorio se pega al
	   borde derecho del frame. */
	right: max(1rem, calc(50vw - 240px + 1rem));
	bottom: 5.4rem; /* despeje del nav inferior fijo */
	z-index: 1200;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, #0B4F2D 0%, #1a7a45 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(11, 79, 45, 0.4);
	animation: wps-chat-latido 2.6s ease-in-out infinite;
	transition: transform 0.14s ease;
}
.wps-chat-launcher:hover { transform: translateY(-2px) scale(1.04); }
.wps-chat-launcher:active { transform: scale(0.95); }
@keyframes wps-chat-latido {
	0%, 100% { box-shadow: 0 8px 22px rgba(11, 79, 45, 0.4); }
	50%      { box-shadow: 0 8px 30px rgba(26, 122, 69, 0.65); }
}
.wps-chat-abierto .wps-chat-launcher { display: none; }

/* v0.2.108 (pedido de Deiby: "el chat aparece separado de la app; tiene que verse como en la app RN,
   un modal SOBRE la pantalla"): el panel se centra sobre el frame de la app (columna de 480px), no
   flota en el borde del navegador. Cubre el área entre el header y el nav inferior, con un velo detrás. */
.wps-chat-abierto::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.38);
	z-index: 1240;
	animation: wps-chat-velo 0.2s ease-out both;
}
@keyframes wps-chat-velo { from { opacity: 0; } to { opacity: 1; } }
/* v0.2.109 (bug reportado: la X no cerraba el chat). El atributo `hidden` NO ocultaba el panel
   porque `.wps-chat { display:flex }` lo pisaba (gotcha clásico: fijar `display` anula `hidden`).
   Esta regla restaura la semántica de `hidden` — al cerrar (panel.hidden=true) el panel desaparece
   y queda solo el globito flotante. También evita que el panel aparezca abierto al cargar la página. */
.wps-chat[hidden] { display: none !important; }
.wps-chat {
	position: fixed;
	left: 50%;
	top: 3.2rem;
	bottom: 4.7rem; /* por encima del nav inferior fijo */
	transform: translateX(-50%);
	z-index: 1250;
	width: 100%;
	max-width: 480px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* La animación incluye translateX(-50%) para no romper el centrado. */
	animation: wps-chat-entra 0.24s ease-out both;
}
@keyframes wps-chat-entra {
	from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.98); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.wps-chat-header {
	background: linear-gradient(135deg, #0B4F2D 0%, #1a7a45 100%);
	color: #fff;
	padding: 0.95rem 1.1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.wps-chat-titulo {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.wps-chat-controls { display: flex; gap: 0.4rem; }
.wps-chat-ctrl {
	background: rgba(255, 255, 255, 0.14);
	border: none;
	color: #fff;
	cursor: pointer;
	width: 2rem;
	height: 2rem;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.16s ease;
}
.wps-chat-ctrl:hover { background: rgba(255, 255, 255, 0.28); }
.wps-chat-mensajes {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 1.1rem;
	background: #f9fafb;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.wps-chat-msg { display: flex; animation: wps-chat-msg-entra 0.28s ease; }
@keyframes wps-chat-msg-entra {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.wps-chat-msg--user { justify-content: flex-end; }
.wps-chat-burbuja {
	max-width: 85%;
	padding: 0.75rem 1rem;
	line-height: 1.5;
	font-size: 0.9rem;
	word-wrap: break-word;
}
.wps-chat-msg--bot .wps-chat-burbuja {
	background: #e8e8e8;
	color: #333;
	border-radius: 16px 16px 16px 4px;
}
.wps-chat-msg--user .wps-chat-burbuja {
	background: linear-gradient(135deg, #0B4F2D 0%, #1a7a45 100%);
	color: #fff;
	border-radius: 16px 16px 4px 16px;
}
.wps-chat-typing .wps-chat-burbuja { display: flex; gap: 4px; padding: 0.9rem 1.1rem; }
.wps-chat-typing span {
	width: 8px;
	height: 8px;
	background: #888;
	border-radius: 50%;
	animation: wps-chat-typing 1.4s infinite;
}
.wps-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.wps-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wps-chat-typing {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30%           { transform: translateY(-7px); opacity: 1; }
}
.wps-chat-input-area {
	display: flex;
	gap: 0.6rem;
	padding: 0.85rem;
	background: #fff;
	border-top: 1px solid #eee;
	flex-shrink: 0;
}
.wps-chat-input {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid #ddd;
	border-radius: 25px;
	outline: none;
	font-size: 16px; /* 16px evita el zoom automático de iOS al enfocar. */
	background: #fff;
	color: var(--wps-gris-oscuro);
}
.wps-chat-input:focus { border-color: #0B4F2D; }
.wps-chat-input:disabled { background: #f5f5f5; cursor: not-allowed; }
.wps-chat-enviar {
	flex-shrink: 0;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, #0B4F2D 0%, #1a7a45 100%);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.16s ease, opacity 0.16s ease;
}
.wps-chat-enviar:hover:not(:disabled) { transform: scale(1.06); }
.wps-chat-enviar:disabled { opacity: 0.5; cursor: not-allowed; }

/* v0.2.108 — Móvil: el modal cubre casi toda la pantalla (deja ver el header arriba y el nav abajo,
   como la app RN), pegado a los lados (sin margen) y con esquinas redondeadas. */
@media (max-width: 480px) {
	.wps-chat {
		top: 2.6rem;
		bottom: 4.9rem;
	}
	.wps-chat-launcher { bottom: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wps-chat-launcher,
	.wps-chat,
	.wps-chat-msg,
	.wps-chat-typing span { animation: none; }
	.wps-chat-launcher:hover, .wps-chat-enviar:hover:not(:disabled) { transform: none; }
}