/*
 * Módulo SINPE/Transferencia (0.69.0) — estilos del front del cliente.
 * Encolado solo en el front (class-wolk-tienda-sinpe-front.php::assets()); inerte si
 * el markup no está en la página. Colores tomados de los mockups aprobados
 * (Main/Reportar/Planes/PromoAnual.dc.html) para que, aunque el tema wolk-portal
 * todavía no lo integre visualmente, ya se vea coherente con la marca.
 */

.wolk-sinpe-wizard,
.wolk-sinpe-upsell,
.wolk-sinpe-promo-modal {
	font-family: inherit;
	box-sizing: border-box;
}
.wolk-sinpe-wizard *,
.wolk-sinpe-upsell *,
.wolk-sinpe-promo-modal * {
	box-sizing: border-box;
}

/* --- Wizard "Reportar pago" ------------------------------------------- */
.wolk-sinpe-wizard {
	/* 0.70.8 — A LO ANCHO (pedido Deiby: "dejaste un espacio grandísimo...
	   se ve horrible"): la card de 460px dejaba un hueco enorme a la derecha
	   en la página del pedido, donde "Detalles del pedido" sí va completo.
	   Ahora ocupa el mismo ancho que el resto de las tarjetas de la página. */
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	margin: 18px 0;
	padding: 18px 20px;
	background: #ffffff;
	border: 1px solid #e5e7f5;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(30, 37, 73, 0.06);
}
.wolk-sinpe-wizard h3 {
	margin: 0 0 10px;
	font-size: 16px;
	color: #14183a;
}
.wolk-sinpe-wizard .wolk-sinpe-ok {
	color: #166534;
	font-weight: 700;
}
.wolk-sinpe-wizard .wolk-sinpe-info {
	background: #fef3c7;
	color: #92400e;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
}
.wolk-sinpe-wizard .wolk-sinpe-horario {
	font-size: 12.5px;
	color: #64708a;
}
.wolk-sinpe-form label {
	display: block;
	margin: 10px 0;
	font-size: 13px;
	font-weight: 600;
	color: #33395c;
}
.wolk-sinpe-form input[type="text"],
.wolk-sinpe-form input[type="number"],
.wolk-sinpe-form input[type="file"],
.wolk-sinpe-form textarea {
	width: 100%;
	margin-top: 4px;
	padding: 9px 11px;
	border: 1px solid #d7dbee;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
}
.wolk-sinpe-form textarea {
	min-height: 70px;
	resize: vertical;
}
.wolk-sinpe-btn {
	margin-top: 8px;
	border: none;
	border-radius: 10px;
	background: #1e2749;
	color: #fff;
	font-weight: 800;
	font-size: 13.5px;
	padding: 11px 18px;
	cursor: pointer;
}
.wolk-sinpe-btn:disabled {
	opacity: 0.6;
	cursor: default;
}
.wolk-sinpe-msg {
	font-size: 13px;
	margin-top: 6px;
}
.wolk-sinpe-msg.error {
	color: #b91c1c;
}
.wolk-sinpe-msg.ok {
	color: #166534;
}

/* --- Upsell "Convertir a suscripción por tarjeta" ---------------------- */
.wolk-sinpe-upsell {
	position: relative;
	overflow: hidden;
	max-width: 460px;
	margin: 14px 0;
	padding: 14px 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, #eef1ff 0%, #e2e7fd 100%);
	border: 1.5px solid #c7cef5;
}
.wolk-sinpe-upsell::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 35%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-18deg);
	animation: wolk-sinpe-shine 3.6s ease-in-out infinite;
}
@keyframes wolk-sinpe-shine {
	0% { left: -60%; }
	35% { left: 130%; }
	100% { left: 130%; }
}
.wolk-sinpe-upsell-titulo {
	position: relative;
	z-index: 1;
	margin: 0 0 10px;
	font-size: 12.5px;
	font-weight: 800;
	color: #14183a;
	line-height: 1.35;
}
.wolk-sinpe-upsell-btn {
	position: relative;
	z-index: 1;
	border: none;
	border-radius: 10px;
	background: #1e2749;
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	padding: 10px 15px;
	cursor: pointer;
}

/* --- Modal "pasate al pago anual" --------------------------------------- */
.wolk-sinpe-promo-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(30, 37, 73, 0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.wolk-sinpe-promo-backdrop.wolk-sinpe-visible {
	display: flex;
}
.wolk-sinpe-promo-modal {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: 20px;
	padding: 32px 28px 24px;
	text-align: center;
}
.wolk-sinpe-promo-cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: #eef0f6;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #33395c;
}
.wolk-sinpe-promo-eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #6f78a8;
}
.wolk-sinpe-promo-modal h2 {
	margin: 0 0 14px;
	font-size: 20px;
	color: #14183a;
}
.wolk-sinpe-promo-cuerpo {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: #43496b;
}
.wolk-sinpe-promo-cta {
	display: block;
	width: 100%;
	padding: 13px;
	border-radius: 12px;
	background: #1e2749;
	color: #fff !important;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	margin-bottom: 12px;
}
.wolk-sinpe-promo-dismiss {
	border: none;
	background: none;
	color: #6f78a8;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}
.wolk-sinpe-promo-timer {
	margin-top: 18px;
	height: 3px;
	border-radius: 3px;
	background: #eef0f6;
	overflow: hidden;
}
.wolk-sinpe-promo-timer-fill {
	height: 100%;
	width: 100%;
	background: #1e2749;
	transform-origin: left;
	transform: scaleX(1);
	transition: transform linear;
}

/* --- Globito "Pagos reportados" — panel de colaboradores (0.69.2) ------- */
.wolk-sinpe-globito {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 999px;
	background: #1e2749;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(30, 37, 73, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wolk-sinpe-globito:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(30, 37, 73, 0.45);
	color: #ffffff !important;
}
.wolk-sinpe-globito-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #dc2626;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}
/* Con 0 pendientes el globito se atenúa (sigue siendo el acceso directo a la
   pantalla) y el número pierde el rojo de urgencia. */
.wolk-sinpe-globito-vacio {
	opacity: 0.55;
}
.wolk-sinpe-globito-vacio .wolk-sinpe-globito-num {
	background: #3a4370;
}
/* 0.81.3 — decisión Deiby (QA Viviana): el globito PALPITA mientras haya
   pagos esperando (>0) y queda quieto con 0. El pulso vive en el numerito
   rojo (no en toda la burbuja: menos mareo, misma urgencia) y se apaga solo
   con la clase -vacio, que el server pinta y el poll mantiene al día.
   0.88.0 — QA Viviana #2 (E2 paso 1: "el globo no late"): el latido de 1.08
   era tan educado que en un monitor normal pasaba desapercibido. Se sube a
   1.18 con el aro de 10px — inconfundible sin llegar a marear. (Los otros dos
   sospechosos del reporte no son de código: CSS viejo cacheado por LiteSpeed,
   o Windows con los efectos de animación apagados — prefers-reduced-motion
   abajo lo respeta a propósito.) */
@keyframes wolk-sinpe-num-palpito {
	0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
	50%      { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
}
.wolk-sinpe-globito:not(.wolk-sinpe-globito-vacio) .wolk-sinpe-globito-num {
	animation: wolk-sinpe-num-palpito 1.8s ease-in-out infinite;
}
/* Accesibilidad: quien pidió menos movimiento no recibe un latido perpetuo. */
@media (prefers-reduced-motion: reduce) {
	.wolk-sinpe-globito:not(.wolk-sinpe-globito-vacio) .wolk-sinpe-globito-num {
		animation: none;
	}
}
/* Latido corto cuando el poll detecta que CAYÓ un pago nuevo. */
@keyframes wolk-sinpe-globito-pulso {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.12); }
	60%  { transform: scale(0.98); }
	100% { transform: scale(1); }
}
.wolk-sinpe-globito-nuevo {
	animation: wolk-sinpe-globito-pulso 0.6s ease-in-out 2;
}
@media (max-width: 600px) {
	.wolk-sinpe-globito-texto { display: none; }
	.wolk-sinpe-globito { padding: 11px 13px; }
}

/* ================================================================
   0.69.6 — Rechazo con motivo (PARPADEANDO, pedido de Deiby) +
   pagos en tractos que suman.
   ================================================================ */
@keyframes wolk-sinpe-rechazo-parpadeo {
	0%, 100% { background: #fef2f2; border-color: #fca5a5; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
	50%      { background: #fee2e2; border-color: #dc2626; box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.wolk-sinpe-wizard .wolk-sinpe-rechazo {
	border: 2px solid #fca5a5;
	border-radius: 12px;
	padding: 12px 16px;
	margin: 0 0 14px;
	color: #991b1b;
	font-size: 14px;
	line-height: 1.5;
	animation: wolk-sinpe-rechazo-parpadeo 1.2s ease-in-out infinite;
}
.wolk-sinpe-wizard .wolk-sinpe-rechazo-sub {
	font-size: 12.5px;
	color: #b45309;
	font-weight: 700;
}
/* El parpadeo respeta la preferencia de accesibilidad del sistema. */
@media (prefers-reduced-motion: reduce) {
	.wolk-sinpe-wizard .wolk-sinpe-rechazo { animation: none; background: #fee2e2; }
}
.wolk-sinpe-wizard .wolk-sinpe-tractos {
	background: #f6f7fc;
	border: 1px solid #e2e6f5;
	border-radius: 12px;
	padding: 10px 14px;
	margin: 0 0 14px;
	font-size: 13px;
}
.wolk-sinpe-wizard .wolk-sinpe-tracto {
	display: block;
	color: #4b5478;
	padding: 2px 0;
}
.wolk-sinpe-wizard .wolk-sinpe-tracto-suma {
	display: block;
	margin-top: 6px;
	font-weight: 800;
}
.wolk-sinpe-wizard .wolk-sinpe-tracto-suma.es-ok { color: #166534; }
.wolk-sinpe-wizard .wolk-sinpe-tracto-suma.es-falta { color: #b45309; }
/* Tracto anulado por rechazo de soporte: queda visible pero tachado. */
.wolk-sinpe-wizard .wolk-sinpe-tracto.es-anulado {
	text-decoration: line-through;
	opacity: 0.6;
}

/* ================================================================
   0.69.8 — Wizard "Reportar pago" = misma experiencia del checkout
   (estilos espejo de wlp-subscribe.css, mismas clases wlp-*).
   ================================================================ */
.wlp-sinpe-scan { display: none; margin: 10px 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.wlp-sinpe-scan.es-leyendo { display: block; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; }
.wlp-sinpe-scan.es-ok      { display: block; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.wlp-sinpe-scan.es-malo    { display: block; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.wlp-sinpe-scan.es-aviso   { display: block; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.wlp-sinpe-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.wlp-sinpe-tabla td { padding: 5px 0; border-bottom: 1px dashed rgba(100, 112, 138, 0.25); }
.wlp-sinpe-tabla tr:last-child td { border-bottom: none; }
.wlp-sinpe-tabla td:first-child { color: inherit; opacity: 0.75; width: 44%; overflow-wrap: anywhere; }
.wlp-sinpe-tabla td:last-child { text-align: right; font-weight: 800; white-space: normal; overflow-wrap: anywhere; }
.wlp-sinpe-tabla tr.es-completo td:last-child { color: #065f46; }
.wlp-sinpe-tabla tr.es-pendiente td { border-top: 2px solid rgba(180, 83, 9, 0.35); padding-top: 7px; }
.wlp-sinpe-tabla tr.es-pendiente td:last-child { color: #92400e; font-size: 13.5px; }
.wlp-sinpe-tabla-nota { margin: 8px 0 0; font-size: 12px; line-height: 1.5; opacity: 0.9; }
.wlp-sinpe-tabla-usd { font-weight: 600; opacity: 0.7; font-size: 11.5px; white-space: nowrap; }
.wlp-sinpe-tabla-nombre { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-size: 11px; opacity: 0.6; }
.wlp-sinpe-quitar { border: none; background: rgba(100, 112, 138, 0.14); color: #64708a; border-radius: 50%; width: 20px; height: 20px; line-height: 1; font-size: 13px; font-weight: 800; cursor: pointer; padding: 0; margin-left: 4px; vertical-align: middle; }
.wlp-sinpe-quitar:hover { background: #fee2e2; color: #b91c1c; }
.wlp-sinpe-agregar { display: block; width: 100%; margin-top: 10px; border: 1.5px dashed #d97706; border-radius: 10px; background: #fffbeb; color: #92400e; font-weight: 800; font-size: 13.5px; padding: 12px; cursor: pointer; font-family: inherit; }
.wlp-sinpe-agregar:hover { background: #fef3c7; }
.wlp-sinpe-agregar-falta { font-weight: 700; opacity: 0.85; }
.wolk-sinpe-manual { width: 130px; max-width: 100%; padding: 6px 8px; border: 1px solid #c7cef5; border-radius: 8px; font-size: 12.5px; text-align: right; font-family: inherit; }
@keyframes wlp-bocina-palpito { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.wlp-sinpe-bocina { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 10px auto 0; border: 1.5px solid #c7cef5; border-radius: 50%; background: #ffffff; font-size: 19px; cursor: pointer; animation: wlp-bocina-palpito 1.6s ease-in-out infinite; box-shadow: 0 2px 8px rgba(30, 39, 73, 0.10); }
.wlp-sinpe-bocina:hover { background: #eef2ff; }
.wlp-sinpe-scan .wlp-sinpe-bocina { display: flex; }
/* Modal de verificación (lupa) — mismo look del checkout. */
.wlp-sinpe-modal-backdrop { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(15, 18, 35, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; padding: 20px; }
.wlp-sinpe-modal-backdrop.es-visible { opacity: 1; pointer-events: auto; }
.wlp-sinpe-modal { background: #ffffff; border-radius: 20px; max-width: 380px; width: 100%; padding: 30px 26px 22px; text-align: center; box-shadow: 0 24px 60px rgba(15, 18, 35, 0.25); transform: translateY(14px) scale(0.97); transition: transform 0.22s ease; }
.wlp-sinpe-modal-backdrop.es-visible .wlp-sinpe-modal { transform: translateY(0) scale(1); }
.wlp-sinpe-modal-icono { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; background: #eef2ff; color: #3b47a3; display: flex; align-items: center; justify-content: center; }
.wlp-sinpe-modal-titulo { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: #14183a; }
.wlp-sinpe-modal-texto { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: #4b5478; }
@keyframes wlp-lupa-pulso { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.12) rotate(-8deg); opacity: 0.85; } }
.wlp-sinpe-modal-icono.es-lupa svg { animation: wlp-lupa-pulso 1.1s ease-in-out infinite; }
@media (max-width: 560px) {
	.wlp-sinpe-modal-backdrop { align-items: flex-end; padding: 0; }
	.wlp-sinpe-modal { max-width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateY(100%); }
	.wlp-sinpe-modal-backdrop.es-visible .wlp-sinpe-modal { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-sinpe-modal-backdrop, .wlp-sinpe-modal, .wlp-sinpe-modal-icono.es-lupa svg, .wlp-sinpe-bocina { transition: none; animation: none; }
}

/* ================================================================
   0.70.0 — CAJA SINPE EN EL CHECKOUT de la tiendita (pedido Deiby:
   "replicar en el checkout ... todo igual" que /suscribirse). Mismo
   look del espejo: bloque de monto ordenado, cuentas, tablita.
   ================================================================ */
.wolk-sinpe-checkout { margin: 8px 0 4px; }
.wolk-sinpe-checkout .wlp-sinpe-paso { margin: 0 0 8px; font-size: 13.5px; color: #14183a; }
.wolk-sinpe-checkout .wlp-sinpe-horario { color: #64708a; font-size: 12.5px; line-height: 1.55; margin: 8px 0 0; }
.wolk-sinpe-checkout .wolk-sinpe-file-checkout { margin: 0 0 8px; max-width: 100%; }

/* Bloque de monto ordenado (v1.9.73 de WLP, mismo estándar). */
.wlp-sinpe-monto-box { background: #ffffff; border: 1px solid #d7dbee; border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; }
.wlp-sinpe-monto-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #64708a; }
.wlp-sinpe-monto-linea { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 3px 0 7px; }
.wlp-sinpe-monto-crc { font-size: 22px; font-weight: 800; color: #14183a; letter-spacing: -0.01em; }
.wlp-sinpe-monto-usd { font-size: 13.5px; font-weight: 700; color: #64708a; }
.wlp-sinpe-monto-box.sin-local .wlp-sinpe-monto-usd { font-size: 22px; color: #14183a; }
.wlp-sinpe-tc { margin: 0 0 3px; font-size: 12px; color: #64708a; line-height: 1.5; }
.wlp-sinpe-tc:last-child { margin-bottom: 0; }

/* Cuentas del país (mismo look de /suscribirse). */
.wlp-sinpe-cuentas { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.wlp-sinpe-cuentas li { background: #ffffff; border: 1px solid #d7dbee; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.wlp-sinpe-cuentas li strong { display: block; color: #14183a; }
.wlp-sinpe-cta-det { display: block; color: #33395c; }
.wlp-sinpe-cta-tit { display: block; color: #64708a; font-size: 12px; }

/* Botones del modal "Falta tu comprobante" (los del look Uber de WLP). */
.wlp-sinpe-modal-cta { display: block; width: 100%; border: none; border-radius: 12px; background: #1e2749; color: #ffffff; font-weight: 800; font-size: 14.5px; padding: 14px; cursor: pointer; font-family: inherit; transition: background 0.15s ease; }
.wlp-sinpe-modal-cta:hover { background: #2a3660; }
.wlp-sinpe-modal-cerrar { display: block; width: 100%; border: none; background: transparent; color: #64708a; font-weight: 700; font-size: 13px; padding: 12px 0 2px; cursor: pointer; font-family: inherit; }
.wlp-sinpe-modal-cerrar:hover { color: #14183a; }

/* Error de las reglas del checkout (vacío/leyendo/malo). */
.wolk-sinpe-co-error { display: none; margin: 8px 0 0; color: #b3261e; font-size: 13px; font-weight: 600; }
.wolk-sinpe-co-error.es-visible { display: block; }

/* ================================================================
   0.70.1 — SELECTOR DE MÉTODO estilo WLP (pedido Deiby: "los
   cuadritos y eso igual"). Los <label> de los radios de WooCommerce
   se vuelven las MISMAS cards de /suscribirse.
   ================================================================ */
.wolk-metodo-lista {
	list-style: none;
	margin: 0 0 14px !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
@media (max-width: 480px) {
	.wolk-metodo-lista { grid-template-columns: 1fr; }
}
.wolk-metodo-lista li.wc_payment_method {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	display: block;
}
.wolk-metodo-lista li.wc_payment_method > input[name="payment_method"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.wolk-metodo-card {
	display: flex !important;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 2px solid #d7dbee;
	border-radius: 12px;
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	position: relative;
	overflow: hidden;
	margin: 0 !important;
}
.wolk-metodo-card.es-activa {
	border-color: #1e2749;
	box-shadow: 0 0 0 3px rgba(30, 39, 73, 0.12);
}
.wolk-metodo-card:focus-within { outline: 2px solid #1e2749; outline-offset: 2px; }
.wolk-metodo-ico { font-size: 20px; line-height: 1; }
.wolk-metodo-tit { font-weight: 800; font-size: 14px; color: #14183a; }
.wolk-metodo-sub { font-size: 12px; color: #64708a; line-height: 1.35; font-weight: 400; }

/* Las cajas de cada método, debajo de la grilla, con look de tarjeta. */
.wolk-metodo-cajas .payment_box {
	background: #f6f7fb;
	border: 1px solid #e3e6f2;
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 12px;
}

/* PSICOLOGÍA v1.9.73 — palpiteo leve + brillito metálico en Tarjeta al
   elegir SINPE; "se activa al instante" se enciende. 2 vueltas y se apaga. */
@keyframes wlp-nudge-palpito {
	0%, 100% { transform: scale(1); }
	30%      { transform: scale(1.018); }
	60%      { transform: scale(0.996); }
}
@keyframes wlp-nudge-brillo {
	from { transform: translateX(-130%) skewX(-18deg); }
	to   { transform: translateX(320%) skewX(-18deg); }
}
.wolk-metodo-card.wlp-nudge {
	animation: wlp-nudge-palpito 1.7s ease-in-out 2;
	border-color: #8fa0e8;
	box-shadow: 0 4px 16px rgba(30, 39, 73, 0.12);
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.wolk-metodo-card.wlp-nudge::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 42%;
	transform: translateX(-130%) skewX(-18deg);
	background: linear-gradient(105deg,
		transparent 0%,
		rgba(255, 255, 255, 0.65) 42%,
		rgba(196, 205, 250, 0.45) 55%,
		transparent 100%);
	animation: wlp-nudge-brillo 1.5s ease-in-out 0.25s 2;
	pointer-events: none;
}
.wolk-metodo-card.wlp-nudge .wolk-metodo-sub {
	color: #0f766e;
	font-weight: 800;
	transition: color 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
	.wolk-metodo-card.wlp-nudge,
	.wolk-metodo-card.wlp-nudge::after { animation: none; }
}

/* 0.70.3 — tablita PRO de tractos ya reportados (server-render, misma pinta
   de la tablita del checkout). */
.wolk-sinpe-tractos-tabla { margin: 10px 0 14px; }
.wolk-sinpe-tractos-tabla s { opacity: .6; }

/* 0.70.5 — método de pago ÚNICO (pedido Deiby): card a ancho completo, no
   huérfana en la grilla de 2 columnas. */
.wolk-metodo-lista.es-unica { grid-template-columns: 1fr; }
.wolk-metodo-lista.es-unica .wolk-metodo-card { flex-direction: row; align-items: center; gap: 10px; }
.wolk-metodo-lista.es-unica .wolk-metodo-tit { flex-shrink: 0; }
.wolk-metodo-lista.es-unica .wolk-metodo-sub { margin-left: auto; text-align: right; }
@media (max-width: 480px) {
	.wolk-metodo-lista.es-unica .wolk-metodo-card { flex-direction: column; align-items: flex-start; gap: 2px; }
	.wolk-metodo-lista.es-unica .wolk-metodo-sub { margin-left: 0; text-align: left; }
}

/* 0.70.6 — método ÚNICO como NATIVO (pedido Deiby: "debería verse que no hay
   otra opción de pago"): nada de card seleccionable — una fila informativa,
   quieta, con su etiquetita "MÉTODO DE PAGO", sin borde de selección, sin
   cursor de botón y sin anillo de activo. */
.wolk-metodo-lista.es-unica::before {
	content: 'Método de pago';
	display: block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #64708a;
	margin-bottom: -4px;
}
.wolk-metodo-lista.es-unica { gap: 8px; }
.wolk-metodo-lista.es-unica .wolk-metodo-card,
.wolk-metodo-lista.es-unica .wolk-metodo-card.es-activa {
	border: 1px solid #e3e6f2;
	background: #f6f7fb;
	box-shadow: none;
	cursor: default;
}
.wolk-metodo-lista.es-unica .wolk-metodo-card:focus-within { outline: none; }

/* 0.70.11 — bocina del server (tras rechazo / tractos ya reportados). */
.wolk-sinpe-bocina-wrap { text-align: center; padding: 8px 0 2px; }

/* 0.70.12 — grilla SOLO con métodos reales (fix del escalonado en diagonal):
   cualquier hijo de la lista que no sea una card de método (li fantasmas de
   WooCommerce/gateways, nodos vacíos) no ocupa celda. */
.wolk-metodo-lista > *:not(.wolk-metodo-item) { display: none !important; }
/* 0.74.0 — El <ul> original de WooCommerce queda vacío y escondido: las cards
   reales se MUEVEN a nuestro contenedor. Antes la grilla era ese <ul> y
   cualquier nodo ajeno (de un gateway, del tema, hasta un texto suelto) se
   comía una celda y las cards salían en diagonal. Ahora la grilla solo tiene
   hijos nuestros: no hay forma de que se desacomode. */
ul.wc_payment_methods.wolk-metodo-oculta { display: none !important; }

/* 0.70.15 — tablita unificada: fila de comprobante RECHAZADO. */
.wlp-sinpe-tabla tr.es-anulado-fila td { color: #b91c1c; }
.wlp-sinpe-tabla tr.es-anulado-fila s { opacity: .7; }

/* 0.70.16 — la bocina SIEMPRE con el emoji lindo de WLP (pedido Deiby: en la
   pantalla de comprobantes salía la versión "texto" en contorno porque el
   botón heredaba otra tipografía). Fuentes de emoji a color explícitas +
   selector de variación en el carácter (JS/PHP). */

/* ================================================================
   0.71.1 — Bocina con ícono PROPIO (SVG) + textos que envuelven.
   ================================================================ */
/* El SVG hereda el navy de marca y mide igual en todo aparato: se acabó
   depender de la fuente de emoji del teléfono (en Android salía monocroma). */
.wlp-sinpe-bocina:active { transform: scale(0.94); }
/* Textos largos de la tablita: la clase de montos lleva nowrap (para que
   "· $1,130.00 USD" no se parta), así que los avisos usan la suya y SÍ
   envuelven — antes se salían de la caja en móvil (bug de Deiby). */
.wlp-sinpe-tabla-aviso { font-weight: 700; font-size: 11.5px; opacity: 0.9; white-space: normal; overflow-wrap: anywhere; display: inline-block; }

/* 0.71.2 — modal de respaldo cuando el teléfono NO tiene motor de voz. */
.wolk-sinpe-voz-modal .wlp-sinpe-modal-icono { font-size: 30px; }
.wolk-sinpe-voz-modal .wlp-sinpe-modal-texto { font-size: 15px; line-height: 1.55; }

/* ================================================================
   Interruptor de voz + ayuda para activarla (núcleo 1.1.0).
   ================================================================ */

/* Ayuda dentro del modal cuando el aparato no tiene voz. */
.wolk-voz-ayuda { margin: 4px 0 16px; padding: 14px 14px 10px; background: #f6f7fb; border: 1px solid #e3e6f2; border-radius: 12px; text-align: left; }
.wolk-voz-ayuda-tit { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; color: #14183a; }
.wolk-voz-ayuda-sub { margin: 0 0 10px; font-size: 12.5px; color: #64708a; line-height: 1.5; }
.wolk-voz-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.wolk-voz-probar, .wolk-voz-ajustes { border: none; border-radius: 10px; font-weight: 800; font-size: 13px; padding: 11px 14px; cursor: pointer; font-family: inherit; flex: 1 1 auto; }
.wolk-voz-probar { background: #1e2749; color: #fff; }
.wolk-voz-ajustes { background: #fff; color: #1e2749; border: 1.5px solid #c7cef5; }
.wolk-voz-aviso { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; }
.wolk-voz-aviso.es-ok { color: #0f766e; }
.wolk-voz-aviso.es-no { color: #b45309; }
.wolk-voz-pasos { margin: 0; padding-left: 20px; font-size: 12.5px; color: #33395c; line-height: 1.65; }
.wolk-voz-pasos li { margin-bottom: 3px; }

/* 0.72.2 — MONTO del modal de voz: aparte y formateado (pedido Deiby: "no
   todo seguido"). Local grande y en negrita; USD debajo, discreto. */
.wolk-voz-monto {
	display: block;
	margin: 10px 0 4px;
	padding: 12px 14px;
	border: 1px solid #d9def0;
	border-radius: 12px;
	background: linear-gradient( 180deg, #f7f9ff 0%, #eef2ff 100% );
	text-align: center;
}
.wolk-voz-monto-label {
	display: block;
	margin: 0 0 2px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b7398;
}
.wolk-voz-monto-loc {
	display: block;
	font-size: 26px;
	line-height: 1.15;
	font-weight: 800;
	color: #14183a;
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}
.wolk-voz-monto-usd {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
	color: #6b7398;
	font-variant-numeric: tabular-nums;
}
@media ( max-width: 400px ) {
	.wolk-voz-monto-loc { font-size: 22px; }
}


/* 0.74.0 — LA BOCINA, UN SOLO ÍCONO EN TODAS LAS PANTALLAS.
   El emoji lo pone el CSS, NO el HTML: cuando va como texto, el script de
   emojis de WordPress (wp-emoji-release.min.js) lo reemplaza por su imagen
   de Twemoji y el ícono termina viéndose distinto en cada pantalla — eso
   era el "ícono feo". Como contenido de CSS, ese script ni lo ve. */
.wlp-sinpe-bocina::before {
	content: '\1F50A';
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
	line-height: 1;
}
/* Por si alguna otra parte del sitio ya metió la imagen dentro del botón. */
.wlp-sinpe-bocina img.emoji { display: none !important; }

/* 0.74.0 — El interruptor "Leer en voz alta" se quitó (pedido Deiby: en la
   pantalla del pedido la bolita quedaba encima del texto y ensuciaba el
   bloque). Se dejan sin estilo a propósito: si quedara markup viejo en
   caché, no pinta nada raro. */
.wolk-voz-grupo { display: contents; }

/* 0.75.0 — Mientras suena el audio grabado, la bocina del modal palpita: el
   cliente entiende que ESO que está oyendo explica el monto que ve abajo.
   (El audio es uno solo para todos, así que no puede decir un monto que
   cambia en cada pedido — por eso el monto va en pantalla.) */
.wolk-sinpe-voz-modal.es-sonando .wlp-sinpe-modal-icono {
	animation: wolk-voz-palpito 1.15s ease-in-out infinite;
}
@keyframes wolk-voz-palpito {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.11); }
}
@media (prefers-reduced-motion: reduce) {
	.wolk-sinpe-voz-modal.es-sonando .wlp-sinpe-modal-icono { animation: none; }
}

/* =====================================================================
 * 0.95.59 — PANTALLA EN 3 PASOS + "LISTO" (.wsr)
 * Caso real (30 set): en el celular el cliente no encontraba cómo subir el
 * comprobante, veía "Enviar comprobante" dos veces y "Pedido recibido" le
 * volvía a pedir lo que ya había subido. Aquí: pasos numerados, un solo
 * botón para subir, y solo PALPITA lo que sigue (una cosa a la vez).
 * Todo va dentro de .wolk-sinpe-wizard.wsr: no toca otras pantallas.
 * ================================================================== */
.wolk-sinpe-wizard.wsr,
.wolk-sinpe-checkout.wsr {
	--wsr-azul: #2b3fbf;
	--wsr-azul-2: #3b55e0;
	--wsr-tinta: #0a1628;
	--wsr-gris: #5b6b85;
	--wsr-linea: #e3e8f2;
	--wsr-suave: #f4f6fb;
	--wsr-ok: #16a34a;
	--wsr-ok-bg: #e8f7ee;
	--wsr-ambar-bg: #fff7e8;
	--wsr-ambar-bd: #fde3b0;
	--wsr-ambar-tx: #7a4b0c;
	padding: 18px 16px;
	color: var(--wsr-tinta);
}
.wolk-sinpe-wizard.wsr [hidden],
.wolk-sinpe-checkout.wsr [hidden] { display: none !important; }
/* 0.95.60 — checkout de la tiendita: la caja vive dentro del medio de pago de WooCommerce. */
.wolk-sinpe-checkout.wsr { padding: 4px 0 0; background: none; }
.wsr .wsr-co-final { margin: 4px 0 0; }
.wolk-sinpe-wizard.wsr h3 { font-size: 17px; margin: 0 0 12px; }
.wsr .wsr-vh {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	opacity: 0;
}
.wsr .wsr-form { position: relative; margin: 0; }
.wsr .wsr-card {
	background: #fff;
	border: 1px solid var(--wsr-linea);
	border-radius: 16px;
	padding: 14px 14px 12px;
	margin: 0 0 12px;
	transition: border-color .25s, box-shadow .25s;
}
.wsr .wsr-card.es-actual { border-color: #c9d1f5; box-shadow: 0 6px 18px rgba(43, 63, 191, .08); }
.wsr .wsr-tit { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--wsr-tinta); }
.wsr .wsr-num {
	display: inline-grid; place-items: center; flex: none;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--wsr-suave); color: var(--wsr-gris);
	font-size: 12.5px; font-weight: 800;
	transition: background .25s, color .25s;
}
.wsr .wsr-card.es-actual .wsr-num { background: var(--wsr-azul); color: #fff; }
.wsr .wsr-card.es-hecho .wsr-num { background: var(--wsr-ok); color: #fff; }
.wsr .wsr-card.es-hecho .wsr-tit::after { content: "✓"; margin-left: auto; color: var(--wsr-ok); font-weight: 800; }
.wsr .wsr-linea { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wsr .wsr-monto { font-size: 28px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.wsr .wsr-monto small { display: block; font-size: 13.5px; font-weight: 600; color: var(--wsr-gris); letter-spacing: 0; margin-top: 2px; }
.wsr .wsr-nota { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--wsr-gris); }
.wsr .wsr-copiar {
	flex: none; position: relative;
	border: 1px solid var(--wsr-linea); background: #fff; color: var(--wsr-azul);
	font: inherit; font-size: 13px; font-weight: 700;
	border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap;
	min-height: 38px;
}
.wsr .wsr-copiar.es-ok { color: var(--wsr-ok); border-color: #bfe5c8; background: var(--wsr-ok-bg); }
.wsr .wsr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.wsr .wsr-chip {
	flex: none; border: 1px solid var(--wsr-linea); background: #fff; color: var(--wsr-gris);
	border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.wsr .wsr-chip.es-on { background: var(--wsr-tinta); border-color: var(--wsr-tinta); color: #fff; }
.wsr .wsr-cuenta { background: var(--wsr-suave); border-radius: 14px; padding: 12px; }
.wsr .wsr-cuenta-txt { min-width: 0; }
.wsr .wsr-cuenta-nom { font-size: 12px; font-weight: 700; color: var(--wsr-gris); text-transform: uppercase; letter-spacing: .4px; }
.wsr .wsr-dato { font-size: 16.5px; font-weight: 800; word-break: break-all; }
.wsr .wsr-sub { font-size: 12.5px; color: var(--wsr-gris); margin-top: 2px; word-break: break-word; }

/* Subir: el recuadro entero es el botón. */
.wsr .wsr-drop {
	display: flex !important; flex-direction: column; align-items: center; gap: 6px;
	position: relative; margin: 0 !important;
	border: 2px dashed #c7d2f0; background: #f7f9ff; border-radius: 16px;
	padding: 20px 14px; text-align: center; cursor: pointer;
	font-weight: 400 !important; color: var(--wsr-tinta) !important;
	transition: border-color .2s, background .2s;
}
.wsr .wsr-drop:hover, .wsr .wsr-drop:focus-within { border-color: var(--wsr-azul); }
.wsr .wsr-drop:focus-within { outline: 3px solid rgba(43, 63, 191, .25); outline-offset: 2px; }
.wsr .wsr-drop-ico {
	width: 50px; height: 50px; border-radius: 50%; background: var(--wsr-azul);
	display: grid; place-items: center;
}
.wsr .wsr-drop-ico::before {
	content: ""; width: 24px; height: 24px; background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1l-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1l-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wsr .wsr-drop b { font-size: 16px; }
.wsr .wsr-drop span:last-child { font-size: 12.5px; color: var(--wsr-gris); }

.wsr .wsr-lista { display: flex; flex-direction: column; gap: 8px; }
.wsr .wsr-lista:not(:empty) { margin: 0 0 10px; }
.wsr .wsr-arch { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--wsr-linea); border-radius: 14px; padding: 10px; }
.wsr .wsr-thumb { width: 46px; height: 46px; flex: none; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #dfe6fb, #f3f5fb); display: grid; place-items: center; }
.wsr .wsr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wsr .wsr-thumb-pdf { font-size: 11px; font-weight: 800; color: #b91c1c; }
.wsr .wsr-arch-txt { flex: 1; min-width: 0; }
.wsr .wsr-arch-nom { font-size: 12.5px; color: var(--wsr-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsr .wsr-val { font-size: 15px; font-weight: 800; }
.wsr .wsr-val small { font-size: 12px; font-weight: 600; color: var(--wsr-gris); }
.wsr .wsr-val.es-leyendo { font-weight: 600; color: var(--wsr-gris); font-size: 13.5px; }
.wsr .wsr-val.es-aviso { font-weight: 600; color: var(--wsr-ambar-tx); font-size: 13px; }
.wsr .wsr-manual { margin-top: 6px !important; width: 100%; max-width: 180px; padding: 7px 10px !important; font-size: 14px !important; }
.wsr .wsr-quitar { flex: none; border: 0; background: var(--wsr-suave); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--wsr-gris); font-size: 14px; line-height: 1; }
.wsr .wsr-brillo {
	display: inline-block; width: 80px; height: 9px; border-radius: 6px; vertical-align: middle;
	background: linear-gradient(90deg, #eceff6 0%, #dfe5f2 50%, #eceff6 100%); background-size: 200% 100%;
	animation: wsr-brillo 1.1s linear infinite;
}
@keyframes wsr-brillo { to { background-position: -200% 0; } }
.wsr .wsr-agregar { display: inline-block; border: 0; background: none; color: var(--wsr-azul); font: inherit; font-size: 13.5px; font-weight: 700; padding: 6px 2px; cursor: pointer; }
.wsr .wsr-guia { display: flex; align-items: center; gap: 6px; color: var(--wsr-azul); font-weight: 700; font-size: 12.5px; margin: 8px 0 0; }
.wsr .wsr-guia span { display: inline-block; animation: wsr-dedo 1.2s ease-in-out infinite; }
@keyframes wsr-dedo { 50% { transform: translateY(-3px); } }
.wsr .wsr-suave { background: var(--wsr-ambar-bg); border: 1px solid var(--wsr-ambar-bd); color: var(--wsr-ambar-tx); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin: 0 0 10px; }
.wsr .wsr-suave .wlp-sinpe-bocina { margin-left: 6px; vertical-align: middle; }
.wsr .wsr-bien { background: var(--wsr-ok-bg); border: 1px solid #bfe5c8; color: #14532d; border-radius: 12px; padding: 10px 12px; font-size: 13px; margin: 0 0 10px; }
.wsr .wsr-extra { margin: 12px 0 0; font-size: 13px; }
.wsr .wsr-extra summary { cursor: pointer; color: var(--wsr-gris); font-weight: 600; }
.wsr .wsr-extra label { margin: 8px 0 0; }

/* El botón de enviar: justo debajo del paso 3 (sin barra fija: no tapa nada). */
.wsr .wsr-enviar-wrap { padding-top: 6px; }
.wsr .wsr-enviar {
	display: block; width: 100%; margin: 0; position: relative;
	border-radius: 14px; padding: 14px 16px; font-size: 16px; font-weight: 800;
	background: #c3cbe0; color: #fff; transition: background .2s, transform .1s;
}
.wsr .wsr-enviar.es-listo, .wsr .wsr-enviar.es-enviando { background: var(--wsr-azul); }
.wsr .wsr-enviar:active { transform: scale(.985); }
.wsr .wsr-enviar-sub { display: block; font-size: 12px; font-weight: 600; opacity: .9; margin-top: 2px; }
.wsr .wsr-horario { margin: 10px 0 0; text-align: center; }
.wsr .wolk-sinpe-msg:not(:empty) { margin: 8px 0 0; }

/* PALPITACIÓN: solo en lo que sigue (una cosa a la vez). */
.wsr .wsr-late { position: relative; }
.wsr .wsr-late::after {
	content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
	border: 2px solid var(--wsr-azul-2); opacity: 0;
	animation: wsr-late 1.6s ease-out infinite;
}
@keyframes wsr-late { 0% { opacity: .75; transform: scale(.98); } 100% { opacity: 0; transform: scale(1.06); } }

.wsr .wsr-toast {
	position: fixed; left: 50%; bottom: 90px; z-index: 99999;
	transform: translateX(-50%) translateY(16px); opacity: 0; pointer-events: none;
	background: #111827; color: #fff; border-radius: 999px; padding: 10px 16px;
	font-size: 13.5px; font-weight: 600; max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: opacity .25s, transform .25s;
}
.wsr .wsr-toast.es-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* "Listo": check dibujado + línea de tiempo. */
.wsr .wsr-listo, .wsr .wsr-hecho { text-align: center; padding: 6px 4px 4px; }
.wsr .wsr-check { width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%; background: var(--wsr-ok-bg); display: grid; place-items: center; }
.wsr .wsr-check svg { width: 40px; height: 40px; }
.wsr .wsr-check path { stroke: var(--wsr-ok); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: wsr-trazo .6s .15s ease forwards; }
@keyframes wsr-trazo { to { stroke-dashoffset: 0; } }
.wsr .wsr-listo h3 { margin: 0 0 4px; font-size: 20px; }
.wsr .wsr-listo-sub { margin: 0 0 14px; color: var(--wsr-gris); font-size: 14px; }
.wsr .wsr-hecho p { font-size: 15px; font-weight: 700; margin: 0; }
.wsr .wsr-linea-t { list-style: none; margin: 0 0 12px; padding: 14px; border: 1px solid var(--wsr-linea); border-radius: 16px; text-align: left; }
.wsr .wsr-linea-t li { display: flex; gap: 12px; padding: 0 0 14px; position: relative; margin: 0; }
.wsr .wsr-linea-t li:last-child { padding-bottom: 0; }
.wsr .wsr-linea-t li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--wsr-linea); }
.wsr .wsr-linea-t li.es-ok:not(:last-child)::before { background: #bfe5c8; }
.wsr .wsr-pto { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--wsr-suave); color: var(--wsr-gris); position: relative; }
.wsr .wsr-linea-t li.es-ok .wsr-pto { background: var(--wsr-ok); color: #fff; }
.wsr .wsr-linea-t li.es-ahora .wsr-pto { background: var(--wsr-azul); }
.wsr .wsr-linea-t li.es-ahora .wsr-pto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.wsr .wsr-linea-t li.es-ahora .wsr-pto::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--wsr-azul); animation: wsr-late 1.6s ease-out infinite; }
.wsr .wsr-linea-t b { display: block; font-size: 14.5px; }
.wsr .wsr-linea-t small { display: block; color: var(--wsr-gris); font-size: 12.5px; line-height: 1.4; }
.wsr .wsr-partes { border: 1px solid var(--wsr-linea); border-radius: 16px; padding: 12px 14px; margin: 0; }
.wsr .wsr-partes > summary { cursor: pointer; color: var(--wsr-azul); font-weight: 700; font-size: 14px; list-style: none; }
.wsr .wsr-partes > summary::-webkit-details-marker { display: none; }
.wsr .wsr-partes > summary::before { content: "+ "; }
.wsr .wsr-partes[open] > summary::before { content: "− "; }
.wsr .wsr-partes[open] > summary { margin-bottom: 10px; }
.wsr .wsr-suave-txt { color: var(--wsr-gris); font-size: 13px; margin: 0 0 12px; }

@media (min-width: 720px) {
	.wolk-sinpe-wizard.wsr { padding: 22px 24px; }
	.wsr .wsr-form,
	.wsr .wsr-listo, .wsr .wsr-linea-t, .wsr .wsr-partes, .wsr .wsr-hecho,
	.wolk-sinpe-wizard.wsr > h3, .wolk-sinpe-wizard.wsr > .wsr-suave, .wolk-sinpe-wizard.wsr > .wolk-sinpe-rechazo {
		max-width: 560px; margin-left: auto; margin-right: auto;
	}
	.wsr .wsr-partes .wsr-form { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wsr .wsr-late::after, .wsr .wsr-guia span, .wsr .wsr-brillo, .wsr .wsr-linea-t li.es-ahora .wsr-pto::after { animation: none; }
	.wsr .wsr-check path { animation: none; stroke-dashoffset: 0; }
}

/* 0.95.60 — "Realizar pedido" de WooCommerce (fuera de la caja) también palpita
   cuando el comprobante ya está listo: es lo único que falta. */
#place_order.wsr-late-fuera { position: relative; }
#place_order.wsr-late-fuera::after {
	content: ""; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none;
	border: 2px solid #3b55e0; opacity: 0;
	animation: wsr-late 1.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	#place_order.wsr-late-fuera::after { animation: none; }
}

/* =====================================================================
 * 0.95.61 — "Pedido recibido" de una transferencia: solo nuestra tarjeta.
 * Deiby (30 set): el "Gracias. Tu pedido ha sido recibido", el resumen
 * (número, fecha, correo, total, método) y los "Detalles del pedido" /
 * "Dirección de facturación" se veían feísimos y repetían lo que ya dice la
 * tarjeta. La clase solo la pone el servidor en pedidos por transferencia
 * (clase_gracias); la tabla de detalles además ya no se pinta
 * (gracias_sin_detalles). Pedidos con tarjeta: sin cambios.
 * ================================================================== */
body.wolk-sinpe-gracias .woocommerce-notice.woocommerce-thankyou-order-received,
body.wolk-sinpe-gracias .woocommerce-thankyou-order-received,
body.wolk-sinpe-gracias ul.woocommerce-order-overview,
body.wolk-sinpe-gracias .woocommerce-order-overview,
body.wolk-sinpe-gracias .woocommerce-order-details,
body.wolk-sinpe-gracias .woocommerce-customer-details,
body.wolk-sinpe-gracias .wc-block-order-confirmation-status,
body.wolk-sinpe-gracias .wc-block-order-confirmation-summary,
body.wolk-sinpe-gracias .wc-block-order-confirmation-totals-wrapper,
body.wolk-sinpe-gracias .wc-block-order-confirmation-billing-wrapper,
body.wolk-sinpe-gracias .wc-block-order-confirmation-shipping-wrapper {
	display: none !important;
}
body.wolk-sinpe-gracias .wolk-sinpe-wizard.wsr { margin-top: 0; }
.wsr .wsr-pedido { margin: -6px 0 12px; font-size: 13px; color: #5b6b85; }
@media (min-width: 720px) {
	.wolk-sinpe-wizard.wsr > .wsr-pedido { max-width: 560px; margin-left: auto; margin-right: auto; }
}
/* Modal de aviso (0.95.61): ícono verde de "ya está". */
.wlp-sinpe-modal-icono.es-ok { background: #e8f7ee; color: #16a34a; }

/* =====================================================================
 * 0.95.70 — "Pedido recibido" de un pedido PAGADO (tarjeta, datáfono, $0):
 * la misma tarjeta «¡Listo!» de la transferencia. Deiby (1 oct, pedido
 * #2221): la de tarjeta seguía de fábrica. La clase del body solo la pone el
 * servidor (Wolk_Tienda_Gracias_Pago::clase_body) y la tabla de detalles ya
 * no se pinta para ese pedido.
 * ================================================================== */
.wolk-gracias.wsr {
	--wsr-azul: #2b3fbf;
	--wsr-tinta: #0a1628;
	--wsr-gris: #5b6b85;
	--wsr-linea: #e3e8f2;
	--wsr-suave: #f4f6fb;
	--wsr-ok: #16a34a;
	--wsr-ok-bg: #e8f7ee;
	padding: 18px 16px;
	color: var(--wsr-tinta);
}
.wolk-gracias.wsr h3 { font-size: 21px; margin: 0 0 4px; }
.wolk-gracias .wolk-gracias-tit { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.wolk-gracias .wolk-gracias-res { border: 1px solid var(--wsr-linea); border-radius: 16px; padding: 4px 14px; margin: 0 0 14px; }
.wolk-gracias .wolk-gracias-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 0; font-size: 14px; border-bottom: 1px dashed var(--wsr-linea); }
.wolk-gracias .wolk-gracias-fila:last-child { border-bottom: 0; }
.wolk-gracias .wolk-gracias-fila > span:first-child { color: var(--wsr-gris); min-width: 0; }
.wolk-gracias .wolk-gracias-fila > span:last-child { font-weight: 700; text-align: right; white-space: nowrap; }
.wolk-gracias .wolk-gracias-fila.es-prod > span:first-child { color: var(--wsr-tinta); font-weight: 600; }
.wolk-gracias .wolk-gracias-extra { display: block; font-size: 12px; font-weight: 400; color: var(--wsr-gris); margin-top: 3px; }
.wolk-gracias .wolk-gracias-fila.es-total > span { font-size: 16px; font-weight: 800; color: var(--wsr-tinta); }
.wolk-gracias .wolk-gracias-btns { display: flex; flex-direction: column; gap: 10px; }
.wolk-gracias .wolk-gracias-btn { display: block; box-sizing: border-box; width: 100%; text-align: center; text-decoration: none; border-radius: 14px; padding: 14px 16px; font-size: 15px; font-weight: 800; }
.wolk-gracias .wolk-gracias-btn.es-principal { background: #14204a; color: #fff; }
.wolk-gracias .wolk-gracias-btn.es-sec { background: #fff; color: var(--wsr-azul); box-shadow: inset 0 0 0 2px var(--wsr-azul); }
/* 0.95.78 — "Relacionar a mi Wolk ID": recuadro azul y botón que late (sin animación si el sistema pide menos movimiento). */
.wolk-gracias .wolk-gracias-rel { border: 2px solid var(--wsr-azul); background: #f3f5ff; border-radius: 16px; padding: 14px; margin: 0 0 14px; }
.wolk-gracias .wolk-gracias-rel p { margin: 0 0 4px; font-size: 14px; }
.wolk-gracias .wolk-gracias-rel .wolk-gracias-rel-tit { font-weight: 800; font-size: 15px; color: var(--wsr-tinta); }
.wolk-gracias .wolk-gracias-rel small { display: block; color: var(--wsr-gris); font-size: 12.5px; margin: 0 0 12px; }
.wolk-gracias .wolk-gracias-btn.es-rel { background: var(--wsr-azul); color: #fff; animation: wolk-gracias-late 1.6s ease-in-out infinite; }
@keyframes wolk-gracias-late { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(43, 63, 191, .45); } 50% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(43, 63, 191, 0); } }
@media (prefers-reduced-motion: reduce) { .wolk-gracias .wolk-gracias-btn.es-rel { animation: none; } }
/* 0.95.79 — texto justificado (Deiby). */
.wolk-gracias .wolk-gracias-rel p:not(.wolk-gracias-rel-tit), .wolk-gracias .wolk-gracias-rel small { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.wolk-gracias .wolk-gracias-rel .wolk-gracias-rel-otro { display: block; margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--wsr-azul); }
@media (min-width: 720px) {
	.wolk-gracias.wsr { padding: 22px 24px; }
	.wolk-gracias.wsr > * { box-sizing: border-box; max-width: 560px; margin-left: auto; margin-right: auto; }
}
body.wolk-gracias-pago .woocommerce-notice.woocommerce-thankyou-order-received,
body.wolk-gracias-pago .woocommerce-thankyou-order-received,
body.wolk-gracias-pago ul.woocommerce-order-overview,
body.wolk-gracias-pago .woocommerce-order-overview,
body.wolk-gracias-pago .woocommerce-order-details,
body.wolk-gracias-pago .woocommerce-customer-details,
body.wolk-gracias-pago .wc-block-order-confirmation-status,
body.wolk-gracias-pago .wc-block-order-confirmation-summary,
body.wolk-gracias-pago .wc-block-order-confirmation-totals-wrapper,
body.wolk-gracias-pago .wc-block-order-confirmation-billing-wrapper,
body.wolk-gracias-pago .wc-block-order-confirmation-shipping-wrapper {
	display: none !important;
}