@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap');

body {
	padding-top: 60px;
	background-image: url('fondo.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-family: 'Outfit', sans-serif;
	color: #fff;
}

.panel-login {
	background: #1e1e1e;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	transition: all 0.3s ease;
}

.panel-login:hover {
	box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
}

.panel-login>.panel-heading {
	background: #252525;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	padding: 25px 15px;
	text-align: center;
}

.panel-login>.panel-heading a {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-login>.panel-heading a.active {
	color: #fff;
	font-weight: 600;
	font-size: 18px;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.panel-login>.panel-heading hr {
	display: none;
	/* Removed HR for a cleaner look */
}

.panel-body {
	padding: 40px;
}

.form-group {
	margin-bottom: 25px;
}

.panel-login .form-control {
	background: #2a2a2a;
	border: 1px solid #3a3a3a;
	border-radius: 12px;
	height: 50px;
	color: #fff;
	font-size: 15px;
	transition: all 0.3s ease;
	padding-left: 20px;
}

.panel-login select.form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
}

.panel-login .form-control::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.panel-login .form-control:focus {
	background: #333;
	border-color: #029f5b;
	box-shadow: 0 0 0 4px rgba(2, 159, 91, 0.1);
	outline: none;
}

/* Specific styling for select values and datepicker */
.panel-login select option {
	background: #222;
	color: #fff;
}

.btn-login,
.btn-register {
	background: linear-gradient(135deg, #029f5b 0%, #017a46 100%);
	border: none;
	border-radius: 12px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	height: 55px;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 4px 15px rgba(2, 159, 91, 0.3);
	transition: all 0.3s ease;
	width: 100%;
}

.btn-login:hover,
.btn-register:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(2, 159, 91, 0.4);
	background: linear-gradient(135deg, #03be6d 0%, #029f5b 100%);
}

.btn-login:active,
.btn-register:active {
	transform: translateY(1px);
}

/* Modal Styling */
.modal-content {
	background: rgba(30, 30, 30, 0.9);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	color: #fff;
}

.modal-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: #fff;
}

/* Datepicker adjustments */
.datepicker {
	background: rgba(30, 30, 30, 0.95) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(10px);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
	background: rgba(255, 255, 255, 0.1) !important;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
	background: rgba(255, 255, 255, 0.1) !important;
}