body {
  background: white;
}

.table-title {
  padding-bottom: 10px;
  margin: 0 0 10px;
}
.table-title h2 {
  margin: 6px 0 0;
  font-size: 22px;
}
.table-title .add-new {
float: right;
height: 30px;
font-weight: bold;
font-size: 15px;
text-shadow: none;
line-height: 13px;
}
.table-title .add-new i {
margin-right: 4px;
}

.loader {
  display: none;
}

.show-loader .loader {
  display: block;
}






/******************** wizard ***************/

body,
	html {
		height: 100%;
		margin: 0;
		font-family: 'Inter', sans-serif;
		background-color: #ffffff;
		color: #10172A;
	}

	.form-container {
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 100px;
	}

	.wizard-box {
		width: 100%;
		max-width: 420px;
	}

	.wizard-step {
		display: none;
	}

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

	h4 {
		font-size: 1.1rem;
		margin-bottom: 1.5rem;
		font-weight: 500;
		color: #10172A;
	}

	.form-label {
		font-weight: 500;
		color: #64748B;
		margin-bottom: 0.3rem;
	}

	.btn-primary {
		background-color: #10172A;
		border: none;
	}

	.btn-primary:disabled {
		background-color: #10172A;
		border: none;
	}

	.btn-outline-primary {
		border-color: #10172A;
		color: #10172A;
	}

	.btn-outline-primary:hover {
		background-color: #10172A;
		color: white;
	}

	.progress-container {
		position: fixed;
		bottom: 16px;
		left: 50%;
		transform: translateX(-50%);
		width: 300px;
		background: #e9ecef;
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.progress {
		height: 6px;
		margin: 0;
	}

	.progress-bar {
		background-color: #10172A;
	}

	.option-card {
		border: 2px solid #e2e8f0;
		border-radius: 12px;
		padding: 12px 16px;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
		display: flex;
		align-items: center;
		gap: 10px;
		user-select: none;
	}

	.option-card:hover {
		background-color: #f8fafc;
	}

	.form-check-input[type="radio"] {
		display: none;
	}

	.form-check-input[type="radio"]:checked+.option-card {
		border-color: #10172A;
		background-color: #f1f5f9;
	}

	input[type="text"],
	input[type="number"],
	input[type="email"],
	input[type="password"] {
		border: 1px solid #d1d5db;
		border-radius: 8px;
		padding: 10px 14px;
		font-size: 1rem;
		transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		background-color: #ffffff;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
	}

	input:focus {
		outline: none;
		border-color: #10172A;
		box-shadow: 0 0 0 3px rgba(16, 23, 42, 0.2);
	}

	input::placeholder {
		color: #9ca3af;
	}

	.otp-input {
		width: 48px;
		height: 52px;
		font-size: 24px;
		text-align: center;
		border: 1px solid #d1d5db;
		border-radius: 10px;
		margin-right: 10px;
		background: #fff;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
	}

	.otp-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	#successMessage {
		display: block;
		background-color: #f1f5f9;
		padding: 20px;
		border-radius: 12px;
		text-align: center;
		margin-top: 20px;
		color: #10172A;
	}



	/* Alerta estilizada */
	.floating-alert {
		position: fixed;
		top: 60px;
		/* bajó un poco más */
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
		max-width: 90%;
		width: fit-content;
		padding: 14px 24px;
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		font-size: 0.95rem;
		border-radius: 12px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		text-align: center;
		opacity: 0;
		transform: translate(-50%, -20px);
		animation: fadeOut 5s forwards;
	}

	/* Colores */
	.alert-success {
		background-color: #ecfdf5;
		color: #065f46;
		border: 1px solid #10b981;
	}

	.alert-danger {
		background-color: #fef2f2;
		color: #991b1b;
		border: 1px solid #ef4444;
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}

		80% {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}

		100% {
			opacity: 0;
			transform: translateX(-50%) translateY(-10px);
			display: none;
		}
	}