img {
	image-orientation: from-image;
}
.status-bar-safe-area {
	display: none;
}

@supports (-webkit-touch-callout: none) {
	.status-bar-safe-area {
		display: flex;
		position: sticky;
		top: 0;
		height: env(safe-area-inset-top);
		background-color: #f7f7f7;
		width: 100%;
		z-index: 1;
	}

	.flex-column, .navbar-brand {
		padding-left: env(safe-area-inset-left);
	}
}

/* Garante que a base do app não tenha limites de altura */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden; 
	background-color: #000b1a; /* Cor de fundo do seu logo */
}

/* O container que o Blazor usa para renderizar as páginas */
#app {
	height: 100%;
	display: flex;
	flex-direction: column;
}

a, .btn-link {
	color: #006bb7;
}

.btn-primary {
	color: #fff;
	background-color: #1b6ec2;
	border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 !important; /* Remove o padding padrão do Bootstrap que causa bordas brancas */
}
/*.content {
	padding-top: 1.1rem;
}
*/
h1:focus {
	outline: none;
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid #e50000;
}

.validation-message {
	color: #e50000;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

.darker-border-checkbox.form-check-input {
	border-color: #929292;
}

/* Adiciona uma transição suave para todas as transformações */
.animated-button {
	transition: transform 0.1s ease-in-out;
}

	/* O que acontece quando o botão é clicado (estado :active) */
	.animated-button:active {
		transform: scale(0.98); /* Diminui o botão em 2% */
	}

.relogio-container {
	width: 150px;
	height: 150px;
	background-color: #f0f0f0;
	border-radius: 50%; /* Faz a forma do círculo */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	user-select: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease-in-out;
}

	.relogio-container:hover {
		transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
	}

	.relogio-container:active {
		transform: scale(0.98); /* Efeito de clique */
	}

.relogio-texto {
	font-size: 1.5rem;
	font-weight: bold;
	color: #333;
}

/* Estilo para o RelogioTreino.razor */
.relogio-treino {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 250px;
	height: 120px;
	background-color: #f0f0f0;
	border: 3px solid #512BD4; /* Cor MAUI */
	border-radius: 15px;
	user-select: none; /* Impede a seleção de texto ao arrastar */
	cursor: grab;
	/* ESSENCIAL para MAUI/Mobile: Desativa a rolagem da página quando o dedo está neste componente */
	touch-action: none;
}

.display-minutes {
	font-size: 3.5em;
	font-weight: bold;
	color: #512BD4;
	line-height: 1em;
}

/* Opcional: Adicionar um efeito visual ao arrastar */
.relogio-treino:active {
	cursor: grabbing;
	background-color: #e0e0e0;
}

.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1040;
}

.loading-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Estilos visuais */
	padding: 20px;
	background-color: white;
	border-radius: 8px;
	z-index: 1050;
}

.login-container {
	background: linear-gradient(180deg, #0099FF 0%, #33CC99 100%);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px;
	font-family: 'Segoe UI', sans-serif;
	color: white;
}

/* Container que retira a mensagem do fluxo da página */
.message-container-overlay {
	position: fixed; /* Fixa em relação à tela do celular */
	top: 25px; /* Distância do topo */
	left: 50%; /* Move para o meio */
	transform: translateX(-50%); /* Ajuste exato para centralização horizontal */
	z-index: 10000; /* Garante que fique acima de tudo */
	width: 90%; /* Largura responsiva para mobile */
	max-width: 450px; /* Limite para telas maiores */
	pointer-events: none; /* Evita que o container invisível bloqueie cliques na página */
}

	/* O alerta estilizado com Glassmorphism */
	.message-container-overlay .alert {
		pointer-events: auto; /* Permite clicar no botão de fechar dentro do alerta */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 20px;
		border-radius: 15px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
		margin: 0;
		color: white; /* Texto branco para destacar no alerta colorido */
	}

/* Ajuste nas cores padrão do Bootstrap para o estilo Glass */
.alert-success {
	background: rgba(40, 167, 69, 0.75) !important;
}

.alert-danger {
	background: rgba(220, 53, 69, 0.75) !important;
}

.alert-info {
	background: rgba(23, 162, 184, 0.75) !important;
}

/* Estilo do Botão de Fechar (X) */
.btn-close-custom {
	background: transparent;
	border: none;
	color: white;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1;
	padding: 0 0 0 15px;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s;
}

	.btn-close-custom:hover {
		opacity: 1;
	}

/* O container que segura o ícone e o texto */
.input-group {
	background: rgba(255, 255, 255, 0.2); /* Fundo semi-transparente */
	border: 1px solid rgba(255, 255, 255, 0.5); /* Borda fina branca */
	border-radius: 8px;
	margin-bottom: 20px;
	display: flex;
	align-items: center; /* Centraliza verticalmente ícone e texto */
	padding: 0 15px; /* Espaçamento interno nas laterais */
	height: 50px; /* Altura fixa para os campos */
	width: 100%;
	max-width: 320px; /* Ajuste conforme sua tela */
	position: relative;
}

	/* Estilo do ícone */
	.input-group .icon {
		min-width: 25px;
		color: white;
		font-size: 1.2rem;
		margin-right: 10px;
		display: flex;
		align-items: center;
	}

	/* O input real (onde se digita) */
	.input-group input {
		background: transparent !important; /* Remove o fundo padrão */
		border: none !important; /* Remove a borda padrão */
		color: white !important; /* Texto branco ao digitar */
		outline: none; /* Remove o contorno azul ao clicar */
		flex: 1; /* Faz o input ocupar o resto do espaço */
		height: 100%;
		font-size: 1rem;
	}

		/* Cor do placeholder (o texto "Username") */
		.input-group input::placeholder {
			color: rgba(255, 255, 255, 0.7);
		}

/* Botão Principal (LOGIN) */
.btn-login {
	background-color: #FFFFFF !important; /* Branco puro */
	color: #33CC99 !important; /* Texto verde água (igual ao fundo) */
	border: none !important;
	border-radius: 25px !important; /* Bem arredondado como na foto */
	padding: 12px 0;
	width: 100%;
	max-width: 320px;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
	margin-top: 10px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra leve para destaque */
	transition: transform 0.2s;
}

	.btn-login:active {
		transform: scale(0.98); /* Efeito de clique */
	}

/* Botão debaixo (Create an account) */
.btn-outline {
	background: transparent !important;
	color: #FFFFFF !important;
	border: 1px solid #FFFFFF !important; /* Borda branca fina */
	border-radius: 20px !important;
	padding: 8px 30px;
	font-size: 0.9rem;
	cursor: pointer;
	margin-top: 10px;
	transition: background 0.3s;
}

	.btn-outline:hover {
		background: rgba(255, 255, 255, 0.1); /* Leve brilho ao passar o mouse */
	}

/* Espaçamento do rodapé */
.footer-section {
	margin-top: auto; /* Empurra para o final da tela */
	text-align: center;
	padding-bottom: 20px;
}

	.footer-section p {
		margin-bottom: 5px;
		font-size: 0.85rem;
		opacity: 0.9;
	}

main {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Container Principal (Acompanhando o Login) */
.main-page-container {
	background: linear-gradient(180deg, #0099FF 0%, #33CC99 100%);
	min-height: 100vh;
	padding: 20px;
	color: white;
	width: 100%;
	position: relative;
	z-index: 100; /* Garante que fique na frente de tudo */
	display: block !important;
}

/* Cards Transparentes */
/*.glass-card {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 15px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}*/

/* Ajuste no MainLayout para não limitar o conteúdo */
.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* 100% da altura da Viewport */
	width: 100%;
}

/* Títulos */
.page-title {
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center; /* Garante que o título fique no meio das 3 colunas */
	font-size: 1.4rem;
}

/* Estilização dos Selects e Inputs */
.custom-input {
	background: rgba(255, 255, 255, 0.9) !important;
	border-radius: 10px !important;
	border: none !important;
	color: #333 !important;
	height: 45px;
}

/* Tabela Moderna */
.modern-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px;
}

	.modern-table thead th {
		background: transparent;
		border: none;
		color: white;
		text-transform: uppercase;
		font-size: 0.8rem;
		padding: 10px;
	}

	.modern-table tbody tr {
		background: rgba(255, 255, 255, 0.95);
		transition: transform 0.2s;
	}

	.modern-table tbody td {
		padding: 12px;
		color: #333;
	}

		.modern-table tbody td:first-child {
			border-radius: 10px 0 0 10px;
		}

		.modern-table tbody td:last-child {
			border-radius: 0 10px 10px 0;
		}

/* Botão de Salvar (Igual ao Login) */
.btn-save {
	background-color: white !important;
	color: #33CC99 !important;
	border: none;
	border-radius: 25px;
	padding: 12px 40px;
	font-weight: bold;
	width: 100%;
	margin-top: 20px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Container de Fundo (Mesmo do Login e Medidas) */
.menu-page-container {
	display: flex;
	flex-direction: column;
	align-items: center; /* Garante que o conteúdo interno comece no centro */
	background: linear-gradient(180deg, #0099FF 0%, #33CC99 100%);
	min-height: 100vh;
	padding: 30px 20px;
	color: white;
	box-sizing: border-box; /* Importante para o padding não "estourar" a largura */
}

.welcome-text h1 {
	font-weight: 800;
	font-size: 2.2rem;
	margin-bottom: 5px;
}

.welcome-text p {
	font-size: 1.1rem;
	opacity: 0.9;
	margin-bottom: 40px;
}

/* Container que segura os cards */
.menu-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* Mantém 2 colunas */
	gap: 15px;
	width: 100%; /* Ocupa a largura total do pai */
	max-width: 400px; /* Limite para não ficar largo demais em tablets */
	margin: 0 auto; /* Centraliza o bloco na horizontal */
	padding: 0; /* Remove qualquer padding interno que possa empurrar os cards */
	box-sizing: border-box;
}

.menu-card {
	margin: 0;
	width: 100%; /* Faz o card ocupar exatamente sua parte na grid */
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 20px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

	.menu-card:active {
		transform: scale(0.95);
		background: rgba(255, 255, 255, 0.3);
	}

	.menu-card i {
		color: #ffffff !important;
		font-size: 2rem;
		transition: all 0.3s ease;
		display: block;
		margin-bottom: 8px;
	}

	/* Efeito ao passar o mouse ou tocar (Mobile) */
	.menu-card:not(.disabled-card):hover i {
		color: #00e5ff !important; /* Muda para Ciano no destaque */
		transform: scale(1.1);
		filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6));
	}

	.menu-card span {
		font-weight: 600;
		font-size: 1rem;
		line-height: 1.2;
	}

	.menu-card small {
		font-size: 0.75rem;
		opacity: 0.8;
		margin-top: 5px;
		font-weight: 400;
	}

.header-section {
	display: grid;
	grid-template-columns: 50px 1fr 50px; /* Cria 3 colunas: botão, título, espaço vazio */
	align-items: center; /* Centraliza verticalmente todos os itens */
	margin-bottom: 25px;
	width: 100%;
	padding-top: calc(10px + env(safe-area-inset-top)); /* Isso cria um espaçamento inteligente no topo apenas em dispositivos que precisam */
}

/* Evita que botões na parte inferior fiquem atrás da barra de gestos do iPhone */
.action-container {
	padding-bottom: env(safe-area-inset-bottom);
}

.btn-back {
	background: transparent;
	border: none;
	color: white;
	font-size: 1.8rem; /* Um pouco maior para facilitar o toque */
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* Seletor de Treino */
.training-selector {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.training-option {
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid transparent;
	border-radius: 20px;
	padding: 15px;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	cursor: pointer;
}

	.training-option.selected {
		background: rgba(255, 255, 255, 0.3);
		border-color: white;
		transform: translateY(-5px);
	}

.icon-wrapper img {
	width: 70px;
	height: auto;
	margin-bottom: 10px;
	/* Filtro para deixar a imagem branca ou destacar se necessário */
}

.training-option span {
	display: block;
	font-weight: bold;
	font-size: 0.9rem;
}

.check-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #33CC99;
	background: white;
	border-radius: 50%;
	font-size: 1.2rem;
}

/* Timer Display */
.timer-display {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	padding: 10px;
	margin-bottom: 15px;
}

.time-value {
	font-size: 2.5rem;
	font-weight: 800;
	font-family: 'Courier New', Courier, monospace; /* Estilo digital */
}

/* Botão Salvar (Padronizado) */
.btn-save {
	background: white !important;
	color: #33CC99 !important;
	border: none;
	border-radius: 30px;
	padding: 15px;
	width: 100%;
	font-weight: 800;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	margin-top: 10px;
}

	.btn-save:disabled {
		opacity: 0.7;
	}

.unified-timer-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 10px 0;
	/* Se o componente for muito pequeno, podemos dar um zoom nele aqui */
	/* transform: scale(1.1); */
}

/* Garante que a glass-card que envolve o relógio seja bem acabada */
/*.glass-card {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 25px;
	padding: 25px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	width: 100%;
	box-sizing: border-box;
}*/

.alert {
	border-radius: 15px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	color: white; /* Ou uma cor escura se o fundo for muito claro */
	font-weight: 600;
}

.alert-success {
	background: rgba(40, 167, 69, 0.7) !important;
}

.alert-danger {
	background: rgba(220, 53, 69, 0.7) !important;
}

/* Reaproveita o fundo gradiente e header das telas anteriores */

.ranking-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 40px;
}

.ranking-item {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 15px;
	padding: 15px;
	display: flex;
	align-items: center;
	color: #333;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	transition: transform 0.2s;
}

	/* Destaque para o meu usuário na lista */
	.ranking-item.is-me {
		display: flex;
		align-items: center;
		padding: 12px;
		margin-bottom: 10px;
		border-radius: 12px;
		/* Fundo escuro semi-transparente para destacar o texto branco */
		background: rgba(0, 0, 0, 0.4);
		border: 1px solid rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px); /* Efeito de desfoque moderno */
		min-height: 75px;
		transition: transform 0.2s;
	}

.ranking-pos {
	width: 40px;
	font-weight: 800;
	font-size: 1.1rem;
	display: flex;
	justify-content: center;
	color: #666;
}

.ranking-info {
	display: flex;
	flex-direction: column; /* Coloca os detalhes embaixo do nome */
	flex-grow: 1;
	margin-left: 15px;
}

.ranking-name {
	color: #FFFFFF !important;
	font-weight: bold;
	font-size: 1.1rem;
	display: block;
}

.ranking-details {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.badge-detail {
	color: rgba(255, 255, 255, 0.9) !important; /* Branco quase puro */
	background: rgba(255, 255, 255, 0.15);
	font-weight: 500;
	font-size: 0.8rem;
}

	/*.badge-detail i {
		font-size: 0.8rem;
	}*/

/* Cores específicas para os ícones */
.bi-lightning-charge {
	color: #ffa502;
}
/* Musculação */
.bi-wind {
	color: #70a1ff;
}
/* Aeróbica */

.ranking-points strong {
	font-size: 1.2rem;
	color: #00d2ff;
}

.ranking-points strong {
	color: #00d2ff; /* Ciano para destaque */
}

	.ranking-points small {
		color: rgba(255, 255, 255, 0.6);
	}
	.ranking-points strong {
		font-size: 1.2rem;
	}

/* Cores das Medalhas */
.medal-1 {
	color: #FFD700;
	font-size: 1.5rem;
}
/* Ouro */
.medal-2 {
	color: #C0C0C0;
	font-size: 1.3rem;
}
/* Prata */
.medal-3 {
	color: #CD7F32;
	font-size: 1.2rem;
}
/* Bronze */

/* Custom Select para combinar com o tema */
.custom-input {
	background: rgba(255, 255, 255, 0.9) !important;
	border-radius: 12px !important;
	border: none !important;
	font-weight: 600;
	color: #333 !important;
}

.custom-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #512bd4; /* Cor roxa padrão do .NET MAUI */
	color: white;
	border-radius: 8px;
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	transition: background-color 0.2s;
}

	.custom-button:hover {
		background-color: #4023a8;
	}

.upload-container {
	margin: 20px 0;
}

.chart-container {
	max-width: 90vw; /* Garante que o gráfico não escape da largura da tela do celular */
	margin: 0 auto;
}
.disabled-card {
	opacity: 0.6; /* Fica mais clarinho/apagado */
	filter: grayscale(1); /* Remove as cores */
	cursor: not-allowed !important; /* Mostra o ícone de 'proibido' no mouse */
	pointer-events: all; /* Permite o mouse interagir para mostrar o cursor, mas o clique tratamos no C# */
}

	/* Opcional: remover o efeito de hover se estiver desabilitado */
	.disabled-card:hover {
		transform: none !important;
		box-shadow: none !important;
	}

/* Overlay que escurece o fundo */
/* O Overlay cobre a tela toda e centraliza o card */
.modal-overlay {
	position: fixed; /* Fixa na tela, não no container */
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7); /* Fundo escuro */
	backdrop-filter: blur(5px); /* Efeito Glassmorphism */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999; /* Garante que fica na frente de TUDO */
}

.modal-content.glass-card {
	width: 90%;
	max-width: 350px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	padding: 25px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Caixa do Modal */
.modal-content {
	background: rgba(26, 26, 46, 0.95);
	backdrop-filter: blur(15px);
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 25px;
	width: 85%;
	max-width: 400px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.modal-icon {
	font-size: 3rem; /* Ícone grande */
	margin-bottom: 15px;
	color: #dc3545; /* Cor vermelha para combinar com o botão de confirmar */
	display: flex;
	justify-content: center;
}

.modal-content h3 {
	color: white;
	margin-bottom: 10px;
}

.modal-content p {
	color: rgba(255,255,255,0.7);
	font-size: 0.9rem;
	margin-bottom: 25px;
}

/* Botões do Modal */
.modal-actions {
	display: flex;
	justify-content: center; /* Centraliza os botões */
	gap: 15px; /* Espaço entre eles */
	margin-top: 25px;
	width: 100%;
}

.btn-confirm, .btn-cancel {
	/* O segredo está aqui */
	min-width: 100px; /* Garante que o "Sim" não fique minúsculo */
	padding: 12px 20px; /* Espaçamento interno confortável */
	border-radius: 10px;
	border: none;
	font-weight: bold;
	font-size: 0.95rem;
	cursor: pointer;
	transition: transform 0.1s, filter 0.2s;
	/* Centraliza o texto dentro do botão caso ele cresça */
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-cancel {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

	.btn-confirm:active, .btn-cancel:active {
		transform: scale(0.95); /* Feedback visual de clique */
	}

/* Opcional: Efeito de brilho no hover para o botão de confirmação */
.btn-confirm {
	color: white;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Animação de entrada */
.animate-pop-in {
	animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
	from {
		opacity: 0;
		transform: scale(0.8);
	}

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

.input-with-label {
	height: 65px !important; /* Aumenta um pouco a altura para caber o texto */
	align-items: center;
}

.input-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
}

.field-label {
	font-size: 0.75rem; /* Aumentado de 0.65 para 0.75 */
	color: #FFFFFF; /* Branco puro para contraste máximo */
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1.2px; /* Espaçamento entre letras para ajudar na leitura */
	font-weight: 700; /* Negrito para destacar */
	opacity: 0.9; /* Quase totalmente opaco */
	padding-left: 0;
	display: block;
}

.input-wrapper input[type="date"] {
	background: transparent;
	border: none;
	color: #FFFFFF; /* Garante que a data selecionada também seja branca */
	font-size: 1rem;
	width: 100%;
	outline: none;
	margin-top: 2px;
}

/* Ajuste específico para o ícone do calendário no Chrome/Android */
input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1); /* Deixa o ícone do calendário branco */
	cursor: pointer;
}

/* Estilo do ícone do olho */
.icon-eye {
	padding: 0 15px;
	color: rgba(255, 255, 255, 0.7);
	transition: 0.3s;
}

	.icon-eye:hover {
		color: #ffffff;
	}

/* Garante que o input não sobreponha o olho */
.input-group input {
	flex: 1;
	padding-right: 10px;
}

.options {
	display: flex;
	justify-content: flex-start; /* Alinha à esquerda */
	align-items: center;
	margin: 15px 0;
	padding: 0 5px;
}

	.options label {
		color: rgba(255, 255, 255, 0.9); /* Branco quase puro para leitura clara */
		font-size: 0.9rem;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px; /* Espaço entre o quadrado e o texto */
		user-select: none; /* Evita selecionar o texto ao clicar rápido */
		transition: opacity 0.2s;
	}

		.options label:hover {
			opacity: 0.8;
		}

	/* Estilizando o Checkbox (Opcional - Estilo moderno) */
	.options input[type="checkbox"] {
		appearance: none; /* Remove o visual padrão do sistema */
		width: 18px;
		height: 18px;
		border: 2px solid rgba(255, 255, 255, 0.5);
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.1);
		cursor: pointer;
		position: relative;
		transition: all 0.3s;
	}

		.options input[type="checkbox"]:checked {
			background-color: #2b7bc9; /* Cor principal do seu DCR Fit */
			border-color: #2b7bc9;
		}

			/* Ícone de check quando marcado */
			.options input[type="checkbox"]:checked::after {
				content: '✔';
				position: absolute;
				color: white;
				font-size: 12px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.1) inset !important;
	-webkit-text-fill-color: white !important;
}
.btn-manage {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #00d2ff; /* Cor de destaque */
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto; /* Empurra para a direita */
}

@keyframes pulse-animation {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.1);
		opacity: 0.7;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.profile-header {
	display: flex;
	align-items: center;
	gap: 15px;
}

.avatar-container {
	position: relative;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(255,255,255,0.5);
	cursor: pointer;
	transition: all 0.3s ease;
	background: #444;
	padding: 3px;
}
	.avatar-container:hover {
		transform: scale(1.05);
		border-color: #00d2ff;
		box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
	}
		.avatar-container:hover .edit-overlay {
			background: rgba(0, 0, 0, 0.4); /* Escurece levemente para o ícone aparecer */
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0.8; /* Sempre visível ou apenas no hover */
		}

.profile-pic {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-placeholder {
	font-size: 2.5rem;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

/*.edit-overlay {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgba(0,0,0,0.4);
	color: white;
	font-size: 0.8rem;
	text-align: center;
	padding-bottom: 2px;
	opacity: 0;
	transition: opacity 0.3s;
}

.avatar-container:hover .edit-overlay {
	opacity: 1;
}*/

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}
/* Container que ocupa a tela toda */
.splash-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	position: fixed; /* Garante que fique sobreposto a tudo */
	top: 0;
	left: 0;
	background: radial-gradient(circle, #00224d 0%, #000b1a 100%);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.splash-content {
	text-align: center;
}

.splash-title {
	font-size: 2.5rem;
	color: #ffffff;
	margin-bottom: 10px;
	font-weight: bold;
	letter-spacing: -1px;
	text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); /* Efeito de brilho neon no texto */
}

.splash-text {
	color: #888;
	font-size: 0.9rem;
	margin-top: 15px;
}

/* Animação de pontinhos carregando */
.loader-dots span {
	width: 8px;
	height: 8px;
	margin: 0 4px;
	background-color: var(--primary-color);
	box-shadow: 0 0 8px var(--primary-color); /* Pontinhos brilhantes */
	border-radius: 50%;
	display: inline-block;
	animation: dots 1.4s infinite ease-in-out both;
}

	.loader-dots span:nth-child(1) {
		animation-delay: -0.32s;
	}

	.loader-dots span:nth-child(2) {
		animation-delay: -0.16s;
	}

@keyframes dots {
	0%, 80%, 100% {
		transform: scale(0);
	}

	40% {
		transform: scale(1.0);
	}
}
.splash-logo {
	width: 150px; /* Ajuste o tamanho conforme desejar */
	max-width: 80%;
	height: auto;
	margin-bottom: 20px; /* Dá espaço entre o logo e o título */
	animation: fadeIn 1.5s ease-in-out; /* Efeito suave ao aparecer */
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

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

/* Container principal que ocupa a tela toda */
.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #1a1a1a; /* Cor de fundo do seu app */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999; /* Garante que fica em cima de tudo */
}

/* Estilo da Logo com animação */
.loading-logo {
	width: 120px;
	height: auto;
	margin-bottom: 20px;
	animation: pulse 1.5s infinite ease-in-out;
}

/* Texto de "Autenticando..." */
.loading-text {
	color: #ffffff;
	font-size: 1.1rem;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	letter-spacing: 1px;
	opacity: 0.8;
}

/* Animação de Pulsação */
@keyframes pulse {
	0% {
		transform: scale(0.95);
		opacity: 0.7;
	}

	50% {
		transform: scale(1.05);
		opacity: 1;
	}

	100% {
		transform: scale(0.95);
		opacity: 0.7;
	}
}

/* Spinner opcional (se não quiser usar logo) */
.loader {
	border: 4px solid rgba(255, 255, 255, 0.1);
	border-left-color: #00e5ff; /* Cor destaque do seu app */
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
	margin-bottom: 15px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Card de Destaque - Tema DCR Fit */
.highlight-card {
	background: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 20px;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	margin-bottom: 10px;
	transition: transform 0.3s ease;
}

	/* O Ícone de Halter com efeito Neon */
	.highlight-card i {
		font-size: 2.5rem;
		color: #00e5ff;
		margin-bottom: 8px;
		filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
		transition: transform 0.3s ease;
	}

	.highlight-card span {
		color: #ffffff;
		font-weight: 700;
		font-size: 1.1rem;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.highlight-card small {
		color: #888;
		font-size: 0.75rem;
		margin-top: 4px;
	}

	.highlight-card:hover svg {
		animation: running-effect 0.4s infinite alternate;
	}

@keyframes running-effect {
	from {
		transform: translateX(-2px) rotate(-5deg);
	}

	to {
		transform: translateX(2px) rotate(5deg);
	}
}

	/* Efeito de Hover/Ativo (Toque no Celular) */
	.highlight-card:not(.disabled-card):hover,
	.highlight-card:not(.disabled-card):active {
		border-color: #00e5ff;
		background: #222;
		transform: translateY(-4px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
	}

		.highlight-card:not(.disabled-card):hover i {
			transform: rotate(-15deg) scale(1.1);
		}

/* Estilo para quando estiver desabilitado */
.disabled-card {
	opacity: 0.4;
	cursor: not-allowed;
	border-style: dashed;
}

/* Animação de pulsação de luz */
@keyframes skeleton-glow {
	0%

{
	background-position: -200% 0;
}

100% {
	background-position: 200% 0;
}

}
.skeleton-card {
	background: #1a1a2e;
	border-radius: 15px;
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid rgba(255,255,255,0.05);
}

.skeleton-item {
	background: linear-gradient(90deg, #252545 25%, #2d2d5a 50%, #252545 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	border-radius: 4px;
}

.skeleton-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.skeleton-text {
	width: 120px;
	height: 15px;
}

.skeleton-image {
	width: 100%;
	height: 300px;
	border-radius: 10px;
}

@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}