/* 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;
	}

	.btn.btn-custom{
		border-radius: 4px !important;
		padding: 4px 16px !important;
		font-size: 16px !important;
		font-weight: normal !important;
	}

	.btn.btn-round {
		border-radius: 40px !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 6px rgba(0, 0, 0, 0.5);
		padding: 0 15px;
	}

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

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

	.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: #acd3ef;
		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 5px 0 #888;
		border-radius: 5px;
	}
}
.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;
	text-shadow: 1px 1px 3px #fff;
}

.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;
	}
}

.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: 0 0 6px #9e9e9e;
}

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

/* 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;
	}

	img.grayscale {
		filter: drop-shadow(0px 100px 0 #ababab);
		transform: translateY(-100px);
		opacity: 1;
	}

	.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: -2px -2px 5px 1px #bbb;
		z-index: 200;
	}

	&.servicios, &.promociones, &.eventos {
		.card {
			border-radius: 10px;
			background-size: cover;
			background-position: center;

			.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;
			}
		}
	}
}