/* ====== Reset básico y tipografía ====== */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Arial, sans-serif;
	background: #fff; /* Cambia de #f8f9fa a #fff */
	color: #222;
}

a {
	color: #8B1538;
	text-decoration: none;
}

	a:hover {
		color: #7a1633;
		text-decoration: underline;
	}

/* ====== Layout general ====== */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.layout-maxwidth {
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
}

.container-fluid {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* ====== Header y Footer ====== */
.header-card {
	background: #fff;
	border-radius: 16px 16px 0 0;
	border: none;
}

.footer-card {
	background: linear-gradient(135deg, #8B1538 0%, #7a1633 100%);
	color: #fff;
	border-radius: 0 0 16px 16px;
	border: none;
}

footer .info-item {
	background: transparent;
	border: none;
	color: #fff;
}

footer .info-label, footer .info-value {
	color: #fff;
}

footer a, footer a:hover {
	color: #fff !important;
	text-decoration: underline;
}

/* ====== Barra de progreso multicolor ====== */
.progress-bar-multicolor {
	height: 6px;
	width: 100%;
	background: linear-gradient(90deg, #8B1538 0%, #cd1f5c 50%, #e13d6f 100%);
	border-radius: 0 0 6px 6px;
}

/* ====== Cards y sombras ====== */
.card {
	border-radius: 16px;
	border: none;
	box-shadow: 0 2px 12px rgba(0,0,0,0.07);
	margin-bottom: 1.5rem;
}

.card-header {
	border-radius: 16px 16px 0 0;
	font-weight: 600;
}

.card-body {
	background: #fff;
	border-radius: 0 0 16px 16px;
}

/* ====== Botones ====== */
.btn-primary, .bg-primary {
	background: linear-gradient(135deg, #8B1538 0%, #7a1633 100%) !important;
	border: none !important;
	color: #fff !important;
}

	.btn-primary:hover, .btn-primary:focus {
		background: #7a1633 !important;
		color: #fff !important;
	}

.btn-outline-secondary {
	border: 2px solid #6c757d;
	color: #6c757d;
	background: #fff;
}

	.btn-outline-secondary:hover {
		background: #6c757d;
		color: #fff;
	}

.btn-warning {
	color: #fff !important;
	background: #ffc107 !important;
	border: none !important;
}

	.btn-warning:hover {
		background: #e0a800 !important;
	}

.btn-malva {
	background: #8B5A96;
	color: #fff;
	border: none;
}

	.btn-malva.active, .btn-malva:active {
		box-shadow: 0 0 10px #8B5A9655;
		font-weight: bold;
	}

.btn-outline-malva {
	color: #8B5A96;
	border: 2px solid #8B5A96;
	background: #fff;
}

	.btn-outline-malva:hover {
		background: #8B5A96;
		color: #fff;
	}

/* ====== Formularios ====== */
.form-control, .form-control-modern, .form-select {
	border-radius: 8px;
	border: 2px solid #e9ecef;
	background: #fff;
	transition: border-color 0.2s;
}

	.form-control:focus, .form-control-modern:focus, .form-select:focus {
		border-color: #8B1538;
		box-shadow: 0 0 0 0.15rem rgba(139,21,56,0.15);
	}

.input-group-text {
	background: #f8f9fa;
	border: 2px solid #e9ecef;
	border-right: none;
	color: #8B1538;
}

.input-group:focus-within .input-group-text {
	border-color: #8B1538;
	color: #8B1538;
}

.input-validation-error {
	border-color: #dc3545 !important;
	background: #f8d7da !important;
}

.validation-message, .text-danger {
	color: #dc3545 !important;
	font-size: 0.95em;
}

/* ====== Utilidades de color ====== */
.text-primary, .link-primary {
	color: #8B1538 !important;
}

.bg-primary {
	background: #8B1538 !important;
}

.text-burgundy {
	color: #8B1538 !important;
}

.bg-burgundy {
	background: #8B1538 !important;
}

.bg-gradient-burgundy {
	background: linear-gradient(135deg, #8B1538 0%, #7a1633 100%) !important;
}

.bg-success-subtle {
	background: #eafaf1 !important;
}

.text-success {
	color: #198754 !important;
}

.bg-success {
	background: #198754 !important;
}

.text-muted {
	color: #6c757d !important;
}

/* ====== Componentes visuales ====== */
.logo-container img {
	max-height: 80px;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.header-info h5, .header-info p {
	margin-bottom: 0.25rem;
}

.step-icon {
	width: 70px;
	height: 70px;
	background: #f8f9fa;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem auto;
}

	.step-icon i {
		color: #8B1538;
		font-size: 2rem;
	}

.progressbar-turno .progressbar {
	counter-reset: step;
}

.progressbar-turno .step-circle {
	width: 36px;
	height: 36px;
	line-height: 36px;
	border-radius: 50%;
	display: inline-block;
	font-weight: bold;
	font-size: 1.1rem;
}

.progressbar-turno .progressbar li.active .step-circle {
	background: #800020 !important;
	color: #fff !important;
}

.progressbar-turno .progressbar li:not(.active) .step-circle {
	background: #e9ecef;
	color: #adb5bd;
}

.progressbar-turno .progressbar li {
	position: relative;
}

	.progressbar-turno .progressbar li:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 18px;
		left: 50%;
		width: 100%;
		height: 4px;
		background: #e9ecef;
		z-index: 0;
		transform: translateX(18px);
	}

	.progressbar-turno .progressbar li.active:not(:last-child)::after {
		background: #800020;
	}

/* ====== Info y alertas ====== */
.info-item {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 1rem;
}

.info-label {
	font-size: 0.9em;
	font-weight: 600;
	color: #6c757d;
	margin-bottom: 2px;
}

.info-value {
	font-size: 1em;
	color: #495057;
}

.highlight-item .info-value {
	color: #8B1538 !important;
	font-weight: 700;
}

.alert {
	border-radius: 12px;
	border: none;
	font-size: 1em;
}

.alert-success {
	background: #eafaf1;
	color: #198754;
}

.alert-danger {
	background: #f8d7da;
	color: #842029;
}

/* ====== Estados vacíos y utilidades ====== */
.empty-state {
	color: #adb5bd;
	font-size: 1.1em;
}

.reservation-card .success-icon i {
	color: #8B1538;
	font-size: 1.5em;
}

.features-list .feature-item {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.action-button {
	font-size: 1.1em;
	font-weight: 600;
	border-radius: 2em;
}

/* ====== Destacado de selección de fecha y hora en Paso 3 ====== */
.date-btn,
.time-btn {
	border-radius: 12px;
	padding: 8px 16px;
	min-width: 90px;
	border: 2px solid #8B1538;
	background: #fff;
	color: #8B1538;
	font-weight: 500;
	transition: all 0.2s;
	margin-bottom: 6px;
}

	.date-btn:hover,
	.time-btn:hover {
		background: #f8e6ed;
		color: #7a1633;
		border-color: #7a1633;
	}

	.date-btn.active,
	.time-btn.active {
		background: linear-gradient(135deg, #8B1538 0%, #7a1633 100%);
		color: #fff !important;
		border-color: #8B1538;
		box-shadow: 0 0 0 2px #e9c6d1;
		font-weight: bold;
		transform: scale(1.07);
		z-index: 2;
	}

/* ====== Responsive ====== */
@media (max-width: 768px) {
	.header-card, .footer-card, .card {
		border-radius: 10px !important;
	}

	.step-icon {
		width: 50px;
		height: 50px;
	}

	.logo-container img {
		max-height: 50px;
	}

	.layout-maxwidth {
		padding: 0 0.5rem;
	}
}

/* ====== Animaciones ====== */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

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

.main-content-bg {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 2px 16px rgba(0,0,0,0.06);
	margin-top: 24px;
	margin-bottom: 24px;
	padding: 0;
}

@media (max-width: 768px) {
	.main-content-bg {
		border-radius: 8px;
		margin-top: 12px;
		margin-bottom: 12px;
	}
}

.swal2-border-radius {
	border-radius: 1.2em !important;
}