.cl-card {
	--cl-primary: #6F4E37;
	--cl-secondary: #D9B896;
	--cl-cream: #F4E9DA;
	max-width: 400px;
	margin: 20px auto;
	padding: 0 0 24px;
	background: var(--cl-bottom-bg, #FFFFFF);
	border-radius: 22px;
	box-shadow: 0 12px 32px rgba(60, 40, 20, 0.10);
	text-align: center;
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--cl-text-primary, #2E241B);
	overflow: hidden;
}

/* Fondo cálido para envolver la página de registro */
.cl-register-page {
	background: linear-gradient(180deg, #F4E9DA 0%, #FBF6EF 220px, transparent 220px);
	padding: 24px 12px 12px;
}

.cl-banner {
	width: 100%;
	max-height: 110px;
	object-fit: cover;
	display: block;
}

.cl-register-logo {
	max-height: 130px;
	display: block;
	margin: 20px auto 10px;
}

/* Encabezado de la tarjeta: logo + nombre + progreso.
   Sin línea divisoria dura — el propio color de fondo agrupa la sección.
   Detalle botánico muy sutil en la esquina, decorativo, nunca protagonista. */
.cl-card-top {
	background: var(--cl-cream);
	padding: 20px 20px 16px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-align: left;
	position: relative;
	overflow: hidden;
}
.cl-card-top::after {
	content: none;
	position: absolute;
	top: -6px;
	right: -6px;
	width: 64px;
	height: 64px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M85 15 Q60 25 55 50 Q50 75 30 90' stroke='%236F4E37' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M62 32 Q52 30 46 38 Q40 46 44 56' stroke='%236F4E37' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 55 Q42 56 38 64 Q34 72 38 80' stroke='%236F4E37' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: var(--cl-decoration-opacity, 0.10);
	pointer-events: none;
}
.cl-decoration-leaves .cl-card-top::after { content: ''; }
/* Logo con respaldo blanco sutil — más limpio que un cuadro pesado, y
   necesario para que los logos con transparencia se vean bien integrados. */
.cl-logo {
	background: #FFFFFF;
	border-radius: 14px;
	box-sizing: border-box;
	padding: 7px;
	object-fit: contain;
	flex-shrink: 0;
	max-height: 84px;
	max-width: 84px;
	box-shadow: 0 1px 5px rgba(60,40,20,0.10);
	position: relative;
	z-index: 1;
}
.cl-logo-small { max-height: 44px; max-width: 44px; }
.cl-logo-medium { max-height: 68px; max-width: 68px; }
.cl-logo-large { max-height: 96px; max-width: 96px; }

/* Forma del logo: cuadrado con fondo blanco (por defecto) / círculo / sin contenedor */
.cl-logo-shape-circle { border-radius: 50%; }
.cl-logo-shape-none { background: transparent; box-shadow: none; padding: 0; }
.cl-card-top-text { flex: 1; min-width: 0; padding-top: 2px; position: relative; z-index: 1; }
.cl-business-name {
	color: var(--cl-business-name, var(--cl-primary));
	font-size: 1.55em;
	font-weight: 800;
	margin: 0 0 4px;
	letter-spacing: 0.1px;
	line-height: 1.15;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cl-stamps-count {
	font-size: 0.86em;
	font-weight: 600;
	color: var(--cl-text-secondary, #8a7a6a);
	letter-spacing: 0.2px;
}

@media (max-width: 360px) {
	.cl-card-top { padding: 16px 16px 14px; }
	.cl-business-name { font-size: 1.3em; }
	.cl-logo { max-height: 64px; max-width: 64px; }
	.cl-stamps-grid { gap: 9px 7px; padding: 16px 14px 20px; }
}

/* Grid de sellos — con un patrón de lunares muy discreto (inspirado en
   FaveCard) para darle textura de loyalty card, sin saturar.
   SIEMPRE 5 columnas fijas — nunca se reacomoda en menos columnas.
   El tamaño configurado (--cl-stamp-size) actúa como TECHO máximo: en
   pantallas anchas los círculos llegan a ese tamaño, en pantallas muy
   angostas se encogen un poco para seguir cabiendo 5 por fila, pero el
   5+5 nunca se rompe. */
.cl-stamps-grid {
	background-color: var(--cl-stamp-area-bg, var(--cl-cream));
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 11px 9px;
	padding: 20px 18px 24px;
}
.cl-decoration-dots .cl-stamps-grid {
	background-image: radial-gradient(circle, rgba(111,78,55,0.14) 1px, transparent 1.4px);
	background-size: 13px 13px;
}
.cl-stamp {
	width: 100%;
	max-width: var(--cl-stamp-size, 64px);
	aspect-ratio: 1;
	margin: 0 auto;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35em;
	overflow: hidden;
	transition: transform 0.2s ease;
}
/* object-fit: contain a propósito — nunca deforma la imagen del sello.
   Si el % configurado supera el círculo, el propio círculo (overflow:
   hidden) la recorta parejo en las orillas, como un ícono circular —
   nunca deformada, nunca con recorte irregular. */
.cl-stamp-img { object-fit: contain; object-position: center; border-radius: 0; display: block; margin: auto; }

/* Estilos configurables del sello vacío — anillos suaves, sin contraste duro */
.cl-empty-white-border .cl-stamp { background: var(--cl-stamp-empty, #FFFDF9); box-shadow: inset 0 0 0 1px var(--cl-stamp-empty-border, rgba(111,78,55,0.13)); }
.cl-empty-beige .cl-stamp { background: #EFE1CC; box-shadow: none; }
.cl-empty-opaque .cl-stamp { background: rgba(111,78,55,0.10); box-shadow: none; }
.cl-empty-icon .cl-stamp { background: var(--cl-stamp-empty, #FFFDF9); box-shadow: inset 0 0 0 1px var(--cl-stamp-empty-border, rgba(111,78,55,0.08)); opacity: 0.85; }

/* Fondo configurable detrás de la imagen del sello activo, para que
   resalte según el color de la foto que subas. */
.cl-stamp.filled { box-shadow: inset 0 0 0 1.5px var(--cl-primary); }
.cl-stampbg-cream .cl-stamp.filled { background: var(--cl-secondary); }
.cl-stampbg-white .cl-stamp.filled { background: #FFFFFF; }
.cl-stampbg-beige .cl-stamp.filled { background: #EFE1CC; }
.cl-stampbg-transparent .cl-stamp.filled { background: transparent; }
.cl-stamp.filled.cl-just-added { transform: scale(1.12); }

/* El último círculo siempre es el "slot" de premio, visualmente distinto pero sobrio */
.cl-reward-slot {
	background: var(--cl-reward, var(--cl-secondary)) !important;
	box-shadow: none !important;
	overflow: visible !important; /* para que la estrellita no se recorte al asomarse fuera del círculo */
	position: relative;
	flex-direction: column;
	color: #3a2b1a;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.12;
	padding: 3px;
	text-align: center;
}
.cl-reward-slot-text { max-width: 92%; word-break: break-word; }
.cl-reward-slot-star {
	position: absolute;
	top: -7px;
	right: -7px;
	background: var(--cl-star, #F2B705);
	color: #fff;
	border-radius: 50%;
	width: 23px;
	height: 23px;
	font-size: 0.85em;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #FFFDF9;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	z-index: 2;
}
.cl-reward-slot.active { background: var(--cl-primary) !important; color: #fff; }
.cl-hide-star .cl-reward-slot-star { display: none; }

.cl-loyalty-label {
	margin-top: 14px;
	font-size: 0.66em;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--cl-loyalty-label, #b0a290);
}
.cl-reward-text {
	font-size: 1.15em;
	font-weight: 700;
	color: var(--cl-primary);
	margin: 5px 20px 0;
	line-height: 1.3;
}
.cl-status-text {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--cl-status, var(--cl-text-secondary, #8a7a6a));
	margin: 8px 18px 0;
	letter-spacing: 0.2px;
}

.cl-reward-banner {
	margin: 14px 20px 0;
	background: #F8EAC2;
	color: #5c4a1a;
	padding: 10px 16px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 0.86em;
}
.cl-reward-banner.cl-hidden { display: none; }

.cl-customer-name {
	font-size: 0.84em;
	color: var(--cl-text-secondary, #6b5c4d);
	margin: 12px 18px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* QR compacto y configurable, con un pequeño "marco" tipo tarjeta —
   el tamaño real lo define --cl-qr-size inline por PHP, pero nunca pasa
   de ~42% del ancho de la tarjeta, para que no domine el diseño en
   pantallas angostas como iPhone SE. */
.cl-qr-wrap {
	display: inline-block;
	margin: 16px auto 4px;
	padding: 8px;
	background: #FFFDF9;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(60,40,20,0.08);
}
.cl-qr {
	display: block;
	border-radius: 6px;
	width: min(var(--cl-qr-size, 140px), 42vw);
	height: min(var(--cl-qr-size, 140px), 42vw);
}

.cl-card-actions {
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: center;
	margin-top: 14px;
	padding: 0 20px;
}
.cl-whatsapp-btn, .cl-resend-btn, .cl-confirm-btn {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	padding: 13px 22px;
	border-radius: var(--cl-button-radius, 30px);
	font-weight: 600;
	font-size: 0.92em;
	letter-spacing: 0.1px;
	text-decoration: none;
	text-align: center;
	transition: opacity 0.15s ease, transform 0.1s ease;
}
.cl-whatsapp-btn:hover, .cl-resend-btn:hover, .cl-confirm-btn:hover { opacity: 0.88; }
.cl-whatsapp-btn:active, .cl-resend-btn:active, .cl-confirm-btn:active { transform: scale(0.98); }
.cl-whatsapp-btn { background: var(--cl-whatsapp-button, #2FAE60); color: #fff; box-shadow: 0 4px 12px rgba(47,174,96,0.25); }
.cl-resend-btn {
	background: transparent;
	color: var(--cl-primary);
	border: 1.5px solid var(--cl-primary);
}

/* Estilo de botón: sólido (por defecto) / contorno / suave — aplica al botón principal de la tarjeta */
.cl-button-style-outline .cl-whatsapp-btn { background: transparent; color: var(--cl-whatsapp-button, #2FAE60); border: 1.5px solid var(--cl-whatsapp-button, #2FAE60); box-shadow: none; }
.cl-button-style-soft .cl-whatsapp-btn { background: color-mix(in srgb, var(--cl-whatsapp-button, #2FAE60) 18%, white); color: var(--cl-whatsapp-button, #2FAE60); box-shadow: none; }

/* Sombra de tarjeta: ninguna / suave (por defecto) / media */
.cl-shadow-none { box-shadow: none !important; }
.cl-shadow-medium { box-shadow: 0 18px 44px rgba(60, 40, 20, 0.18) !important; }

.cl-instructions {
	font-size: 0.74em;
	color: #6b5c4d;
	line-height: 1.5;
	margin: 12px 24px 0;
	text-align: center;
}

.cl-whatsapp-help {
	font-size: 0.75em;
	color: #a0907e;
	margin: 2px 0 0;
	text-align: center;
}

.cl-how-to-save {
	margin-top: 2px;
	text-align: center;
	font-size: 0.78em;
}
.cl-how-to-save summary {
	color: var(--cl-primary);
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.cl-how-to-save summary::-webkit-details-marker { display: none; }
.cl-how-to-save p {
	color: #a0907e;
	margin: 6px 6px 0;
	line-height: 1.4;
	text-align: left;
}

.cl-consent-label {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.85em !important;
	font-weight: 500 !important;
}
.cl-consent-label input { width: auto !important; margin-top: 3px; }
.cl-privacy-note {
	font-size: 0.75em;
	color: #a0907e;
	margin: -6px 0 0;
	line-height: 1.4;
}
.cl-recover-note {
	font-size: 0.78em;
	color: #6b5c4d;
	text-align: center;
	margin: 18px 24px 0;
}

.cl-wallet-note {
	font-size: 0.7em;
	color: #a0907e;
	margin: 12px 22px 0;
	line-height: 1.4;
}

.cl-logo-secondary {
	display: block;
	max-height: 28px;
	max-width: 100px;
	object-fit: contain;
	margin: 14px auto 0;
	opacity: 0.85;
}

.cl-hp-field { position: absolute; left: -9999px; top: -9999px; }

/* Formulario de registro */
.cl-register-box { padding: 0 26px 30px; }
.cl-business-subtitle {
	color: var(--cl-subtitle, var(--cl-text-secondary, #6b5c4d));
	font-size: 0.95em;
	text-align: center;
	margin: 0 0 4px;
}

.cl-register-box h2 {
	color: var(--cl-primary);
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 8px;
	text-align: center;
}
.cl-register-subtitle { color: var(--cl-subtitle, #6b5c4d); font-size: 0.92em; margin: 0 0 22px; text-align: center; line-height: 1.4; }
.cl-register-box form { display: flex; flex-direction: column; gap: 13px; text-align: left; }
.cl-register-box label { font-size: 0.88em; font-weight: 600; color: var(--cl-primary); }
.cl-register-box input {
	width: 100%;
	padding: 12px 13px;
	border: 1px solid #e2d8cc;
	border-radius: 12px;
	margin-top: 5px;
	box-sizing: border-box;
	font-size: 1em;
	transition: border-color 0.15s ease;
}
.cl-register-box input:focus { border-color: var(--cl-primary); outline: none; }
.cl-register-box button {
	background: var(--cl-button, var(--cl-primary));
	color: #fff;
	border: none;
	padding: 14px;
	border-radius: var(--cl-button-radius, 30px);
	font-weight: 600;
	cursor: pointer;
	font-size: 1em;
	margin-top: 4px;
	box-shadow: 0 4px 14px rgba(111,78,55,0.22);
	transition: opacity 0.15s ease, transform 0.1s ease;
}
.cl-register-box button:active { transform: scale(0.98); }
.cl-empty { text-align: center; color: #8a7a6a; padding: 40px 24px; }

/* Pantalla de confirmación post-registro */
.cl-confirm-box { padding: 30px 26px; }
.cl-confirm-box h2 {
	color: var(--cl-primary);
	font-size: 1.4em;
	font-weight: 700;
	margin: 0 0 6px;
}
.cl-confirm-subtitle { color: #6b5c4d; font-size: 0.9em; margin: 0 0 22px; line-height: 1.4; }
.cl-confirm-actions { display: flex; flex-direction: column; gap: 12px; }
button.cl-confirm-btn { border: none; cursor: pointer; }
.cl-btn-primary { background: var(--cl-button, var(--cl-primary)); color: #fff; box-shadow: 0 4px 14px rgba(111,78,55,0.22); }
.cl-btn-whatsapp { background: var(--cl-whatsapp-button, #2FAE60); color: #fff; box-shadow: 0 4px 12px rgba(47,174,96,0.25); }
.cl-btn-secondary { background: var(--cl-cream); color: var(--cl-primary); }
.cl-copy-msg { margin-top: 12px; font-size: 0.85em; color: #6b5c4d; word-break: break-all; }