/* Bayzell Bite — /acceso (18.7.0). Branded login + 2FA steps. */
:root {
	--bza-ground: #F4F1EE;
	--bza-card: #FFFFFF;
	--bza-line: #E4DED8;
	--bza-field: #FBFAF9;
	--bza-field-line: #D9D2CB;
	--bza-ink: #2A2828;
	--bza-ink-2: #4A4440;
	--bza-dim: #6B6460;
	--bza-soft: #F1ECE7;
	--bza-brand: #F89831;
	--bza-brand-dark: #E88720;
	--bza-err-bg: #FCEDEA;
	--bza-err-line: #F2C9C1;
	--bza-err-ink: #A33A2A;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.bza {
	min-height: 100vh;
	background: var(--bza-ground);
	color: var(--bza-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.bza-main {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 32px 16px 24px;
}
.bza-logo { max-width: 180px; max-height: 72px; width: auto; height: auto; }
.bza-logo--bite { max-height: 44px; }
.bza-card {
	width: min(440px, 100%);
	background: var(--bza-card);
	border: 1px solid var(--bza-line);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 10px 30px rgba(42, 40, 40, .06);
}
.bza-card:has(.bza-setup) { width: min(820px, 100%); padding: 28px; }
.bza-card h1 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; }
.bza-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--bza-dim); }
.bza-who {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--bza-soft);
	font-size: 12px;
	color: #5A5450;
}
.bza-form { display: flex; flex-direction: column; gap: 6px; }
.bza-form label { font-size: 13px; font-weight: 600; color: var(--bza-ink-2); margin-top: 8px; }
.bza-form input:not([type="checkbox"]) {
	width: 100%;
	height: 46px;
	padding: 0 13px;
	font-size: 16px;
	background: var(--bza-field);
	color: var(--bza-ink);
	border: 1px solid var(--bza-field-line);
	border-radius: 10px;
	font-family: inherit;
}
.bza-form input:focus, .bza-code:focus { outline: 2px solid var(--bza-brand); outline-offset: 1px; border-color: transparent; }
.bza-pwd { display: flex; gap: 8px; }
.bza-pwd input { flex: 1 1 auto; min-width: 0; }
.bza-form .bza-check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 400;
	font-size: 14px;
	margin-top: 4px;
}
.bza-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--bza-ink); }
.bza-form input.bza-code, .bza-code {
	height: 62px;
	font-size: 28px;
	letter-spacing: 10px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.bza-btn, .bza-btn-soft, .bza-btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}
.bza-btn {
	width: 100%;
	height: 50px;
	margin-top: 10px;
	background: var(--bza-brand);
	color: var(--bza-ink);
	font-size: 16px;
}
.bza-btn:hover { background: var(--bza-brand-dark); }
.bza-btn:disabled { opacity: .6; cursor: default; }
.bza-btn-soft {
	min-height: 40px;
	padding: 0 12px;
	background: var(--bza-soft);
	color: var(--bza-ink);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.bza-pwd .bza-btn-soft { height: 46px; }
.bza-btn-dark {
	height: 48px;
	background: var(--bza-ink);
	color: #FFFFFF;
	font-size: 15px;
}
.bza-btn:focus-visible, .bza-btn-soft:focus-visible, .bza-btn-dark:focus-visible, .bza-out:focus-visible {
	outline: 2px solid var(--bza-ink);
	outline-offset: 2px;
}
.bza-err {
	margin-top: 10px;
	padding: 10px 12px;
	background: var(--bza-err-bg);
	border: 1px solid var(--bza-err-line);
	border-radius: 9px;
	color: var(--bza-err-ink);
	font-size: 13px;
	line-height: 1.45;
}
.bza-err a { color: var(--bza-err-ink); font-weight: 700; }
.bza-foot { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--bza-dim); text-align: center; }
.bza-out {
	display: block;
	width: max-content;
	margin: 8px auto 0;
	padding: 12px;
	font-size: 13px;
	color: var(--bza-dim);
}
.bza-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bza-small { font-size: 12.5px; color: var(--bza-dim); line-height: 1.45; }
.bza-setup {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "apps add" "code add";
	gap: 20px 28px;
}
.bza-step { display: flex; flex-direction: column; gap: 10px; }
.bza-step:nth-child(1) { grid-area: apps; }
.bza-step:nth-child(2) { grid-area: add; }
.bza-step:nth-child(3) { grid-area: code; }
.bza-step h2 { margin: 0; font-size: 15px; }
.bza-step .bza-form label { margin-top: 0; }
.bza-app {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--bza-line);
	border-radius: 12px;
}
.bza-app-name { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
.bza-qrrow { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bza-qr {
	padding: 14px;
	background: #FFFFFF;
	border: 1px solid var(--bza-line);
	border-radius: 12px;
	line-height: 0;
}
.bza-key { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; width: 100%; }
.bza-key code {
	display: block;
	width: 100%;
	padding: 10px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 13px;
	letter-spacing: 1px;
	background: var(--bza-field);
	border: 1px dashed var(--bza-field-line);
	border-radius: 8px;
	word-break: normal;
	overflow-wrap: break-word;
}
.bza-touch { display: none; }
/* 18.7.1 — Cloudflare Turnstile */
.bza-ts { margin-top: 8px; min-height: 65px; }

.bza-tip {
	margin-top: 18px;
	padding: 12px;
	background: #F6F3EF;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bza-ink-2);
}
.bza-powered { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--bza-dim); }
.bza-powered img { height: 18px; width: auto; }

/* Phones and tablets: the app is likely on THIS device. */
@media (pointer: coarse), (max-width: 720px) {
	.bza-touch { display: inline-flex; }
}
@media (max-width: 720px) {
	.bza-card:has(.bza-setup) { padding: 22px; }
	.bza-setup { grid-template-columns: minmax(0, 1fr); grid-template-areas: "apps" "add" "code"; }
	.bza-qrrow { flex-direction: row; align-items: center; }
	.bza-app { flex-wrap: wrap; }
	.bza-app-name { flex: 1 0 100%; }
	.bza-app .bza-btn-soft { flex: 1 1 0; }
	.bza-key { align-items: flex-start; text-align: left; }
}
@media (max-width: 380px) {
	.bza-qrrow { flex-direction: column; }
	.bza-key { align-items: center; text-align: center; }
}