/* =========================
   SCROLL GLOBAL DA PÁGINA
   ========================= */

/* Firefox */
html {
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.35) transparent;
}

/* Webkit: Chrome, Edge, Safari */
html::-webkit-scrollbar {
	width: 10px;
}

html::-webkit-scrollbar-track {
	background: transparent;
}

html::-webkit-scrollbar-thumb {
	background-color: rgba(255,255,255,.35);
	border-radius: 10px;
	transition: background-color .2s;
}

html::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255,255,255,.6);
}

body.canvas-open {
	overflow: hidden !important;
}

#btnInstalarPwa {
	display: none;
}

body.pwa-installable #btnInstalarPwa {
	display: inline-block;
}

/* ===== Scroll moderno e discreto ===== */
/* ===== Scroll moderno e discreto ===== */
.custom-scroll {
	overflow-y: auto !important;
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: rgba(255,255,255,.25) transparent;
}

	/* Webkit (Chrome, Edge, Safari) */
	.custom-scroll::-webkit-scrollbar {
		width: 8px;
	}

	.custom-scroll::-webkit-scrollbar-track {
		background: transparent;
	}

	.custom-scroll::-webkit-scrollbar-thumb {
		background-color: rgba(255,255,255,.25);
		border-radius: 10px;
		transition: background-color .2s;
	}

		.custom-scroll::-webkit-scrollbar-thumb:hover {
			background-color: rgba(255,255,255,.45);
		}

:root {
	/* Gradiente institucional Nina */
	--nina-gradient: linear-gradient(135deg, #00b25c 0%, #5b2d8b 100%);
	/* Dark azulado premium (Color Admin style) */
	--nina-bg-overlay-top: #243140;
	--nina-bg-overlay-bottom: #1b2530;
	--nina-muted: #9aa4af;
	--nina-white: #ffffff;
}

/* Corrige autofill no Chrome / Edge */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #1e1e1e inset !important;
	box-shadow: 0 0 0px 1000px #1e1e1e inset !important;
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff !important;
	transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill {
	border-color: rgba(78, 223, 161, 0.6) !important;
}


/* ===============================
   LOADER OVERLAY
   =============================== */
.nina-loader {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* fundo translúcido, não escuro */
	background: rgba(15, 20, 28, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* ===============================
   PISTA / MOVIMENTO
   =============================== */
.runner-track {
	width: 140px;
	height: 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
	position: relative;
	margin-bottom: 14px;
}

/* “corredor” */
.runner-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, #00b25c 0%, #5b2d8b 100%);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	box-shadow: 0 0 18px rgba(91, 45, 139, 0.65), 0 0 8px rgba(0, 178, 92, 0.55);
	animation: runnerMove 1.1s ease-in-out infinite;
}

/* ===============================
   TEXTO
   =============================== */
.runner-text {
	margin-top: 6px;
	font-size: 13px;
	letter-spacing: 0.6px;
	color: #cfd6dd;
	opacity: 0.9;
}

/* ===============================
   ANIMAÇÃO
   =============================== */
@keyframes runnerMove {
	0% {
		left: -30px;
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	100% {
		left: 140px;
		opacity: 0;
	}
}

.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	height: 78px;
	width: 100%;
	max-width: 960px;
	margin: 10px auto;
	padding: 0 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 🔥 FUNDO IGUAL AO DROPDOWN */
	background: linear-gradient( 180deg, var(--nina-bg-overlay-top), var(--nina-bg-overlay-bottom) );
	border-radius: 40px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.045);
}


/* =====================================================
   LINK BASE (ÁREA DE TOQUE)
   ===================================================== */
.bottom-link {
	position: relative;
	flex: 1;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 28px;
	text-decoration: none;
	color: var(--nina-muted);
	transition: color 0.25s ease;
}

	/* ÍCONE */
	.bottom-link i {
		font-size: 20px;
		position: relative;
		z-index: 3;
	}

	/* TAMANHO PADRÃO DOS ÍCONES */
	.bottom-link iconify-icon {
		font-size: 28px; /* tamanho real visível */
		color: currentColor;
		position: relative;
		z-index: 3;
		transition: transform 0.25s ease;
	}

	/* ÍCONE ATIVO — LIGEIRAMENTE MAIOR */
	.bottom-link.active iconify-icon {
		font-size: 30px;
	}

	/* FEEDBACK PREMIUM */
	.bottom-link:hover iconify-icon {
		transform: scale(1.06);
	}


	.bottom-link:hover iconify-icon {
	transform: scale(1.05);
}

.icon-shoe {
	width: 22px;
	height: 22px;
	fill: currentColor;
	position: relative;
	z-index: 3;
}


	/* =====================================================
   TOOLTIP (LABEL APENAS NO HOVER)
   ===================================================== */
	.bottom-link span {
		position: absolute;
		bottom: 72px;
		padding: 6px 12px;
		border-radius: 14px;
		font-size: 12px;
		font-weight: 500;
		white-space: nowrap;
		background: rgba(15, 15, 15, 0.92);
		color: var(--nina-white);
		opacity: 0;
		transform: translateY(6px) scale(0.95);
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.bottom-link:hover span {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	/* =====================================================
   HOVER (SEM INVADIR O ATIVO)
   ===================================================== */
	.bottom-link:hover {
		color: var(--nina-white);
	}

	/* Glow suave no hover */
	.bottom-link::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 28px;
		background: var(--nina-gradient);
		filter: blur(14px);
		opacity: 0;
		z-index: 1;
		transition: opacity 0.35s ease;
	}

	.bottom-link:hover::before {
		opacity: 0.22;
	}

	/* =====================================================
   ACTIVE — BOLA PERFEITA (EXATAMENTE COMO O ANEXO 1)
   ===================================================== */
	.bottom-link.active {
		color: var(--nina-white);
	}

		/* BOLA */
		.bottom-link.active::after {
			content: "";
			position: absolute;
			width: 56px;
			height: 56px;
			border-radius: 50%;
			background: var(--nina-gradient);
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
			z-index: 2;
		}

		/* Remove glow lateral quando ativo */
		.bottom-link.active::before {
			opacity: 0;
		}

/* =====================================================
   RESPONSIVO
   ===================================================== */
@media (max-width: 768px) {
	.bottom-nav {
		width: calc(100% - 30px);
	}
}

/* ===============================
   CARD BASE (APPLE STYLE)
   =============================== */
.evento-card-app {
	display: flex;
	align-items: center;
	background: #2a2a2a;
	border-radius: 18px;
	padding: 14px;
	margin-bottom: 14px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid rgba(255, 255, 255, 0.045);
}

	.evento-card-app:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
	}

/* ===============================
   AVATAR
   =============================== */
.evento-avatar-app {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 14px;
	flex-shrink: 0;
}

/* ===============================
   LINHA VERTICAL NINA
   =============================== */
.evento-linha-nina {
	width: 3px;
	height: 44px;
	margin: 0 14px;
	border-radius: 2px;
	background: linear-gradient(180deg, #00b25c, #5b2d8b);
}

/* ===============================
   TEXTO
   =============================== */
.evento-info {
	flex: 1;
	overflow: hidden;
}

.evento-title {
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.evento-subtitle {
	font-size: 13px;
	color: #b0b0b0;
	margin-top: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ===============================
   BADGE STATUS
   =============================== */
.evento-status-badge {
	padding: 6px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	margin-left: 10px;
}

.evento-card {
	background: linear-gradient( 180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08) );
	border-radius: 16px;
	padding: 14px 16px;
	margin-bottom: 14px;
	/* separação elegante */
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.035);
	transition: transform .25s ease, box-shadow .25s ease;
}

	.evento-card:hover {
		transform: translateY(-1px);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 26px rgba(0,0,0,0.45);
	}

.linha-evento {
	width: 3px;
	border-radius: 2px;
	background: var(--nina-gradient);
	margin-right: 14px;
	box-shadow: 0 0 10px rgba(91,45,139,0.35);
}
.evento-status {
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 14px rgba(0,0,0,0.35);
}



/* Status cores */
.status-active {
	background: rgba(0, 178, 92, 0.15);
	color: #00b25c;
}

.status-warning {
	background: rgba(255, 193, 7, 0.18);
	color: #ffc107;
}

.status-closed {
	background: rgba(180, 180, 180, 0.2);
	color: #c0c0c0;
}

:root {
	--nina-gradient: linear-gradient(135deg,#00b25c,#5b2d8b);
}

/* container */
.quick-access {
	/*margin: 16px 0 12px;*/
	margin: 0px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.quick-access-scroll {
	display: flex;
	gap: 4px;
	/*padding: 12px 8px 14px;*/
	padding: 0px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

	.quick-access-scroll::-webkit-scrollbar {
		display: none;
	}

@media (min-width:992px) {
	.quick-access-scroll {
		justify-content: center;
	}
}

/* item */
.quick-access-item {
	min-width: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	scroll-snap-align: start;
	cursor: pointer;
	user-select: none;
}

/* circle hollow */
.quick-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at top,#1f2a35,#121a22 70%);
	box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}

	.quick-icon::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		padding: 1.6px; /* espessura da borda */
		background: var(--nina-gradient);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		z-index: 0;
	}

	/* DUOTONE ICON (MAIOR e SEM SUMIR) */
	.quick-icon iconify-icon {
		position: relative;
		z-index: 2;
		width: 32px; /* <<< AQUI: tamanho real */
		height: 32px; /* <<< AQUI: tamanho real */
		font-size: 32px; /* reforço p/ alguns browsers */
		color: #fff;
		opacity: .96;
		display: block;
		line-height: 1;
	}

/* label */
.labelTitle {
	font-size: 11px;
	font-weight: 500;
	color: #b8c1cc;
	letter-spacing: .3px;
	text-align: center;
	white-space: nowrap;
}

/* hover */
.quick-access-item:hover .quick-icon {
	transform: translateY(3px);
	/*box-shadow: 0 16px 32px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);*/
	transition: all .25s ease;
}

.quick-access-item:hover .labelTitle {
	color: #fff;
}

/* ===============================
   NINA – COMPACT EVENT LIST
   =============================== */

.nina-event-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ROW */
.nina-event-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: #2b2b2b;
	border-radius: 12px;
	cursor: pointer;
	transition: background .2s ease;
}

	.nina-event-row:hover {
		background: linear-gradient( 180deg, var(--nina-bg-overlay-top), var(--nina-bg-overlay-bottom) );
		
	}

/* AVATAR */
.nina-event-avatar {
	width:  52px;
	height: 52px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
}

/* MAIN INFO */
.nina-event-main {
	flex: 1;
	min-width: 0;
}

#mainHome {
	padding-bottom: 100px;
}

/* NAME */
.nina-event-name {
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* DATE */
.nina-event-date {
	font-size: 12px;
	color: #b0b0b0;
	/*margin-top: 2px;*/
}

/* STATUS */
.nina-event-status {
	font-size: 11px;
	padding: 4px 8px;
	border-radius: 999px;
	white-space: nowrap;
	font-weight: 500;
}

.nina-status-active {
	background: rgba(0,178,92,.15);
	color: #2ecc71;
}

.nina-status-warning {
	background: rgba(255,193,7,.15);
	color: #ffc107;
}

.nina-status-closed {
	background: rgba(200,200,200,.12);
	color: #aaaaaa;
}


/* ===============================
   ERROR OVERLAY – FULLSCREEN
   =============================== */


#errorOverlay {
	display: none;
}

#errorOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(15, 20, 25, 0.92);
	backdrop-filter: blur(6px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

	/* CARD */
	#errorOverlay .error-box {
		background: linear-gradient(180deg, #1e2933, #141c25);
		border-radius: 18px;
		padding: 28px 24px;
		max-width: 360px;
		width: 100%;
		text-align: center;
		box-shadow: 0 24px 60px rgba(0,0,0,0.65);
		border: 1px solid rgba(255,255,255,0.06);
		animation: errorPop 0.35s ease;
	}

	/* ÍCONE */
	#errorOverlay .error-icon {
		font-size: 36px;
		color: #ff5f5f;
		margin-bottom: 14px;
	}

	/* TÍTULO */
	#errorOverlay h4 {
		color: #ffffff;
		font-size: 18px;
		margin-bottom: 10px;
	}

	/* TEXTO */
	#errorOverlay p {
		font-size: 13px;
		color: #b9c3cf;
		line-height: 1.5;
		margin-bottom: 20px;
	}

	/* BOTÃO */
	#errorOverlay button {
		background: linear-gradient(135deg, #00b25c, #5b2d8b);
		border: none;
		border-radius: 12px;
		color: #fff;
		font-size: 14px;
		padding: 12px 22px;
		cursor: pointer;
		width: 100%;
	}

		#errorOverlay button:hover {
			opacity: 0.9;
		}

/* ANIMAÇÃO SUAVE */
@keyframes errorPop {
	from {
		transform: scale(0.92);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* ===============================
   APP OVERLAY – UNIVERSAL
   =============================== */
.app-overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(12, 16, 20, 0.92);
	backdrop-filter: blur(6px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

/* BOX */
.overlay-box {
	background: linear-gradient(180deg, #1e2933, #141c25);
	border-radius: 18px;
	padding: 28px 24px;
	max-width: 360px;
	width: 100%;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0,0,0,0.65);
	border: 1px solid rgba(255,255,255,0.06);
	animation: overlayPop 0.35s ease;
}

/* ICON */
.overlay-icon {
	font-size: 36px;
	margin-bottom: 14px;
}

/* TITLE */
.overlay-title {
	color: #ffffff;
	font-size: 18px;
	margin-bottom: 10px;
}

/* MESSAGE */
.overlay-message {
	font-size: 13px;
	color: #b9c3cf;
	line-height: 1.5;
	margin-bottom: 22px;
}

/* ACTIONS */
.overlay-actions {
	display: flex;
	gap: 10px;
}

	/* BUTTONS */
	.overlay-actions button {
		flex: 1;
		border: none;
		border-radius: 12px;
		font-size: 14px;
		padding: 12px;
		cursor: pointer;
		color: #fff;
	}

/* PRIMARY */
.btn-primary {
	background: linear-gradient(135deg, #00b25c, #5b2d8b);
}

/* SECONDARY */
.btn-secondary {
	background: #2a3440;
	color: #cdd6e0;
}

/* TYPES */
.overlay-error .overlay-icon {
	color: #ff5f5f;
}

.overlay-success .overlay-icon {
	color: #00d084;
}

.overlay-warning .overlay-icon {
	color: #ffb020;
}

.overlay-info .overlay-icon {
	color: #4da3ff;
}

.overlay-confirm .overlay-icon {
	color: #8b5cf6;
}

/* ANIMATION */
@keyframes overlayPop {
	from {
		transform: scale(0.92);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* UTIL */
.d-none {
	display: none;
}

/* WhatsApp Floating Button */
.whatsapp-float {
	position: fixed;
	right: 22px;
	bottom: 90px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--nina-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 26px;
	z-index: 9999;
	box-shadow: 0 12px 30px rgba(0,0,0,.45);
	transition: transform .25s ease;
	text-decoration: none;
}

	.whatsapp-float:hover {
		transform: scale(1.08);
		color: #fff;
	}

/* ===============================
   FOTO AJUSTADA – NINA
   =============================== */

.nina-photo-wrapper-sm {
	height: 320px;
	background: linear-gradient(135deg, rgba(0,178,92,0.25), rgba(91,45,139,0.25));
	display: flex;
	align-items: center;
	justify-content: center;
}

.nina-photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

@media (max-width: 991px) {
	.nina-photo-wrapper-sm {
		height: 240px;
	}
}

/* ===============================
   CONQUISTAS
   =============================== */

.nina-achievements i {
	font-size: 1.1rem;
}


/* ===============================
   CTA BOORAA NINA (GRADIENTE OFICIAL)
   =============================== */

.btn-nina-gradient {
	background: linear-gradient(135deg, #2ED47A 0%, #1BC5BD 45%, #5F6FFF 100%);
	color: #ffffff !important;
	border: none;
	box-shadow: 0 8px 24px rgba(46, 212, 122, 0.35);
	transition: all 0.25s ease;
}

	.btn-nina-gradient:hover {
		transform: translateY(-1px);
		box-shadow: 0 12px 32px rgba(95, 111, 255, 0.45);
		filter: brightness(1.05);
	}

	.btn-nina-gradient:active {
		transform: translateY(0);
		box-shadow: 0 6px 18px rgba(46, 212, 122, 0.35);
	}


.menu-nina {
	background: #f4f6f8;
	border-radius: 24px;
	padding: 16px;
}

.menu-nina-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #ffffff;
	border-radius: 20px;
	padding: 14px 16px;
	box-shadow: 0 8px 24px rgba(0,0,0,.06);
	margin-bottom: 14px;
}

.menu-nina-user {
	display: flex;
	align-items: center;
	gap: 12px;
}
/**/
.menu-nina-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg,#1fd1a5,#5b6cff);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
}


	/*.menu-nina-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}*/

	.menu-nina-avatar span {
		text-transform: uppercase;
	}

.menu-nina-user {
	display: flex;
	align-items: center;
	gap: 12px;
}

.menu-nina-user-info {
	line-height: 1.2;
}

.menu-nina-actions a {
	font-size: 14px;
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid #ccc;
	text-decoration: none;
	margin-left: 6px;
}

.btn-nina {
	background: linear-gradient(135deg,#1fd1a5,#5b6cff);
	color: #fff !important;
	border: none;
}

.menu-nina-list {
	margin-top: 12px;
}

.menu-nina-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 12px;
	border-bottom: 1px solid #e2e5e9;
	color: #2b2f33;
	text-decoration: none;
	font-size: 15px;
}

	.menu-nina-item i {
		width: 22px;
		text-align: center;
		opacity: .7;
	}

	.menu-nina-item:hover {
		background: linear-gradient(135deg, rgba(31,209,165,.08), rgba(91,108,255,.08));
		border-radius: 14px;
	}

	.menu-nina-item:last-child {
		border-bottom: none;
	}
/* ===============================
   MENU NINA – DARK MODE
================================ */

.menu-nina {
	background: linear-gradient(180deg, #1e242b 0%, #1a2026 100%);
	border-radius: 26px;
	padding: 16px;
	box-shadow: 0 30px 60px rgba(0,0,0,.45);
}

/* HEADER */
.menu-nina-header {
	background: rgba(255,255,255,.04);
	border-radius: 22px;
	padding: 14px 16px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.menu-nina-user div:first-child {
	color: #fff;
}

.menu-nina-user small {
	color: rgba(255,255,255,.55);
}

/* AVATAR */
/*.menu-nina-avatar {
	background: linear-gradient(135deg, #1fd1a5, #5b6cff);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(31,209,165,.15);
}
*/
/* AÇÕES */
.menu-nina-actions a {
	background: transparent;
	color: rgba(255,255,255,.75);
	border: 1px solid rgba(255,255,255,.15);
	transition: all .25s ease;
}

	.menu-nina-actions a:hover {
		color: #fff;
		border-color: rgba(255,255,255,.35);
	}

/* BOTÃO NINA */
.btn-nina {
	background: linear-gradient(135deg, #1fd1a5, #5b6cff);
	color: #fff !important;
	box-shadow: 0 10px 30px rgba(31,209,165,.35);
}

/* LISTA */
.menu-nina-list {
	margin-top: 12px;
}

/* ITEM */
.menu-nina-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 14px;
	color: rgba(255,255,255,.85);
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 15px;
	transition: all .25s ease;
}

	.menu-nina-item i {
		color: rgba(255,255,255,.55);
		width: 22px;
		text-align: center;
	}

	/* HOVER */
	.menu-nina-item:hover {
		background: linear-gradient( 135deg, rgba(31,209,165,.15), rgba(91,108,255,.12) );
		border-radius: 16px;
		color: #fff;
	}

		.menu-nina-item:hover i {
			color: #1fd1a5;
		}

	/* REMOVE LINHA FINAL */
	.menu-nina-item:last-child {
		border-bottom: none;
	}

/* ===============================
   MENU NINA – MOBILE FIX
================================ */

@media (max-width: 576px) {

	.menu-nina-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 12px;
		padding: 16px;
	}

	.menu-nina-user {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

/*	.menu-nina-avatar {
		width: 56px;
		height: 56px;
		font-size: 18px;
	}*/

	.menu-nina-user div:first-child {
		font-size: 15px;
	}

	.menu-nina-user small {
		font-size: 13px;
	}

	/* BOTÕES LOGIN / REGISTRO */
	.menu-nina-actions {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 10px;
		margin-top: 6px;
	}

		.menu-nina-actions a {
			width: 100%;
			justify-content: center;
			padding: 10px 0;
			border-radius: 999px;
		}

	/* LISTA */
	.menu-nina-item {
		padding: 14px 12px;
		font-size: 14px;
	}

		.menu-nina-item i {
			font-size: 16px;
		}
}

/* Offcanvas ocupa toda a altura disponível */
.offcanvas-full-content {
	height: 100vh;
}

/* Área onde o conteúdo AJAX entra */
#contentOffCanvas {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.canvas-full-page {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

#contentOffCanvas .login {
	min-height: 100%;
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#contentOffCanvas .login-container {
	width: 100%;
	padding: 30px !important;
	max-width: 420px; /* mantém estética */
	margin: auto;
}

.wizard-step {
	display: none;
}

	.wizard-step.active {
		display: block;
	}

.wizard-bottom-spacer {
	height: 98px; /* ajuste fino: 32px / 40px / 48px */
}



.form-select {
	background-color: rgba(255,255,255,0.06);
}

.form-select:focus {
	border-color: #1fd1a5;
	box-shadow: 0 0 0 3px rgba(31,209,165,.15);
}

/* Padroniza SELECT no visual Nina */
.form-select {
	height: 45px;
	background-color: #3a3f45;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 10px;
	padding: 0.75rem 2.5rem 0.75rem 1rem;
	box-shadow: none;
}

	/* Placeholder visual */
	.form-select option[value=""] {
		color: rgba(255,255,255,0.6);
	}

	/* Focus igual aos inputs */
	.form-select:focus {
		border-color: #1fd1a5;
		box-shadow: 0 0 0 2px rgba(31,209,165,.15);
		background-color: #3a3f45;
		color: #fff;
	}

/* Remove estilo nativo feio em mobile */
.form-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}




/* AVATAR BASE */
.menu-nina-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	overflow: hidden;
	position: relative;
	box-shadow: 0 0 0 4px rgba(31,209,165,.15);
	background: linear-gradient(135deg, #1fd1a5, #5b6cff);
}

	/* AVATAR COM IMAGEM */
	.menu-nina-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		background: #111;
	}

	/* AVATAR COM INICIAIS */
	.menu-nina-avatar span {
		text-transform: uppercase;
		line-height: 1;
	}




/* ============================
   PERFIL BORA NINA
============================ */

.profile-header {
	display: flex;
	gap: 16px;
	padding: 16px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.profile-avatar {
	position: relative;
	width: 88px;
	height: 88px;
	flex-shrink: 0;
}

	.profile-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
		border: 2px solid #2dd4bf;
	}

.btn-edit-avatar {
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, #22c55e, #06b6d4);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
}

.profile-info h4 {
	font-weight: 600;
}

.profile-info small {
	display: block;
	margin-bottom: 8px;
}

.profile-info {
	flex: 1;
	min-width: 0; /* evita quebra estranha no mobile */
}


/*.profile-stats {
	display: flex;
	gap: 16px;
	font-size: 13px;
}

	.profile-stats div {
		text-align: center;
	}

	.profile-stats b {
		display: block;
		font-size: 15px;
	}*/

/* ============================
   SEÇÕES
============================ */

.profile-section {
	padding: 16px;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

.section-title {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 12px;
	color: rgba(255,255,255,.75);
}

/* ============================
   CAMPOS EDITÁVEIS
============================ */

.editable-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
	margin-bottom: 10px;
}

	.editable-row label {
		color: rgba(255,255,255,.6);
	}

	.editable-row span {
		flex: 1;
		text-align: right;
		color: #fff;
		font-weight: 500;
	}

	.editable-row button {
		background: transparent;
		border: 1px solid rgba(255,255,255,.2);
		color: #fff;
		padding: 4px 10px;
		border-radius: 6px;
		font-size: 12px;
		cursor: pointer;
	}

		.editable-row button:hover {
			background: rgba(255,255,255,.08);
		}

/* ============================
   BIO
============================ */

.bio-box {
	padding: 12px;
	border-radius: 10px;
	background: rgba(255,255,255,.04);
	font-size: 14px;
	cursor: pointer;
}

	.bio-box:hover {
		background: rgba(255,255,255,.08);
	}

/* ============================
   CONQUISTAS
============================ */

.badges-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.badge-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border-radius: 10px;
	background: rgba(255,255,255,.04);
	cursor: pointer;
	text-align: center;
	font-size: 12px;
}

	.badge-card i {
		font-size: 20px;
		margin-bottom: 6px;
	}

	.badge-card.add {
		color: #22c55e;
		border: 1px dashed rgba(255,255,255,.2);
	}

/* ============================
   EQUIPE
============================ */

.team-card {
	padding: 12px;
	border-radius: 10px;
	background: rgba(255,255,255,.04);
	cursor: pointer;
	font-size: 14px;
}

	.team-card:hover {
		background: rgba(255,255,255,.08);
	}

/* ============================
   FOTOS
============================ */

/*.photos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.photo-item {
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255,255,255,.05);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

	.photo-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.photo-item.add {
		border: 1px dashed rgba(255,255,255,.2);
		color: #22c55e;
		font-size: 20px;
	}

		.photo-item.add:hover {
			background: #f0f0f0;
		}

.btn-remove-photo {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

	.btn-remove-photo:hover {
		background: rgba(0, 0, 0, 0.8);
	}*/

/* ============================
   FOTOS – FEED USUÁRIO
============================ */

.photos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.photo-item {
	position: relative; /* 🔑 essencial */
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255,255,255,.05);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

	.photo-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.photo-item.add {
		border: 1px dashed rgba(255,255,255,.2);
		color: #22c55e;
		font-size: 20px;
	}

		.photo-item.add:hover {
			background: rgba(255,255,255,.08);
		}

/* 🔥 BOTÃO EXCLUSIVO DO FEED */
.btn-remove-feed-photo {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
}

	.btn-remove-feed-photo:hover {
		background: rgba(0, 0, 0, 0.85);
	}


/* ============================
   REDES SOCIAIS
============================ */

.social-links {
	display: flex;
	gap: 12px;
}

	.social-links button {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		border: none;
		background: rgba(255,255,255,.06);
		color: #fff;
		font-size: 18px;
		cursor: pointer;
	}

		.social-links button:hover {
			background: rgba(255,255,255,.12);
		}

/* ============================
   PRIVACIDADE (SWITCH)
============================ */

.privacy-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
}

.switch {
	position: relative;
	width: 46px;
	height: 24px;
}

	.switch input {
		display: none;
	}

.slider {
	position: absolute;
	inset: 0;
	background: #555;
	border-radius: 24px;
	cursor: pointer;
}

	.slider:before {
		content: "";
		position: absolute;
		width: 18px;
		height: 18px;
		left: 3px;
		top: 3px;
		background: white;
		border-radius: 50%;
		transition: .3s;
	}

.switch input:checked + .slider {
	background: linear-gradient(135deg, #22c55e, #06b6d4);
}

	.switch input:checked + .slider:before {
		transform: translateX(22px);
	}


/* ============================
   SCROLL PERFIL BORA NINA
============================ */

.perfil-scroll {
	height: calc(100vh - 56px); /* 56px = header do offcanvas */
	overflow-y: auto;
	padding-bottom: 32px;
}

/* Scroll suave */
.perfil-scroll {
	scroll-behavior: smooth;
}

	/* Estilo discreto da barra (opcional) */
	.perfil-scroll::-webkit-scrollbar {
		width: 6px;
	}

	.perfil-scroll::-webkit-scrollbar-thumb {
		background: rgba(255,255,255,.15);
		border-radius: 10px;
	}

	.perfil-scroll::-webkit-scrollbar-track {
		background: transparent;
	}


/* ===== GRID PRINCIPAL ===== */
.grid-dual {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

/* ===== CARD CONTAINER ===== */
.dual-box {
	background: linear-gradient( 180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00) );
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	padding: 18px;
	position: relative;
}

/* ===== TÍTULO ===== */
.dual-title {
	font-size: 13px;
	font-weight: 700;
	color: #d2d6db;
	margin-bottom: 14px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ===== GRID DE AÇÃO ===== */
.badges-grid {
	display: flex;
	justify-content: center;
}

/* ===== BOTÃO ADICIONAR ===== */
.badge-card.add {
	width: 120px;
	height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	border: 1.8px dashed rgba(63,212,143,.45);
	background: rgba(63,212,143,0.04);
	cursor: pointer;
	transition: all .25s ease;
}

	/* Ícone */
	.badge-card.add i {
		font-size: 28px;
		color: #3fd48f;
		margin-bottom: 6px;
		transition: transform .25s ease;
	}

	/* Texto */
	.badge-card.add span {
		font-size: 13px;
		font-weight: 600;
		color: #3fd48f;
	}

	/* Hover refinado */
	.badge-card.add:hover {
		background: rgba(63,212,143,0.08);
		border-color: #3fd48f;
		transform: translateY(-2px);
	}

		.badge-card.add:hover i {
			transform: scale(1.15);
		}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
	.grid-dual {
		grid-template-columns: 1fr;
	}
}


#profileStats {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	border-top: 1px solid rgba(255,255,255,0.06);
	padding-top: 12px;
}

	/*#profileStats .stat {
		flex: 1;
		text-align: center;
		position: relative;
		padding: 0 6px;
	}*/
	#profileStats .stat {
		flex: 1;
		text-align: center;
		position: relative;
		padding: 8px 4px;
		border-radius: 10px;
		transition: background .25s ease, transform .2s ease;
		cursor: pointer;
	}

		#profileStats .stat:hover {
			background: rgba(255,255,255,0.04);
			transform: translateY(-1px);
		}

		#profileStats .stat:active {
			transform: scale(0.98);
		}

		#profileStats .stat:not(:last-child)::after {
			content: "";
			position: absolute;
			right: 0;
			top: 20%;
			height: 60%;
			width: 1px;
			background: rgba(255,255,255,0.06);
		}

		#profileStats .stat b {
			display: block;
			font-size: 20px;
			font-weight: 700;
			color: #ffffff;
			line-height: 1.1;
		}

		#profileStats .stat span {
			display: block;
			margin-top: 2px;
			font-size: 12px;
			color: #a0a4ab;
			letter-spacing: .3px;
		}


/* =========================
   OVERLAY
========================= */
/*.nina-canvas-overlay {
	position: fixed;
	inset: 0;
	z-index: 1060;
	background: rgba(0,0,0,.45);
	display: flex;
	justify-content: flex-end;
	pointer-events: auto;
}*/
.nina-canvas-overlay {
	position: fixed;
	inset: 0;
	z-index: 1060;
	display: flex;
	justify-content: flex-end;
	pointer-events: auto;
	/* visual */
	background-color: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(8px) saturate(110%);
	-webkit-backdrop-filter: blur(8px) saturate(110%);
}

/* =========================
   CANVAS
========================= */
.nina-canvas {
	width: 100%;
	max-width: 420px;
	height: 100vh;
	background: linear-gradient(180deg, #1f2329, #181b20);
	display: flex;
	flex-direction: column;
	box-shadow: -12px 0 32px rgba(0,0,0,.45);
	transform: translateX(100%);
	animation: nina-slide-in .32s cubic-bezier(.22,.61,.36,1) forwards;
}

/* =========================
   HEADER (FIXO)
========================= */
.nina-canvas-header {
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	padding: 0 12px;
	border-bottom: 1px solid rgba(255,255,255,.06);
	color: #fff;
}

/* botão back */
/*.nina-btn-back {
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
}

	.nina-btn-back:hover {
		background: rgba(255,255,255,.08);
	}*/

/* botão back – touch target correto */
.nina-btn-back {
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	color: #ffffff;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease;
}

	.nina-btn-back:hover,
	.nina-btn-back:active {
		background: rgba(255,255,255,0.10);
	}

	/* ícone interno */
	.nina-btn-back iconify-icon {
		font-size: 24px;
	}


#ninaCanvasTitle {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

/* =========================
   BODY (ÚNICO SCROLL)
========================= */
.nina-canvas-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px;
	-webkit-overflow-scrolling: touch;
}


.nina-canvas-body {
	
	max-height: calc(100vh - 60px); /* header */
	
}

	.nina-canvas-body::-webkit-scrollbar {
		width: 6px;
	}

	.nina-canvas-body::-webkit-scrollbar-track {
		background: transparent;
	}

	.nina-canvas-body::-webkit-scrollbar-thumb {
		background: rgba(255,255,255,0.25);
		border-radius: 10px;
	}

		.nina-canvas-body::-webkit-scrollbar-thumb:hover {
			background: rgba(255,255,255,0.4);
		}


/* =========================
   FORM PADRÃO NINA
========================= */
.nina-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 100%;
}

	.nina-form .form-floating {
		margin: 0;
	}

	/* botão fixo no fluxo */
	.nina-form button {
		margin-top: 12px;
	}

/* =========================
   ANIMAÇÃO
========================= */
@keyframes nina-slide-in {
	to {
		transform: translateX(0);
	}
}



/* spacer para manter centralização */
.nina-header-spacer {
	width: 40px;
}



/* Animação */
@keyframes ninaUp {
	from {
		transform: translateY(40px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.avatar-editor {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.avatar-preview {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #2de0b7;
	margin-bottom: 20px;
}


.toggle-password {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	cursor: pointer;
	color: #6c757d;
	font-size: 16px;
	z-index: 5;
}

	.toggle-password:hover {
		color: #000;
	}

.nina-canvas {
	transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.25s ease;
	will-change: transform, opacity;
}


/* BUSCA */
.search-wrapper {
	position: relative;
}

.search-input {
	width: 100%;
	height: 44px;
	border-radius: 12px;
	border: 1px solid #2c2f36;
	background: #14161c;
	color: #fff;
	padding: 0 44px;
	outline: none;
}

	.search-input::placeholder {
		color: #8b8f98;
	}

.search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	color: #8b8f98;
}

.clear-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	color: #8b8f98;
	cursor: pointer;
}

/* LISTA */
.equipe-item {
	padding: 12px 10px;
	border-radius: 10px;
	transition: background 0.2s ease;
	cursor: pointer;
}

	.equipe-item:hover {
		background: rgba(255, 255, 255, 0.06);
	}

.equipe-avatar {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
}

.list-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
	margin: 0 8px;
}


.lista-equipes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.equipe-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	border-radius: 14px;
	background: rgba(255,255,255,0.03);
	transition: background 0.2s ease;
	cursor: pointer;
}

	.equipe-card:hover {
		background: rgba(255,255,255,0.08);
	}

.equipe-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

	.equipe-left img {
		width: 42px;
		height: 42px;
		border-radius: 10px;
		object-fit: cover;
		background: #222;
	}

.equipe-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.equipe-nome {
	font-weight: 600;
	color: #fff;
}

.equipe-sigla {
	font-size: 12px;
	color: #9aa0a6;
	margin-top: 2px;
}

.chevron {
	color: #9aa0a6;
	font-size: 22px;
}

.card-warning-nina {
	background: rgba(255, 193, 7, 0.15); /* warning suave */
	color: #ffd37a; /* texto visível no dark */
}

	.card-warning-nina strong {
		color: #ffcc66;
	}

	.card-warning-nina .fs-14px {
		color: #f5d28c;
	}


.offcanvas-backdrop.show {
	opacity: 0.65 !important; /* reduz o escuro */
	background-color: rgba(0, 0, 0, 0.6); /* controla melhor o tom */
	backdrop-filter: blur(12px); /* blur moderno */
	-webkit-backdrop-filter: blur(8px); /* Safari */
}


.highlight-fotos {
	animation: destaqueFotos 1.8s ease-in-out;
	border-radius: 14px;
}

@keyframes destaqueFotos {
	0% {
		box-shadow: 0 0 0 0 rgba(76, 175, 255, 0.0);
		background: transparent;
	}

	20% {
		box-shadow: 0 0 0 6px rgba(76, 175, 255, 0.18);
		background: rgba(76, 175, 255, 0.06);
	}

	60% {
		box-shadow: 0 0 0 10px rgba(76, 175, 255, 0.12);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(76, 175, 255, 0.0);
		background: transparent;
	}
}


/* Lista */
.faq-nina-list {
	display: flex;
	flex-direction: column;
}

/* Item */
.faq-nina-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255,255,255,.06);
	cursor: pointer;
	transition: background .25s ease, transform .15s ease;
}

	.faq-nina-item:last-child {
		border-bottom: none;
	}

	/* Hover / active */
	.faq-nina-item:hover {
		background: rgba(255,255,255,.04);
	}

	.faq-nina-item:active {
		transform: scale(.985);
	}

/* Lado esquerdo */
.faq-nina-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Ícone */
.faq-nina-icon {
	font-size: 22px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.06);
	border-radius: 10px;
}

/* Texto */
.faq-nina-text {
	display: flex;
	flex-direction: column;
}

.faq-nina-title {
	font-weight: 600;
	font-size: 14px;
	color: #fff;
	line-height: 1.2;
}

.faq-nina-sub {
	font-size: 12px;
	color: rgba(255,255,255,.55);
	margin-top: 2px;
}

/* Chevron */
.faq-nina-chevron {
	color: rgba(255,255,255,.35);
	font-size: 14px;
}







.faq-nina-header {
	position: sticky;
	top: 0;
	z-index: 5;
	padding: 10px 12px;
	margin-bottom: 12px;
	background: linear-gradient( 180deg, rgba(15,15,20,.95), rgba(15,15,20,.75) );
	backdrop-filter: blur(10px);
}

.faq-nina-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 8px;
	transition: background .2s ease;
}

	.faq-nina-back:hover {
		background: rgba(255,255,255,.08);
	}

	.faq-nina-back i {
		font-size: 14px;
	}



/* Container */
.faq-nina-qna {
	border-radius: 14px;
	margin: 12px;
	overflow: hidden;
	background: rgba(255,255,255,.03);
}

/* Pergunta */
.faq-nina-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	cursor: pointer;
	font-weight: 600;
	color: #fff;
	transition: transform .15s ease, box-shadow .2s ease;
}

/* Gradiente Nina */
.nina-gradient {
	background: linear-gradient( 135deg, rgba(46, 213, 115, 0.18), rgba(72, 126, 255, 0.18) );
}

/* Hover / active */
.faq-nina-question:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Título */
.faq-nina-title {
	font-size: 14px;
	line-height: 1.35;
}

/* Arrow */
.faq-nina-arrow {
	color: rgba(255,255,255,.65);
	transition: transform .25s ease;
}

.faq-nina-qna.open .faq-nina-arrow {
	transform: rotate(180deg);
}

/* Resposta */
.faq-nina-answer {
	display: none;
	padding: 14px 16px 16px;
	background: rgba(0,0,0,.25);
}

.faq-nina-text {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255,255,255,.85);
}

/* Ação */
.faq-nina-actions {
	margin-top: 12px;
}

.faq-nina-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: linear-gradient( 135deg, #2ed573, #487eff );
	box-shadow: 0 6px 18px rgba(0,0,0,.35);
	transition: transform .15s ease, box-shadow .15s ease;
}

	.faq-nina-link:hover {
		transform: translateY(-1px);
		box-shadow: 0 10px 26px rgba(0,0,0,.45);
	}

/* Wrapper do ícone */
.nina-icon-ring {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nina-gradient);
	padding: 2px; /* espessura da borda */
	flex-shrink: 0;
}

	/* Fundo interno */
	.nina-icon-ring .nina-icon-inner {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: linear-gradient( 180deg, var(--nina-bg-overlay-top), var(--nina-bg-overlay-bottom) );
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--nina-white);
		font-size: 20px;
		box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.35);
	}

/* Ícone material / fontawesome */
.nina-icon-inner .material-symbols-outlined,
.nina-icon-inner i {
	font-size: 20px;
	line-height: 1;
}

/* Hover elegante */
.faq-nina-item:hover .nina-icon-ring {
	transform: scale(1.04);
}

.faq-nina-item:hover .nina-icon-inner {
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.45);
}


.empty-icon-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 140px;
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 40px rgba(0,0,0,0.35);
	margin-bottom: 20px;
}

.empty-icon {
	width: 90px;
	height: auto;
	filter: drop-shadow(0 0 12px rgba(0, 180, 255, 0.45)) drop-shadow(0 0 24px rgba(120, 90, 255, 0.25));
}


/* ===== SHEET BASE ===== */
.nina-sheet {
	border-radius: 40px 40px 0 0;
	background: linear-gradient( 180deg, var(--nina-bg-overlay-top), var(--nina-bg-overlay-bottom) );
	box-shadow: 0 -20px 40px rgba(0,0,0,.45);
}

/* grabber */
.nina-sheet-grabber {
	width: 42px;
	height: 5px;
	background: rgba(255,255,255,.25);
	border-radius: 10px;
	margin: 12px auto 8px;
}

/* body */
.nina-sheet-body {
	padding: 12px 20px 24px;
	color: var(--nina-white);
}

/* title */
.nina-sheet-title {
	text-align: center;
	font-weight: 600;
	margin-bottom: 16px;
}

/* list */
.nina-sheet-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* item */
.nina-sheet-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 8px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: 15px;
	cursor: pointer;
	transition: background .2s ease;
}

	.nina-sheet-item:hover {
		background: rgba(255,255,255,.06);
	}

	.nina-sheet-item span {
		font-weight: 500;
	}

	.nina-sheet-item i {
		opacity: .6;
	}


.nina-sheet-bottom {
	max-height: 75vh !important; /* 🔥 ESSENCIAL */
	height: auto !important; /* 🔥 NÃO fixe height */
	border-radius: 22px 22px 0 0;
	background: linear-gradient( 180deg, var(--nina-bg-overlay-top), var(--nina-bg-overlay-bottom) );
	box-shadow: 0 -20px 40px rgba(0,0,0,.45);
	color: var(--nina-white);
	pointer-events: auto;
}


/* Header fixo */
.nina-sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Título */
.nina-sheet-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

/* Close */
.nina-sheet-close {
	background: rgba(255,255,255,.08);
	border: none;
	border-radius: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

/* Body com scroll */
.nina-sheet-body {
	overflow-y: auto;
	max-height: calc(50vh - 64px);
	padding: 8px 0;
}

/* Lista */
.nina-sheet-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	cursor: pointer;
	transition: background .2s ease;
}

	.nina-sheet-item:hover {
		background: rgba(255,255,255,.06);
	}

	.nina-sheet-item span {
		font-weight: 500;
	}

	.nina-sheet-item i {
		opacity: .5;
	}

/* Backdrop mais suave (mobile-like) */
.offcanvas-backdrop.show {
	opacity: .6;
}


.offcanvas-backdrop {
	pointer-events: auto;
}


/* ===== PAGAR LIST (NINA) ===== */

.nina-pagar-items {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	margin: 10px;
}



/*.nina-pagar-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	cursor: pointer;
}*/
.nina-pagar-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 6px;
	cursor: pointer;
	transition: background-color .25s ease, transform .2s ease, box-shadow .2s ease;
}

	.nina-pagar-item:hover {
		background: linear-gradient( 90deg, rgba(0,178,92,0.08), rgba(91,45,139,0.08) );
		transform: translateY(-1px);
		box-shadow: 0 6px 16px rgba(0,0,0,.25);
		border-radius: 14px;
	}


.nina-pagar-left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex: 1;
}

.nina-pagar-status {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

	.nina-pagar-status.ok {
		background: rgba(0, 178, 92, .15);
		color: #00b25c;
	}

	.nina-pagar-status.no {
		background: rgba(220, 53, 69, .15);
		color: #dc3545;
	}

.nina-pagar-text {
	min-width: 0;
}

.nina-pagar-title {
	font-weight: 600;
	font-size: 14px;
	color: #fff;
}

.nina-pagar-subtitle {
	font-size: 12px;
	color: var(--nina-muted);
}

.nina-pagar-chevron {
	color: var(--nina-muted);
	font-size: 22px;
}

.nina-divider {
	height: 1px;
	background: rgba(255,255,255,.06);
	margin-left: 66px;
}


.nina-checkin-qr {
	width: min(80vw, 280px); /* responsivo no mobile */
	aspect-ratio: 1 / 1; /* força 1:1 */
	object-fit: contain;
	border-radius: 18px;
	border: 6px solid rgba(255,255,255,.15);
	background: #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.nina-checkin-qr {
	width: min(80vw, 300px);
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 16px;
	background: #fff;
	padding: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

#footerBotoesPagamento {
	position: sticky;
	bottom: 0;
	background: linear-gradient( 180deg, transparent, rgba(0,0,0,.55) );
	backdrop-filter: blur(6px);
	z-index: 5;
}







/* CONTAINER */
.nina-offcanvas {
	display: flex;
	flex-direction: column;
	height: 100%;
	/*background: #0f1115;*/
	color: #fff;
}

/* HEADER */
.nina-off-header {
	padding: 16px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.nina-off-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nina-off-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

/* SUMMARY */
.nina-off-summary {
	display: flex;
	gap: 12px;
	padding: 16px;
}

.nina-summary-card {
	flex: 1;
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border-radius: 14px;
	background: #161a22;
}

	.nina-summary-card.credito span {
		color: #4ade80;
	}

	.nina-summary-card.debito span {
		color: #f87171;
	}

/* BODY */
.nina-off-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

/* FOOTER */
.nina-off-footer {
	padding: 16px;
	padding-bottom: 40px !important;
	border-top: 1px solid rgba(255,255,255,.08);
	display: grid;
	gap: 10px;
}




.nina-btn-outline {
	background: transparent;
	border: 1px solid rgba(255,255,255,.2);
	color: #fff;
	padding: 12px;
	border-radius: 12px;
	font-weight: 600;
}

.nina-btn-danger-pill {
	background: #ef4444;
	border: none;
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
}

.nina-btn-close {
	background: transparent;
	border: none;
	color: #fff;
}


.nina-total-wrapper {
	text-align: center;
	margin-bottom: 14px;
}

.nina-total-label {
	font-size: 13px;
	letter-spacing: .4px;
	color: rgba(255,255,255,.55);
	margin-bottom: 4px;
}

.nina-total {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.5px;
	color: #ffffff;
}


.nina-btn-primary-gradient {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 16px;
	border: none;
	border-radius: 14px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient( 135deg, #2563eb 0%, #3b82f6 45%, #22d3ee 100% );
	box-shadow: 0 10px 22px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255,255,255,.15);
	transition: all .25s ease;
}

	.nina-btn-primary-gradient:hover {
		transform: translateY(-1px);
		box-shadow: 0 14px 28px rgba(37, 99, 235, .45), inset 0 1px 0 rgba(255,255,255,.25);
	}

	.nina-btn-primary-gradient:active {
		transform: translateY(0);
		box-shadow: 0 8px 16px rgba(37, 99, 235, .3);
	}

.nina-off-footer {
	padding: 18px 16px 20px;
	border-top: 1px solid rgba(255,255,255,.06);
	background: linear-gradient( to top, rgba(15,17,21,.98), rgba(15,17,21,.85) );
	backdrop-filter: blur(8px);
}

.nina-summary-card {
	background: linear-gradient( 180deg, #171b23, #12151c );
	border: 1px solid rgba(255,255,255,.04);
}

/* ITEM */
.nina-inscricao-item {
	display: flex;
	align-items: center;
	background: #f5f7fa;
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 12px;
	position: relative;
	gap: 14px;
}

/* FAIXA LATERAL */
.nina-inscricao-bar {
	width: 4px;
	height: 100%;
	border-radius: 4px;
	background: #ff6b6b; /* pendente */
}

.nina-inscricao-item.pago .nina-inscricao-bar {
	background: #2ecc71;
}

/* INFO */
.nina-inscricao-info {
	flex: 1;
	min-width: 0;
}

.nina-inscricao-titulo {
	font-weight: 600;
	font-size: 15px;
	color: #1f2937;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nina-inscricao-subtitulo {
	font-size: 13px;
	color: #6b7280;
	margin-top: 2px;
}

/* VALOR */
.nina-inscricao-valor {
	text-align: right;
	white-space: nowrap;
}

	.nina-inscricao-valor .valor {
		font-weight: 700;
		font-size: 15px;
		color: #cd353a;
	}

.nina-inscricao-item.pago .nina-inscricao-valor .valor {
	color: #0f9e3e;
}

.nina-inscricao-valor .status {
	font-size: 12px;
	color: #6b7280;
	margin-top: 2px;
	text-transform: lowercase;
}


/* ITEM */
.nina-inscricao-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	margin-bottom: 12px;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 14px;
}

/* INFO */
.nina-inscricao-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nina-inscricao-titulo {
	font-size: 15px;
	font-weight: 600;
	color: #f1f5f9;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nina-inscricao-subtitulo {
	font-size: 13px;
	color: #9ca3af;
}

/* VALOR */
.nina-inscricao-valor {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

	.nina-inscricao-valor .valor {
		font-size: 15px;
		font-weight: 700;
	}

		.nina-inscricao-valor .valor.pendente {
			color: #ff5c5c;
		}

		.nina-inscricao-valor .valor.ok {
			color: #22c55e;
		}

	.nina-inscricao-valor .status {
		font-size: 12px;
		color: #9ca3af;
		text-transform: lowercase;
	}


.nina-inscricao-row {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
	margin-right: 8px;
	border-radius: 14px;
	background: rgba(255,255,255,0.03);
	margin-bottom: 10px;
}

/* BOTÃO DELETE */
.nina-inscricao-delete {
	position: absolute;
	top: -13px;
	right: -8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 80, 80, 0.12);
	color: #ff5c5c;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background .2s ease;
}

	.nina-inscricao-delete span {
		font-size: 18px;
	}

/* Hover desktop */
.nina-inscricao-row:hover .nina-inscricao-delete {
	opacity: 1;
}

/* Mobile: sempre visível */
@media (max-width: 768px) {
	.nina-inscricao-delete {
		opacity: 1;
	}
}

.nina-inscricao-delete:hover {
	background: rgba(255, 80, 80, 0.22);
}


.nina-btn-action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 45px;
	font-weight: 600;
	font-size: 14px;
	border-radius: 12px;
}

/* Ícone alinhado corretamente */
.nina-btn-icon {
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
}



.nina-resultados-page {
	padding: 20px;
	color: #eaeaea;
}

/* HEADER */
.nina-resultados-header {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: flex-start;
}

.nina-title {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 6px;
	letter-spacing: .2px;
}

.nina-subtitle {
	font-size: 13px;
	color: #9aa0a6;
	max-width: 560px;
	line-height: 1.5;
}

.nina-divider {
	border-color: rgba(255,255,255,.06);
	margin: 22px 0;
}

/* EMPTY STATE */
.nina-empty-card {
	background: linear-gradient( 180deg, rgba(255,255,255,.045), rgba(255,255,255,.025) );
	border-radius: 18px;
	padding: 36px 30px;
	text-align: center;
	max-width: 520px;
	margin: 10px auto;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.nina-empty-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(93,169,255,.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

	.nina-empty-icon span {
		font-size: 32px;
		color: #5da9ff;
	}

.nina-empty-card h3 {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 10px;
}

.nina-empty-card p {
	font-size: 13px;
	color: #9aa0a6;
	margin-bottom: 22px;
	line-height: 1.5;
}

/* LISTA */
.nina-resultados-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* CARD */
.nina-resultado-card {
	background: rgba(255,255,255,.035);
	border-radius: 16px;
	padding: 18px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
	transition: background .2s ease;
}

	.nina-resultado-card:hover {
		background: rgba(255,255,255,.055);
	}

.nina-resultado-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.nina-resultado-prova {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .2px;
}

.nina-resultado-data {
	font-size: 12px;
	color: #9aa0a6;
}

/* MÉTRICAS */
.nina-resultado-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.nina-metric {
	background: rgba(0,0,0,.25);
	border-radius: 12px;
	padding: 10px 12px;
	text-align: center;
}

	.nina-metric small {
		display: block;
		font-size: 11px;
		color: #9aa0a6;
		margin-bottom: 4px;
	}

	.nina-metric strong {
		font-size: 15px;
		font-weight: 600;
		letter-spacing: .3px;
	}

.nina-resultados-info-card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: linear-gradient( 180deg, rgba(255,255,255,.06), rgba(255,255,255,.02) );
	border-radius: 16px;
	padding: 18px 20px;
	/*margin-bottom: 24px;*/
	border: 1px solid rgba(255,255,255,.08);
}

.nina-info-icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(93,169,255,.15);
	color: #5da9ff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.nina-info-content {
	flex: 1;
}

	.nina-info-content h3 {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 6px;
	}

	.nina-info-content p {
		font-size: 13px;
		line-height: 1.45;
		color: #9aa0a6;
		margin: 0;
	}

.nina-info-action {
	display: flex;
	align-items: center;
}




#bnEventoRoot {
	/*padding: 18px 18px 26px 18px;*/
	color: #EAEAEA;
}

/* TOP BAR */
#bnEventoTopBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 10px;
	border-radius: 14px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.06);
	position: sticky;
	top: 10px;
	z-index: 5;
	backdrop-filter: blur(10px);
}

#bnEventoBtnVoltarTop {
	border: 1px solid rgba(255,255,255,.08);
	background: rgba(0,0,0,.15);
	color: #fff;
	border-radius: 12px;
	padding: 8px 10px;
}

#bnEventoTopTitle {
	flex: 1;
	min-width: 0;
}

#bnEventoTopTitleText {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#bnEventoTopSubText {
	margin-top: 3px;
	font-size: 12px;
	color: rgba(255,255,255,.65);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

#bnEventoTopActions {
	display: flex;
	gap: 10px;
}

#bnEventoBtnMenu {
	border: 1px solid rgba(255,255,255,.08);
	background: rgba(0,0,0,.15);
	color: #fff;
	border-radius: 12px;
	padding: 8px 10px;
}

/* MENU 3 pontos */
#bnEventoMenu {
	margin-top: 10px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px;
	border-radius: 14px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.06);
}

/* HERO */
#bnEventoHero {
	margin-top: 14px;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.06);
	background: rgba(255,255,255,.03);
	position: relative;
}

#bnEventoHeroBg {
	height: 160px;
	background-size: cover;
	background-position: center;
	filter: saturate(1.05);
}

#bnEventoHeroOverlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 14px;
	background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.05));
	gap: 12px;
}

#bnEventoHeroTitle {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: .2px;
	line-height: 1.15;
	text-shadow: 0 10px 25px rgba(0,0,0,.35);
}

#bnEventoHeroMeta {
	margin-top: 10px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

	#bnEventoHeroMeta .bn-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 6px 10px;
		border-radius: 999px;
		background: rgba(255,255,255,.10);
		border: 1px solid rgba(255,255,255,.10);
		font-size: 12px;
		color: rgba(255,255,255,.92);
	}

#bnEventoHeroRight {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
}

#bnEventoChipDias, #bnEventoChipStatus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 14px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.10);
	min-width: 88px;
	text-align: center;
}

	#bnEventoChipDias span {
		font-weight: 900;
		font-size: 18px;
		line-height: 1;
	}

	#bnEventoChipDias small {
		font-size: 11px;
		opacity: .75;
	}

	#bnEventoChipDias.bn-muted {
		opacity: .7;
	}

#bnEventoChipStatus {
	padding: 8px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
}

	#bnEventoChipStatus.bn-success {
		background: rgba(26,214,140,.18);
		border-color: rgba(26,214,140,.28);
	}

	#bnEventoChipStatus.bn-warning {
		background: rgba(255,198,61,.18);
		border-color: rgba(255,198,61,.28);
	}

	#bnEventoChipStatus.bn-danger {
		background: rgba(255,87,87,.16);
		border-color: rgba(255,87,87,.26);
	}

	#bnEventoChipStatus.bn-info {
		background: rgba(93,169,255,.16);
		border-color: rgba(93,169,255,.26);
	}

#bnEventoHr1 {
	border-color: rgba(255,255,255,.08);
	margin: 18px 0;
}

/* CARDS + TITLES */
.bn-card {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 18px;
	padding: 14px;
}

.bn-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 800;
	margin: 12px 0 10px;
	letter-spacing: .2px;
}

	.bn-section-title span.material-symbols-outlined {
		font-size: 20px;
		opacity: .9;
	}

.bn-mt {
	margin-top: 16px;
}

.bn-muted-text {
	color: rgba(255,255,255,.65);
	font-size: 13px;
}

/* CTA CARD */
#bnEventoCtaCard {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
}

	#bnEventoCtaCard.bn-success {
		border-color: rgba(26,214,140,.22);
		background: linear-gradient(135deg, rgba(26,214,140,.10), rgba(255,255,255,.03));
	}

	#bnEventoCtaCard.bn-warning {
		border-color: rgba(255,198,61,.22);
		background: linear-gradient(135deg, rgba(255,198,61,.10), rgba(255,255,255,.03));
	}

	#bnEventoCtaCard.bn-danger {
		border-color: rgba(255,87,87,.20);
		background: linear-gradient(135deg, rgba(255,87,87,.10), rgba(255,255,255,.03));
	}

	#bnEventoCtaCard.bn-info {
		border-color: rgba(93,169,255,.20);
		background: linear-gradient(135deg, rgba(93,169,255,.10), rgba(255,255,255,.03));
	}

#bnEventoCtaIcon {
	width: 46px;
	height: 46px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
}

	#bnEventoCtaIcon .material-symbols-outlined {
		font-size: 22px;
	}

#bnEventoCtaText {
	flex: 1;
	min-width: 0;
}

#bnEventoCtaTitle {
	font-weight: 900;
	font-size: 15px;
	margin-bottom: 2px;
}

#bnEventoCtaDesc {
	font-size: 12.5px;
	color: rgba(255,255,255,.72);
	line-height: 1.35;
}

#bnEventoCtaAction {
	display: flex;
	align-items: center;
}

/* MAIN GRID */
#bnEventoGridMain {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 16px;
	margin-top: 16px;
}

@media (max-width: 980px) {
	#bnEventoGridMain {
		grid-template-columns: 1fr;
	}
}

/* GALERIA */
#bnEventoGaleriaGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 10px;
}


/* ===============================
   CTA EVENTO — MOBILE
   =============================== */
@media (max-width: 768px) {

	#bnEventoCtaCard {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 16px;
	}

	#bnEventoCtaIcon {
		margin-bottom: 4px;
	}

	#bnEventoCtaText {
		width: 100%;
	}

	#bnEventoCtaTitle {
		font-size: 16px;
		line-height: 1.2;
	}

	#bnEventoCtaDesc {
		font-size: 13px;
		line-height: 1.4;
	}

	#bnEventoCtaAction {
		width: 100%;
		margin-top: 8px;
	}

	#bnEventoBtnCta {
		width: 100%;
		justify-content: center;
		height: 46px;
	}
}


@media (max-width: 980px) {
	#bnEventoGaleriaGrid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	#bnEventoGaleriaGrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.bn-gal-item {
	position: relative;
	padding-top: 100%;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.06);
	background: rgba(255,255,255,.02);
	cursor: pointer;
}

.bn-gal-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.02);
	transition: transform .25s ease, opacity .25s ease;
}

.bn-gal-item:hover .bn-gal-bg {
	transform: scale(1.06);
}

.bn-gal-placeholder .bn-gal-bg {
	background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
	opacity: .7;
}

/* INFO CARD */
#bnEventoInfoCard .bn-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
}

	#bnEventoInfoCard .bn-info-row:last-child {
		border-bottom: none;
	}

#bnEventoInfoCard .bn-info-label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,.78);
	font-size: 13px;
}

	#bnEventoInfoCard .bn-info-label .material-symbols-outlined {
		font-size: 18px;
		opacity: .9;
	}

#bnEventoInfoCard .bn-info-value {
	font-size: 13.5px;
	font-weight: 800;
	color: rgba(255,255,255,.95);
	text-align: right;
}

/* CAMISETA */
#bnEventoCamisetaCard.bn-banner {
	display: flex;
	gap: 14px;
	align-items: stretch;
	padding: 12px;
}

#bnEventoCamisetaImg {
	width: 160px;
	min-height: 110px;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255,255,255,.06);
	background-color: rgba(255,255,255,.02);
}

#bnEventoCamisetaText {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#bnEventoCamisetaTitle {
	font-weight: 900;
	font-size: 14px;
	margin-bottom: 4px;
}

#bnEventoCamisetaDesc {
	font-size: 12.5px;
	color: rgba(255,255,255,.72);
	line-height: 1.35;
}

@media (max-width: 680px) {
	#bnEventoCamisetaCard.bn-banner {
		flex-direction: column;
	}

	#bnEventoCamisetaImg {
		width: 100%;
		height: 160px;
	}
}

/* VIDEO */
#bnEventoVideoWrap {
	position: relative;
	padding-top: 56.25%;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.06);
}

#bnEventoVideoFrame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* DEPOIMENTOS */
#bnEventoDepGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (max-width: 980px) {
	#bnEventoDepGrid {
		grid-template-columns: 1fr;
	}
}

.bn-dep-card {
	padding: 14px;
}

.bn-dep-top {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 10px;
}

.bn-dep-avatar {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255,255,255,.08);
	background-color: rgba(255,255,255,.04);
}

.bn-dep-name-text {
	font-weight: 900;
	font-size: 13.5px;
}

.bn-dep-sub {
	color: rgba(255,255,255,.65);
	font-size: 12px;
	margin-top: 1px;
}

.bn-dep-text {
	color: rgba(255,255,255,.78);
	font-size: 12.7px;
	line-height: 1.4;
}

.bn-muted-box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
}

/* PERCURSOS */
#bnEventoPercTabs {
	display: flex;
	gap: 8px;
	margin: 8px 0 10px;
	flex-wrap: wrap;
}

	#bnEventoPercTabs .bn-tab {
		border: 1px solid rgba(255,255,255,.08);
		background: rgba(255,255,255,.03);
		color: rgba(255,255,255,.88);
		border-radius: 999px;
		padding: 8px 12px;
		font-weight: 800;
		font-size: 12px;
	}

		#bnEventoPercTabs .bn-tab.bn-active {
			background: rgba(26,214,140,.14);
			border-color: rgba(26,214,140,.22);
			color: rgba(255,255,255,.95);
		}

.bn-perc-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bn-perc-img {
	width: 100%;
	height: 260px;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255,255,255,.06);
	background-color: rgba(255,255,255,.02);
}

.bn-perc-embed {
	width: 100%;
	height: 320px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.06);
}

	.bn-perc-embed iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}

.bn-perc-desc {
	color: rgba(255,255,255,.75);
	font-size: 12.8px;
	line-height: 1.45;
}

/* FOOTER */
#bnEventoFooter {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px;
	border-radius: 18px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.06);
}

#bnEventoFooterTitle {
	font-weight: 900;
	font-size: 13.5px;
	margin-bottom: 2px;
}

#bnEventoFooterSub {
	font-size: 12.5px;
	color: rgba(255,255,255,.72);
}

#bnEventoFooterRight {
	display: flex;
	gap: 10px;
}

/* UTIL */
.bn-hidden {
	display: none !important;
}

#bnEventoPagamento {
	margin-top: 32px;
}

#bnTabelaPagamento {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

	#bnTabelaPagamento thead th {
		text-align: left;
		font-weight: 600;
		color: #eaeaea;
		padding: 10px;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}

	#bnTabelaPagamento tbody td {
		padding: 10px;
		border-bottom: 1px solid rgba(255,255,255,.05);
		color: #cfd3d7;
	}

	#bnTabelaPagamento tbody tr:last-child td {
		border-bottom: none;
	}

	#bnTabelaPagamento td:nth-child(2),
	#bnTabelaPagamento td:nth-child(3) {
		font-weight: 500;
		color: #ffffff;
	}

#bnPagamentoObs {
	margin-top: 12px;
	font-size: 12px;
	color: #9aa0a6;
}


/* ITEM DA GALERIA */
.bn-gal-item {
	position: relative;
	aspect-ratio: 1 / 1; /* mantém quadrado perfeito */
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255,255,255,.04);
}

/* FUNDO DA IMAGEM */
.bn-gal-bg {
	width: 100%;
	height: 100%;
	background-size: cover; /* CRÍTICO */
	background-position: center; /* CRÍTICO */
	background-repeat: no-repeat; /* CRÍTICO */
}

/* PLACEHOLDER (sem imagem ou erro) */
.bn-gal-placeholder .bn-gal-bg {
	background: linear-gradient( 135deg, rgba(255,255,255,.04), rgba(255,255,255,.08) );
}


/* STATUS */
.bn-badge-open {
	background: rgba(255, 193, 7, 0.18);
	color: #facc15;
}

.bn-badge-ultimos {
	background: rgba(255, 193, 7, 0.18);
	color: #facc15;
}

.bn-badge-closed {
	background: rgba(148, 163, 184, 0.18);
	color: #cbd5f5;
}

/* VISIBILITY */
.bn-badge-public {
	background: rgba(34, 197, 94, 0.18);
	color: #4ade80;
}

.bn-badge-private {
	background: rgba(239, 68, 68, 0.18);
	color: #f87171;
}

.bn-badge-outline {
	border: 1px solid rgba(0,0,0,.15);
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	color: #19f6ff;
	background: #109cdd8c;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

	.bn-badge-outline:hover {
		background: rgba(16, 156, 221, .75);
		border-color: rgba(25, 246, 255, .45);
		color: #bdf8ff;
	}


.bn-badge-danger {
	border: 1px solid rgba(220, 53, 69, .35);
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	color: #ffb3b8;
	background: rgba(220, 53, 69, .25);
	white-space: nowrap;
}

	.bn-badge-danger:hover {
		background: rgba(220, 53, 69, .35);
	}

.bn-table-footer-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	color: #19f6ff;
	background: rgba(16, 156, 221, .18);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

	.bn-table-footer-cta:hover {
		background: rgba(16, 156, 221, .35);
		color: #bdf8ff;
	}

/* BADGE - PRÉVIA (EM BREVE) */
.bn-badge-previa {
	background: rgba(139, 92, 246, 0.18);
	color: #a78bfa;
}

/* opcional: reforço visual */
.bn-badge-previa {
	font-weight: 600;
	letter-spacing: 0.2px;
}



.bn-btn-outline {
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: transparent;
	color: #e5e7eb;
	border-radius: 10px; /* cantos levemente arredondados */
	padding: 6px 14px;
	transition: all 0.2s ease;
}

	.bn-btn-outline:hover {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.45);
		color: #ffffff;
	}

	.bn-btn-outline:active {
		background: rgba(255, 255, 255, 0.15);
		border-color: rgba(255, 255, 255, 0.6);
	}

	.bn-btn-outline .material-symbols-outlined {
		opacity: 0.9;
	}

.payment-card {
	width: 100%;
	border-radius: 16px;
	padding: 16px 18px;
	background: linear-gradient( 135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015) );
	color: #fff;
	transition: all 0.25s ease;
	cursor: pointer;
	border: 1px solid rgba(255,255,255,0.18);
}
	.payment-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 30px rgba(0,0,0,0.28);
	}
.payment-card-credit:hover {
	border-color: rgba(96,165,250,0.9);
}



.payment-subtitle {
	font-size: 13px;
	color: rgba(255,255,255,0.65);
	margin-top: 2px;
}

.payment-card.recommended {
	border-color: rgba(74,222,128,0.9);
	box-shadow: 0 0 0 1px rgba(74,222,128,0.4);
}



.btn-glass-outline {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #f1f1f1;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.25s ease;
}

	.btn-glass-outline:hover {
		background: rgba(255, 255, 255, 0.14);
		border-color: rgba(255, 255, 255, 0.4);
		color: #ffffff;
	}

	.btn-glass-outline:active {
		transform: scale(0.98);
		background: rgba(255, 255, 255, 0.18);
	}

	.btn-glass-outline:focus {
		box-shadow: none;
	}


.btn-delete-resultado {
	border: none;
	background-color: #26292c;
	color: rgba(255,255,255,0.45);
	transition: all .2s ease;
	padding: 4px;
}

	.btn-delete-resultado:hover {
		color: #fff;
		transform: scale(1.1);
	}


/* DELETE FLUTUANTE */
.btn-delete-floating {
	position: absolute;
	top: -10px;
	right: -10px;
	background: none;
	border: none;
	font-size: 22px;
	color: #ffffff;
	cursor: pointer;
	transition: transform .2s, opacity .2s;
	opacity: .85;
}

	.btn-delete-floating:hover {
		transform: scale(1.1);
		opacity: 1;
	}



.nina-conquista-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6f42c1, #28c76f);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	flex-shrink: 0;
}



/* BADGE */
.nina-conquista-badge {
	display: inline-flex; /* ou inline-block */
	width: fit-content;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ffc107;
	color: #111;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.nina-conquista-descricao {
	background: rgba(255,255,255,0.04);
	border-radius: 12px;
	padding: 14px;
}

.nina-conquista-texto {
	font-size: 13px;
	color: #cfd3da;
	line-height: 1.4;
}



.nina-search-wrapper {
	width: 100%;
}

.nina-search-input {
	padding-left: 40px;
	padding-right: 40px;
	height: 46px;
	border-radius: 14px;
	background: #111;
	color: #fff;
	border: 1px solid #2b2b2b;
}

.nina-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
}

.nina-clear-icon {
	position: absolute;
	right: 82px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	cursor: pointer;
}

.nina-user-card {
	background: rgba(255,255,255,0.04);
	border-radius: 14px;
	padding: 12px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: background .2s;
}

	.nina-user-card:hover {
		background: rgba(255,255,255,0.08);
	}

.nina-user-name {
	font-weight: 600;
	font-size: 15px;
}

.nina-user-sub {
	font-size: 12px;
	color: #9ca3af;
}

.nina-user-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
}

	.nina-user-card:hover {
		background: rgba(255, 255, 255, 0.08);
		transform: translateY(-1px);
	}

.nina-user-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #1f1f1f;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	color: #9ca3af;
}

	.nina-user-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.nina-user-avatar iconify-icon {
		font-size: 34px;
	}

.nina-user-info {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.nina-user-name {
	font-weight: 600;
	color: #fff;
}

.nina-user-sub {
	font-size: 13px;
	color: #9ca3af;
}


.perfil-publico {
	padding: 20px;
}

.perfil-avatar-publico {
	width: 110px;
	height: 110px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid rgba(255,255,255,0.15);
}

	.perfil-avatar-publico img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.perfil-stats-publico {
	display: flex;
	justify-content: space-around;
	margin: 20px 0;
}

	.perfil-stats-publico .stat {
		text-align: center;
	}

.perfil-bio-publica {
	font-size: 14px;
	color: #ddd;
	margin-bottom: 20px;
}


.perfil-publico-premium {
	padding: 20px;
}

/*.perfil-hero {
	text-align: center;
	padding: 30px 20px;
	border-radius: 20px;
	background: linear-gradient(135deg, #1f2933, #111827);
	margin-bottom: 20px;
}*/



.perfil-avatar-wrapper {
	width: 120px;
	height: 120px;
	margin: 0 auto 10px;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid rgba(255,255,255,0.15);
}

	.perfil-avatar-wrapper img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.perfil-nome {
	margin: 0;
	font-weight: 700;
}

.perfil-equipe {
	font-size: 14px;
	color: #9ca3af;
}

.perfil-metricas {
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
}

.metrica-card {
	flex: 1;
	margin: 0 5px;
	padding: 14px;
	border-radius: 14px;
	background: rgba(255,255,255,0.05);
	text-align: center;
	cursor: pointer;
}

	.metrica-card strong {
		display: block;
		font-size: 20px;
	}

.perfil-card {
	background: rgba(255,255,255,0.05);
	padding: 16px;
	border-radius: 14px;
	margin-bottom: 20px;
}

.perfil-destaques .destaque-card {
	display: flex;
	gap: 12px;
	padding: 14px;
	border-radius: 14px;
	background: rgba(255,255,255,0.04);
	margin-bottom: 10px;
	cursor: pointer;
}

	.perfil-destaques .destaque-card i {
		font-size: 22px;
	}

.destaque-card:hover  {
	background: linear-gradient(135deg, rgba(31,209,165,.08), rgba(91,108,255,.08));
	border-radius: 14px;
}

 .metrica-card:hover {
	background: linear-gradient(135deg, rgba(31,209,165,.08), rgba(91,108,255,.08));
	border-radius: 14px;
}

.perfil-acoes {
	margin-top: 20px;
}


.btn-voltar-perfil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	margin-left: 18px;
	margin-top: 18px;
	font-size: 14px;
	font-weight: 500;
	color: #e5e7eb;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	transition: all 0.25s ease;
}

	/* ÍCONE */
	.btn-voltar-perfil i {
		font-size: 14px;
	}

	/* HOVER */
	.btn-voltar-perfil:hover {
		background: rgba(255, 255, 255, 0.12);
		border-color: rgba(255, 255, 255, 0.22);
		transform: translateX(-2px);
	}

	/* ACTIVE */
	.btn-voltar-perfil:active {
		transform: translateX(-1px) scale(0.98);
	}

/* MOBILE */
@media (max-width: 576px) {
	.btn-voltar-perfil {
		width: 100%;
		justify-content: center;
		padding: 12px;
	}
}




/* ============================
   AVATAR EDITOR (ISOLADO)
============================ */

.avatar-editor {
	padding: 12px 4px;
}

	/* Preview da imagem */
	.avatar-editor .avatar-preview {
		background: rgba(255,255,255,.03);
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0,0,0,.25);
	}

	/* Botão principal (Escolher foto) */
	.avatar-editor .btn-nina-primary {
		background: linear-gradient(90deg, #22c55e, #3b82f6);
		border: none;
		color: #fff;
		font-weight: 600;
		padding: 12px 14px;
		border-radius: 10px;
		transition: transform .15s ease, box-shadow .15s ease;
	}

		.avatar-editor .btn-nina-primary:hover {
			transform: translateY(-1px);
			box-shadow: 0 8px 20px rgba(0,0,0,.35);
		}

	/* Botão salvar */
	.avatar-editor .btn-save-photo {
		background: #22c55e;
		border: none;
		color: #fff;
		font-weight: 600;
		padding: 12px 14px;
		border-radius: 10px;
		transition: background .15s ease, box-shadow .15s ease;
	}

		.avatar-editor .btn-save-photo:hover {
			background: #16a34a;
			box-shadow: 0 8px 20px rgba(0,0,0,.35);
		}

	/* Botão remover */
	.avatar-editor .btn-cancel-photo {
		background: transparent;
		border: 1px solid rgba(239,68,68,.6);
		color: #ef4444;
		font-weight: 500;
		padding: 11px 14px;
		border-radius: 10px;
		transition: background .15s ease, color .15s ease;
	}

		.avatar-editor .btn-cancel-photo:hover {
			background: rgba(239,68,68,.08);
			color: #ff6b6b;
		}

	/* Separadores */
	.avatar-editor hr {
		border: none;
		height: 1px;
		background: linear-gradient( to right, transparent, rgba(255,255,255,.15), transparent );
		margin: 14px 0;
	}

	/* Textos auxiliares */
	.avatar-editor small {
		font-size: 12px;
		line-height: 1.4;
		opacity: .75;
	}

		.avatar-editor small.text-danger {
			color: #ef4444 !important;
			opacity: .85;
		}

	/* Estados ocultos (mantém padrão do sistema) */
	.avatar-editor .d-none {
		display: none !important;
	}

/* ============================
   GRID DE FOTOS — BORA NINA
   Estados isolados e previsíveis
============================ */

.photos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

/* BASE COMUM */
.photo-item {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	transition: all .25s ease;
}

	/* ============================
   FOTO REAL
============================ */
	.photo-item.has-photo {
		display: block;
		cursor: pointer;
		background: none;
	}

		.photo-item.has-photo img,
		.photo-item.has-photo .photo-bg {
			width: 100%;
			height: 100%;
			object-fit: cover;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		.photo-item.has-photo:hover {
			transform: scale(1.02);
		}

	/* ============================
   SLOT ADICIONAR (+)
============================ */
	.photo-item.add {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		border: 2px dashed rgba(255,255,255,0.25);
		background: rgba(255,255,255,0.03);
		color: #22c55e;
		font-size: 26px;
	}

		.photo-item.add i {
			pointer-events: none;
		}

		.photo-item.add:hover {
			background: rgba(34,197,94,0.12);
			border-color: #22c55e;
			transform: scale(1.03);
		}

	/* ============================
   SLOT EMPTY (PÚBLICO)
============================ */
	.photo-item.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: default;
		background: rgba(255,255,255,0.04);
		border: 1px solid rgba(255,255,255,0.08);
		color: rgba(255,255,255,0.45);
		font-size: 22px;
	}

		.photo-item.empty i {
			pointer-events: none;
		}

		.photo-item.empty:hover {
			transform: none;
			background: rgba(255,255,255,0.06);
		}


/* ============================
   PERFIL HERO — FIX
============================ */

.perfil-hero {
	text-align: center;
	padding: 32px 20px 26px;
	border-radius: 20px;
	background: linear-gradient(135deg, #1f2933, #111827);
	margin-bottom: 20px;
	position: relative;
}

/* Wrapper do avatar (link fancybox) */
.perfil-avatar-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 14px;
	position: relative;
	box-shadow: 0 0 0 4px rgba(34,197,94,.25), 0 10px 30px rgba(0,0,0,.45);
}

	/* Imagem */
	.perfil-avatar-wrapper img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* Overlay hover (ampliar) */
	.perfil-avatar-wrapper::after {
		content: '\f065';
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		position: absolute;
		inset: 0;
		background: rgba(0,0,0,.35);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: .2s ease;
		font-size: 22px;
	}

	.perfil-avatar-wrapper:hover::after {
		opacity: 1;
	}

/* Nome */
.perfil-nome {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

/* Equipe */
.perfil-equipe {
	display: inline-block;
	margin-top: 4px;
	font-size: 13px;
	color: #9ca3af;
}

/* ============================
   PHOTO GRID - BACKGROUND FIX
============================ */

/*.photos-grid .photo-item {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	display: block;
}

.photos-grid .photo-bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.perfil-avatar-wrapper {
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

	.perfil-avatar-wrapper::after {
		content: '\f065';
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		position: absolute;
		inset: 0;
		background: rgba(0,0,0,.35);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: .2s;
		font-size: 20px;
	}

	.perfil-avatar-wrapper:hover::after {
		opacity: 1;
	}*/





/* ============================
   GRID DE FOTOS
============================ */
/*.photos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}*/

/* BASE */
/*.photo-item {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255,255,255,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .25s ease;
}*/

	/* IMAGEM */
	/*.photo-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}*/

	/* SLOT VAZIO (+) */
	/*.photo-item.add {
		border: 2px dashed rgba(255,255,255,0.25);
		color: #22c55e;
		font-size: 26px;
		background: rgba(255,255,255,0.03);
	}*/

		/* ÍCONE CENTRAL */
		/*.photo-item.add i {
			pointer-events: none;
		}*/

		/* HOVER */
		/*.photo-item.add:hover {
			background: rgba(34,197,94,0.12);
			border-color: #22c55e;
			transform: scale(1.03);
		}*/

	/* SLOT COM FOTO */
	/*.photo-item.has-photo:hover {
		transform: scale(1.02);
	}*/



#bnEventoHeroBg {
	position: relative;
	width: 100%;
	height: 220px; /* ajuste conforme o layout */
	border-radius: 18px;
	overflow: hidden;
}

	/* QUANDO TEM IMAGEM */
	#bnEventoHeroBg.has-bg {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	/* QUANDO NÃO TEM IMAGEM */
	#bnEventoHeroBg.no-bg {
		background: linear-gradient( 135deg, #3a3a3a, #2e2e2e );
		display: flex;
		align-items: center;
		justify-content: center;
	}

/* ÍCONE CENTRAL */
.bn-hero-empty-icon {
	font-size: 52px; /* você já usa fs-52px, pode manter */
	color: rgba(255, 255, 255, 0.45);
}

#bnEventoCamisetaImg {
	width: 100%;
	height: 180px;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
}

	/* COM IMAGEM */
	#bnEventoCamisetaImg.has-bg {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	/* SEM IMAGEM */
	#bnEventoCamisetaImg.no-bg {
		background: #3a3a3a;
		display: flex;
		align-items: center;
		justify-content: center;
	}

/* ÍCONE */
.bn-kit-empty-icon {
	font-size: 42px;
	color: rgba(255, 255, 255, 0.45);
}

/* evita clique quando não tem imagem */
a.disabled-link {
	pointer-events: none;
	cursor: default;
}

.perfil-share-wrapper {
	position: absolute;
	top: 15px;
	right: 15px;
}

.perfil-share-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
	font-size: 16px;
	transition: all .25s ease;
}

	.perfil-share-btn:hover {
		transform: scale(1.1);
		background: linear-gradient(135deg,#00c6ff,#0072ff);
		border-color: transparent;
	}

.perfil-link-card {
	background: rgba(255,255,255,0.05);
	border-radius: 14px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}

.perfil-link-text strong {
	font-size: 13px;
	display: block;
	opacity: .8;
}

.perfil-link-text span {
	font-size: 12px;
	opacity: .7;
}

.btn-copy-link {
	background: transparent;
	border: none;
	color: #ccc;
	font-size: 16px;
}

/* =========================
   CARD CLASSIFICAÇÃO
========================= */

.nina-card-classificacao {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 14px;
	padding: 20px;
}

.nina-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	color: #fff;
}

	.nina-card-header h5 {
		margin: 0;
		font-weight: 600;
		font-size: 15px;
	}

.nina-radio-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nina-radio-item {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	color: rgba(255,255,255,0.85);
}

	.nina-radio-item input[type="radio"] {
		display: none;
	}

.nina-radio-custom {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.4);
	position: relative;
	transition: all .2s ease;
}

.nina-radio-item input[type="radio"]:checked + .nina-radio-custom {
	border-color: #22d3ee;
	background: rgba(34,211,238,0.15);
}

	.nina-radio-item input[type="radio"]:checked + .nina-radio-custom::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 8px;
		height: 8px;
		background: #22d3ee;
		border-radius: 50%;
		transform: translate(-50%, -50%);
	}

.nina-radio-help {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	color: rgba(255,255,255,0.5);
}



.perfil-social-card {
	background: linear-gradient(135deg, rgba(0,198,255,.12), rgba(0,114,255,.08));
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	padding: 18px;
	margin: 25px 0;
	backdrop-filter: blur(10px);
}

.perfil-social-header {
	font-size: 14px;
	font-weight: 600;
	opacity: .85;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}

.perfil-social-buttons {
	display: flex;
	justify-content: center;
	gap: 18px;
}

.social-btn {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: white;
	transition: all .25s ease;
}

	.social-btn:hover {
		transform: translateY(-4px) scale(1.08);
		box-shadow: 0 10px 25px rgba(0,0,0,.3);
	}

	.social-btn.instagram {
		background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
	}

	.social-btn.whatsapp {
		background: #25D366;
	}

	.social-btn.site {
		background: linear-gradient(135deg,#4facfe,#00f2fe);
	}


	.nina-posicao-badge {
    font-weight: 700;
    font-size: 14px;
}

.nina-tipo-classificacao-badge {
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 20px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

	/* 🔵 GERAL */
	.nina-tipo-classificacao-badge.geral {
		background: #FFC72C; /* amarelo medalha */
		color: #1a1a1a; /* texto escuro */
	}

		.nina-tipo-classificacao-badge.geral i {
			color: #1a1a1a; /* ícone escuro */
			opacity: 1; /* remove qualquer opacidade herdada */
		}

	/* 🟣 CATEGORIA */
	.nina-tipo-classificacao-badge.categoria {
		background: rgba(195,130,143,0.18);
		color: #C3828F;
	}

		.nina-tipo-classificacao-badge.categoria i {
			color: #C3828F;
		}



.bn-canvas-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.65);
	backdrop-filter: blur(4px);
	display: none;
	z-index: 9999;
	justify-content: flex-end;
}

	.bn-canvas-overlay.active {
		display: flex;
	}

.bn-canvas-container {
	width: 420px;
	max-width: 100%;
	height: 100%;
	background: #1f2429;
	box-shadow: -10px 0 40px rgba(0,0,0,0.4);
	display: flex;
	flex-direction: column;
	animation: slideCanvas .25s ease;
}

@keyframes slideCanvas {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0);
	}
}

.bn-canvas-header {
	padding: 20px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.bn-canvas-header h5 {
		margin: 0;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 8px;
	}

.bn-canvas-close {
	background: none;
	border: none;
	color: #aaa;
	font-size: 22px;
}

.bn-canvas-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
}



/* ============================= */
/* OFFCANVAS RESPONSIVO CORRETO  */
/* ============================= */

/* Desktop */
@media (min-width: 992px) {

	.offcanvas-60 {
		--bs-offcanvas-width: 60vw;
	}

	.offcanvas-80 {
		--bs-offcanvas-width: 80vw;
	}
}

/* Mobile */
@media (max-width: 991.98px) {

	.offcanvas-60,
	.offcanvas-80 {
		--bs-offcanvas-width: 100vw;
	}
}



#bnTabelaPagamentoIsolado {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

	#bnTabelaPagamentoIsolado thead th {
		text-align: left;
		font-weight: 600;
		color: #eaeaea;
		padding: 10px;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}

	#bnTabelaPagamentoIsolado tbody td {
		padding: 10px;
		border-bottom: 1px solid rgba(255,255,255,.05);
		color: #cfd3d7;
	}

	#bnTabelaPagamentoIsolado tbody tr:last-child td {
		border-bottom: none;
	}

	#bnTabelaPagamentoIsolado td:nth-child(2),
	#bnTabelaPagamentoIsolado td:nth-child(3) {
		font-weight: 500;
		color: #ffffff;
	}
.bn-warning {
	border: 1px solid rgba(255, 193, 7, 0.35);
	background: linear-gradient(135deg, rgba(255,193,7,0.08), rgba(255,193,7,0.02));
}

	.bn-warning #bnEventoCtaIcon {
		color: #ffc107;
	}