body { font-family: 'Poppins', sans-serif; }
#qr-canvas canvas { width: 100% !important; height: auto !important; }


.glass-panel {
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.qr-frame {
	position: relative;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: all 0.3s ease;
	width: 100%;
	max-width: 280px;
}

.frame-none { padding: 8px; }
.frame-bottom { border: 4px solid #010508; padding: 16px 16px 48px 16px; border-radius: 12px; }
.frame-bottom::after { content: 'ESCANÉAME'; position: absolute; bottom: 0; left: 0; width: 100%; height: 32px; background: #010508; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; letter-spacing: 2px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.frame-bubble { border: 4px solid #010508; padding: 40px 16px 16px 16px; border-radius: 12px; margin-top: 20px; }
.frame-bubble::before { content: 'ESCANÉAME'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: #010508; color: #ffffff; padding: 6px 20px; border-radius: 20px; font-weight: 900; font-size: 12px; letter-spacing: 2px; z-index: 10; }
.frame-bubble::after { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); border-width: 8px 8px 0 8px; border-style: solid; border-color: #010508 transparent transparent transparent; }
.frame-badge { border: 4px solid #010508; padding: 16px; border-radius: 12px; margin-bottom: 20px; }
.frame-badge::after { content: 'ESCANÉAME'; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); background: #010508; color: #ffffff; padding: 6px 20px; border-radius: 20px; font-weight: 900; font-size: 12px; letter-spacing: 2px; }
.frame-dashed { border: 4px dashed #010508; padding: 16px; border-radius: 16px; margin-bottom: 20px; }
.frame-dashed::after { content: 'ESCANÉAME'; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); background: #010508; color: #ffffff; padding: 6px 20px; border-radius: 4px; font-weight: 900; font-size: 12px; letter-spacing: 2px; }
.frame-script { padding: 16px 16px 40px 16px; }
.frame-script::after { content: 'ESCANÉAME'; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #010508; font-family: 'Brush Script MT', cursive, sans-serif; font-weight: bold; font-size: 28px; font-style: italic; }

.accordion-content { transition: max-height 0.3s ease-in-out, padding 0.3s ease; }