/*
 * 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);
	padding-bottom: 5rem; /* espacio para el footer fijo */
	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);
	padding: 0.75rem 1rem 5.5rem;
}
.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;
}
.wps-mensaje {
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}
.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; }

.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.wps-btn-disabled {
	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: 2rem; }
.wps-pagina-login--verde,
.wps-pagina-login--verde .wps-main { background: #005722; }
.wps-pagina-login--verde { color: #fff; }
.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; }
/* 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; }
.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;
}

/* ── 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;
}
.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;
}
.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;
}
.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; }
.wps-descuento-badge {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	background: red;
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.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; }
.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 ─────────────────────────────────────────────────────────── */
.wps-carrito-titulo { font-size: 1.3rem; font-weight: 700; color: var(--wps-verde); margin-bottom: 1rem; }
.wps-carrito-tabla { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.wps-carrito-tabla td { padding: 0.6rem 0.3rem; border-bottom: 1px solid var(--wps-borde); vertical-align: middle; }
.wps-carrito-nombre { font-weight: 700; font-size: 0.85rem; color: var(--wps-gris-oscuro); }
.wps-carrito-precio { color: var(--wps-verde); font-weight: 700; text-align: right; }
.wps-carrito-quitar { color: #c00; background: none; border: none; cursor: pointer; font-size: 1.2rem; }
.wps-carrito-resumen-label { font-weight: 700; }
.wps-carrito-total .wps-carrito-resumen-label { font-size: 1.15rem; }
.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.
 */
.wps-booking-card--crear {
	background: var(--wps-verde-secundario);
	border-color: transparent;
	color: #fff;
}
.wps-booking-card--crear h3,
.wps-booking-card--crear > p { color: #fff; }
.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; }
.wps-modal-detalle-evento p { margin: 0.5rem 0; font-size: 0.9rem; }
.wps-modal-descripcion { color: var(--wps-gris-medio); }
.wps-modal-fila { display: flex; align-items: center; gap: 0.5rem; }
.wps-modal-icono { width: 1.1rem; height: 1.1rem; object-fit: contain; flex-shrink: 0; }
.wps-modal-accion-icono { width: 1rem; height: 1rem; object-fit: contain; vertical-align: middle; margin-right: 0.3rem; }
.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;
}
.wps-modal-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.wps-modal-accion {
	flex: 1;
	min-width: 5rem;
	text-align: center;
	background: #f5f5f5;
	color: var(--wps-verde);
	border-radius: 0.5rem;
	padding: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}
/*
 * 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; }
.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; }
.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.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;
}
/* 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 ───────────────────────────────────────────────── */
.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; }
.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; }
.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; }

/* ── 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. */
.wps-perfil-membresia { margin-bottom: 1.5rem; }
.wps-perfil-membresia-card {
	background: var(--wps-verde-claro);
	border-radius: 0.9rem;
	padding: 1.1rem 1.25rem;
	color: #fff;
}
.wps-perfil-membresia-logo { display: block; width: 2.2rem; height: 2.2rem; object-fit: contain; margin-bottom: 0.5rem; }
.wps-perfil-membresia-texto { font-size: 1rem; margin: 0 0 0.2rem; }
.wps-perfil-membresia-renovacion { font-size: 0.9rem; 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;
}
.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; }
.wps-orden-card { display: flex; gap: 0.9rem; border-bottom: 1px solid #eee; padding: 0.9rem 0; align-items: center; }
.wps-orden-card img { width: 3.5rem; height: 3.5rem; border-radius: 0.5rem; object-fit: cover; background: #f2f2f2; }
.wps-orden-info { flex: 1; }
.wps-orden-estado { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.wps-orden-detalle-fila { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #eee; }

/* ── TÉRMINOS / WEBVIEW ─────────────────────────────────────────────── */
.wps-terminos-frame { width: 100%; min-height: 70vh; border: none; border-radius: 0.6rem; }

/* ── 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; }