.bibi-rec {
	--bibi-bg: #eef0f3;
	--bibi-card: #ffffff;
	--bibi-ink: #1e2a4a;
	--bibi-muted: #6b7280;
	--bibi-teal: #14b8a6;
	background: var(--bibi-bg);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--bibi-ink);
	box-sizing: border-box;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 40px 0 60px;
	min-height: 60vh;
}
.bibi-rec * { box-sizing: border-box; }

.bibi-rec-inner { max-width: 460px; margin: 0 auto; padding: 0 20px; }

.bibi-rec-card {
	background: var(--bibi-card);
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
	text-align: center;
}
.bibi-rec-card h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.bibi-rec-empresa { font-size: 14px; margin: 0 0 6px; color: var(--bibi-ink); }
.bibi-rec-subtitle { color: var(--bibi-muted); font-size: 14px; margin: 0 0 20px; }

.bibi-rec-card label { display: block; text-align: left; font-size: 13px; color: var(--bibi-muted); margin-bottom: 6px; }
.bibi-rec-card input[type="number"],
.bibi-rec-card input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	font-size: 18px;
	margin-bottom: 16px;
}

.bibi-rec-btn {
	width: 100%;
	background: var(--bibi-ink);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}
.bibi-rec-btn:hover { background: #111827; color: #fff; }
.bibi-rec-btn:disabled { opacity: .6; cursor: default; }
.bibi-rec-btn-sm { width: auto; padding: 10px 16px; font-size: 13px; }

.bibi-rec-link {
	background: none;
	border: none;
	color: var(--bibi-muted);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	margin-top: 16px;
}

.bibi-rec-alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; text-align: left; }
.bibi-rec-alert-warning { background: #fff7ed; color: #9a5b13; border: 1px solid #fde3c4; }
.bibi-rec-alert-error { background: #fef2f2; color: #b32d2e; border: 1px solid #fbd5d5; }

.bibi-rec-qr-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
#bibi-rec-qrcode { padding: 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }

.bibi-rec-valor-label { font-size: 15px; margin: 0 0 16px; }

.bibi-rec-copia { display: flex; gap: 8px; margin-bottom: 20px; }
.bibi-rec-copia input { margin-bottom: 0; font-size: 12px; color: var(--bibi-muted); }

.bibi-rec-status { font-size: 14px; color: var(--bibi-muted); display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
.bibi-rec-status.is-success { color: #1a9c6b; font-weight: 600; }
.bibi-rec-status.is-error { color: #b32d2e; font-weight: 600; }

.bibi-rec-spinner {
	width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid #e5e7eb;
	border-top-color: var(--bibi-teal);
	animation: bibi-rec-spin 0.8s linear infinite;
	display: inline-block;
}
@keyframes bibi-rec-spin { to { transform: rotate(360deg); } }

.bibi-rec-check {
	width: 56px; height: 56px; border-radius: 50%;
	background: #ecfdf5; color: #1a9c6b;
	font-size: 28px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 16px;
}
.bibi-rec-saldo { font-size: 14px; color: var(--bibi-muted); margin-bottom: 20px; }

.bibi-rec-remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bibi-muted); }
.bibi-rec-remember label { display: flex; align-items: center; gap: 6px; }

.bibi-rec-center { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
.bibi-rec-login-card {
	background: var(--bibi-card);
	border-radius: 20px;
	padding: 40px;
	max-width: 380px;
	width: 100%;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
	text-align: center;
}
.bibi-rec-login-card form { text-align: left; margin-top: 20px; }

.bibi-rec-logout {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
	color: var(--bibi-muted);
	text-decoration: underline;
}