/* ESTILOS GENERALES */
/* Añadir aquí todo lo que se sobreescriba que pueda afectar a otras plantillas que tengan includido el public.css */
body:not(.login) {
	h1, h2, h3, h4, h5, h6 {
		color: var(--tblr-primary);
	}

	.btn {
		border-radius: 4px;
		font-size: 16px;
		border: none !important;
	}

	.btn.btn-custom{
		border-radius: 4px !important;
		padding: 8px 18px !important;
		font-size: 16px !important;
		font-weight: normal !important;
		border:0 !important;
	}
	.btn-box-shadow{
		box-shadow: 0 0 4px 0 #00000033 !important;
	}
	.btn.btn-round {
		border-radius: 40px !important;
	}

	.btn-group{
		box-shadow: none !important;
	}

	.input-group.group-icon {
		.form-control {
			left: -2px;
			border-left: 0 !important;
		}

		.input-group-text {
			min-height: 40px;
			color: #fff;
			background-color: var(--tblr-primary-light);
			border: 1px solid var(--tblr-primary-light);
		}
	}

	.navbar {
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
		padding: 0 15px;
	}

	.navbar-brand {
		color: #3d3d3d !important;
		text-shadow: 1px 1px 3px #fff;
	}

	.modal-footer {
		background: #dedede;
		padding-top: 9px;
	}

	.card{
		border-radius: 8px !important;
		background: #FFFFFFCC;
	}

	.footer {
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 1.2rem 0 !important;
		text-shadow: 1px 1px 3px #000;
	}
}

.fa.fa-outline {
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: var(--tblr-primary) !important;
	color: transparent;
}
.btn-outline-primary {
	color: white;
}

.btn-group {
	overflow: hidden;

	label {
		background-color: #e0eaf2;
		border: none;
	}
}

/* CLASES PERSONALIZADAS */
/* Añadir aquí las clases que pueden ser reutilizadas en diferentes secciones */
.page.page-grey {
	background: #eeeeee;

	.card {
		box-shadow: 0 0 4px 0 #00000033 !important;
		border-radius: 8px;
	}
}
.page.page-color {
	background: #bed1e7;
}

.page.page-background {
	background: url("../../images/public/background-6f6b766a9fae87babaff6da92aeb1a8b.png") no-repeat center center fixed;
	background-size: cover;
}

.container-white {
	background: rgba(255, 255, 255, 0.9) !important;
	color: #000;
	border-radius: 8px;
	padding: 15px;
}

.container-white-60 {
	background: rgba(255, 255, 255, 0.8) !important;
	color: #000;
	border-radius: 8px;
	padding: 15px;
}

.separator {
	width: 160px;
	height: 3px;
	background-color: var(--tblr-primary);
	margin: 0 auto;
}

.content-block {
	a {
		color: #3d3d3d !important;
		text-decoration: underline;
	}

	.form-control {
		color: #3d3d3d !important;
	}
}

.h-11{
	height: 11rem !important;
}

.number-spinner {
	a {
		border-radius: 50px !important;
		width: 24px !important;
		height: 34px !important;
		font-size: 14px !important;
		cursor: pointer;
		color: #ffffff !important;
		text-decoration: none !important;
	}

	input {
		height: 40px;
		width: 55px;
		text-align: center;
		font-size: 24px;
		border: 1px solid #888;
		border-radius: 6px;
		display: inline-block;
		vertical-align: middle;
		margin: 0 4px;
	}
}

.progress-container {
	margin-bottom: 20px;
	background: #dce3e7;
	border-radius: 8px;
	font-size: 12px;
	color: #ababab;
	padding: 10px 0;
	display: flex;

	li {
		list-style-type: none;
		flex: 1;

		&.active {
			color: var(--tblr-primary);
			font-weight: bold;
		}

		&:before {
			width: 30px;
			height: 30px;
			line-height: 26px;
			display: block;
			font-size: 14px;
			color: #ffffff;
			background: #ababab;
			border-radius: 50%;
			margin: 0 auto 0 auto;
			padding: 2px;
			overflow: hidden;
		}

		&.active:before {
			background: var(--tblr-primary);
		}

		&:nth-child(1):before {
			content: "1";
		}

		&:nth-child(2):before {
			content: "2";
		}
	}
}

.cabecera-reserva {
	background: #f5f8fb;
	padding: 10px 10px 0 10px;
}

.btn.btn-reserva {
	border-radius: 50px !important;
	height: 36px;
	width: 36px;
	border: none;
	box-shadow: 1px 2px 4px #cdcdcd;
	font-size: 16px;
}

.btn-content {
	display: flex;
	align-items: center;
	gap: 6px; /* Espacio entre el ícono y el texto */
}

.btn-content img {
	height: 22px; /* Ajusta el tamaño según el diseño */
	width: auto;
	display: block;
}

.svg-white{
	filter: invert(1) brightness(2);
}

.bg-light-blue{
	background: #dbe3e6;
}


/* Contenedor del video de la cámara */
.camera-preview-container {
	position: fixed; /* Ocupa toda la pantalla */
	top: 80px;
	left: 0px;
	width: 100%;
	height: auto;
	max-height: 500px;
	z-index: 10;
}

/* Overlay oscuro que cubre el fondo (entorno) */
.camera-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9); /* Fondo oscuro */
	z-index: 6; /* El overlay está por debajo del video, pero encima del fondo */
	pointer-events: none; /* Esto asegura que el overlay no interfiera con la cámara */
}

/* Video de la cámara centrado */
.camera-preview {
	position: relative;
	z-index: 2;
	height: 100%;
	object-fit: contain !important;
	max-height: 500px !important;
	margin:0 auto!important;
	text-align: center !important;
	width: 90% !important;
}


/* Estilos para las secciones públicas */
.section {
	.page {
		display: flex;
		padding-bottom: 120px;
	}

	.page-body {
		margin: 0;
		padding: 20px 0;
		flex: 1;
	}

	#status-text {
		transition: color 0.3s ease;
	}

	label .grayscale {
		filter: grayscale(1);
		opacity: 0.3;
	}

	.slide-escena>img {
		filter: invert(36%) sepia(22%) saturate(1322%) hue-rotate(170deg) brightness(93%) contrast(90%);
	}

	.btn-check:checked + label img.grayscale {
		filter: none;
		opacity: 1;
	}

	#btnDnd:checked + label {
		background-color: #bf0000;
		border-color: #bf0000;
	}

	#btnLlamar:checked + label {
		background-color: #337ba3;
		border-color: #337ba3;
	}

	#btnLimpiar:checked + label {
		background-color: #008000;
		border-color: #008000;
	}

	.block-menu {
		position:fixed;
		bottom:0;
		left:0;
		width: 100%;
		box-shadow: 0px -2px 6px #d5d5d5;
		z-index: 200;
	}

	&.servicios, &.promociones, &.eventos {
		.card {
			border-radius: 8px;
			background-size: cover;
			background-position: center;
			background-color: transparent !important;

			.card-title {
				background-color: rgba(0, 0, 0, 0.5);
				color: #FFF;
				font-size: 18px;
			}
		}
	}

	&.servicio, &.promocion, &.evento {
		.service-header, .promocion-header, .evento-header {
			background-size: cover;
			background-position: center;
			height: 200px;

			h5 {
				background-color: rgba(0, 0, 0, 0.5);
				color: #FFF;
				font-size: 18px;
			}
		}
	}

	&.llaves {
		.text-code {
			font-size: 3rem;
			font-family: monospace;
			letter-spacing: 5px;
		}
	}

	&.consumos {
		.consumos-header {
			background-size: cover;
			background-position: center;
			height: 125px;

			h5 {
				color: #FFF;
				font-size: 18px;
			}
		}
	}
}