/* ==========================================================================
   Componentes — Botones, Cards, Badges, Forms
   ========================================================================== */

/* ============== BUTTONS ============== */
.bn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: capitalize;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--dur) var(--ease-out);
	white-space: nowrap;
	text-decoration: none;
	min-height: 44px; /* a11y touch target */
}

.bn-btn--primary {
	background: var(--grad-em);
	color: var(--text-on-em);
	box-shadow: var(--glow-em);
}
.bn-btn--primary:hover, .bn-btn--primary:focus {
	transform: translateY(-2px);
	box-shadow: var(--glow-em-lg);
	color: var(--text-on-em);
}

.bn-btn--outline {
	background: transparent;
	color: var(--em-400);
	border-color: var(--border-em);
}
.bn-btn--outline:hover, .bn-btn--outline:focus {
	background: rgba(4, 120, 87, 0.10);
	color: var(--em-300);
	border-color: var(--em-500);
	box-shadow: var(--glow-em);
}

.bn-btn--ghost {
	background: transparent;
	color: var(--text-2);
}
.bn-btn--ghost:hover { color: var(--em-400); background: rgba(255,255,255,0.04); }

.bn-btn--whatsapp {
	background: #25D366;
	color: #fff;
}
.bn-btn--whatsapp:hover { background: #1ebd5a; color: #fff; transform: translateY(-2px); }

.bn-btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-base); min-height: 52px; }
.bn-btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); min-height: 36px; }
.bn-btn--block { width: 100%; }


/* ============== CARDS ============== */
.bn-card {
	position: relative;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	transition: all var(--dur) var(--ease-out);
	overflow: hidden;
}
.bn-card:hover {
	transform: translateY(-4px);
	border-color: var(--border-em);
	box-shadow: var(--shadow), 0 0 24px rgba(4, 120, 87, 0.15);
}

.bn-card--accent::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--em-700);
}

.bn-card__icon {
	width: 48px; height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-4);
	border-radius: var(--radius);
	background: linear-gradient(135deg, rgba(4,120,87,0.18) 0%, rgba(52,211,153,0.10) 100%);
	color: var(--em-400);
	box-shadow: inset 0 0 16px rgba(4,120,87,0.10);
}
.bn-card__icon svg { width: 24px; height: 24px; }

.bn-card__title {
	font-size: var(--fs-md);
	font-weight: 600;
	margin-bottom: var(--space-2);
	color: var(--text);
}

.bn-card__desc {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	line-height: var(--lh-snug);
	margin: 0;
}


/* ============== GRID ============== */
.bn-grid { display: grid; gap: var(--space-6); }
.bn-grid--2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.bn-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bn-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }


/* ============== BADGES ============== */
.bn-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 4px var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: var(--radius-pill);
	background: rgba(4, 120, 87, 0.15);
	color: var(--em-300);
	border: 1px solid var(--border-em);
}
.bn-badge--alert {
	background: rgba(255, 107, 107, 0.12);
	color: var(--state-alert);
	border-color: rgba(255, 107, 107, 0.40);
}
.bn-badge--warn {
	background: rgba(255, 176, 32, 0.12);
	color: var(--state-warn);
	border-color: rgba(255, 176, 32, 0.40);
}


/* ============== FORMS ============== */
.bn-input, .bn-textarea, .bn-select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	background: var(--bg-elevated);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	transition: all var(--dur);
	min-height: 44px;
}
.bn-input:focus, .bn-textarea:focus, .bn-select:focus {
	outline: none;
	border-color: var(--em-500);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.bn-textarea { min-height: 120px; resize: vertical; }
.bn-label {
	display: block;
	margin-bottom: var(--space-2);
	font-weight: 500;
	font-size: var(--fs-sm);
	color: var(--text-2);
}


/* ============== STATS / NÚMEROS ============== */
.bn-stat__num {
	font-family: var(--font-numbers);
	font-weight: 600;
	font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
	line-height: 1;
	background: linear-gradient(135deg, #FFFFFF 0%, var(--em-400) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: var(--space-1);
}
.bn-stat__label {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-muted);
}


/* ============== WHATSAPP FLOATING ============== */
.bn-wa-float {
	position: fixed;
	bottom: var(--space-6);
	right: var(--space-6);
	z-index: var(--z-sticky);
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
	transition: transform var(--dur);
}
.bn-wa-float:hover { transform: scale(1.10); color: #fff; }
.bn-wa-float svg { width: 28px; height: 28px; }
@keyframes bn-pulse-ring {
	0% { transform: scale(1); opacity: 0.5; }
	100% { transform: scale(1.6); opacity: 0; }
}
.bn-wa-float::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #25D366;
	animation: bn-pulse-ring 1.8s ease-out infinite;
}