/************ habitacions *************/

.cuarto {
	max-width: 100%;
	font-size: 16px;
	line-height: 24px;
	padding: 12px;
	border: none;
	border-radius: 5px;
	background-color: var(--gris);
	color: var(--blanco);
	text-align: center;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.cuarto.disponible { background:var(--verde); }
.cuarto.nodisponible { background:var(--gris); }

.cuarto:hover {
	background-color: var(--naranja);
}

.cuarto.nodisponible:hover {
	background-color: var(--gris);
}

/************ billetes *************/

.buttons {
	display: grid;
	grid-auto-rows: minmax(10px, auto);
	grid-gap: 10px;
	/*grid-auto-flow: dense;*/
	padding: 0px;
	margin-bottom: 10px;
	text-align: center;
	grid-template-columns: 20px 1fr;
}

.billete {
	max-width: 100px;
	font-size: 16px;
	line-height: 26px;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	background-color: var(--gris);
	color: var(--blanco);
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.billete:hover {
	background-color: var(--naranja);
}

.billete .restar {
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: red;
	color: white;
	border: none;
	padding: 3px 5px;
	border-radius: 3px;
	font-size: 12px;
	cursor: pointer;
}

.billete .restar:hover {
	background-color: darkred;
}

.reset {
	display: inline-block;
	padding: 10px;
	background-color: var(--grisclaro2);
	border: none;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	color: var(--rojo);
	font-weight: bold;
}

.reset:hover {
	background-color: var(--rojo);
	color: var(--blanco);
}


/************ botones *************/

button,
button.cielo, button.rojo,
a.boton {
	display: block;
	background-color: var(--naranja);
	color: #fff;
	border-radius: 4px;
	font-weight: bold;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
	padding: 8px 10px;
	margin: 0 auto 0;
	}
button:hover{ background: var(--negro); }

button.cielo { background: var(--cielo); }
button.rojo { background: var(--rojo); }

button.mas, button.gris, button.verde, 
button.guardar, button.editar, button.eliminar, 
a.guardar, a.editar, a.eliminar,
a.negro, a.gris, a.azul, a.cielo, a.rojo, a.amarillo, a.naranja, a.verde, a.morado, a.rosa, a.cafe {
	display: block;
	position: relative;
	padding: 12px 16px;
	margin-bottom: 5px;
	color: #ffffff;
	border-radius: 6px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	background-color: var(--negro);
	z-index: 1;
	-webkit-box-shadow: 0 2px 0 0 rgba(189, 189, 189, 0.5), 0 4px 0 0 rgba(189, 189, 189, 0.5);
	box-shadow: 0 2px 0 0 rgba(189, 189, 189, 0.5), 0 4px 0 0 rgba(189, 189, 189, 0.5);
	-webkit-transform: translateY(0);
	transform: translateY(0);
	border: none;
	text-transform: uppercase;
}
	a.boton:hover, a.color1:hover, a.waze:hover { 
		top: 3px;
		background-color: var(--contraste2);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,var(--negro)),to(var(--color1)));
		background-image: linear-gradient(var(--negro) 10%,var(--color1) 100%);
		-webkit-box-shadow: none; 
		-moz-box-shadow: none; 
		box-shadow: none;
		transition: all 0.5s;
	}
a.guardar, a.editar, a.eliminar, 
a.negro, a.gris, a.azul, a.cielo, a.rojo, a.amarillo, a.naranja, a.verde, a.morado, a.rosa, a.cafe { padding: 3px 5px; }

button.mas:hover, button.gris:hover, button.verde:hover, 
button.guardar:hover, button.editar:hover,
a.guardar:hover, a.editar:hover { background: var(--cielo); }

a.cielo:hover { background: var(--negro); }
a.rojo:hover { background: var(--negro); }
a.morado:hover { background: var(--negro); }
a.rosa:hover { background: var(--negro); }

button.mas { background: var(--rojo2); }
button.gris { background: var(--gris9); }
button.verde { background: var(--verde); }
button.eiliminar:hover, a.eliminar:hover { background: var(--negro); }

button.centro { margin: 0 auto 0; }

a.guardar, button.guardar { background: var(--verde); }
a.editar, button.editar { background: var(--cielo); }
a.eliminar, button.eliminar { background: var(--rojo); }
a.imprimir {
	background: var(--cielo);
	padding: 5px 8px;
	color: var(--blanco);
	border-radius: 4px;
	font-size: 26px;
	font-weight: bold;
	line-height: 36px;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
	margin: 0;
}
a.imprimir:hover { color: var(--dorado); background: var(--negro); }

a.codigoqr, a.terreno {
	padding: 5px 8px;
	font-size: 22px;
	font-weight: bold;
	line-height: 36px;
	color: var(--negro);
	background: var(--dorado);
	border-radius: 4px;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
a.terreno { background: var(--amarillo); }
a.codigoqr:hover { color: var(--negro); background: var(--naranja); }
a.terreno:hover { color: var(--negro); background: var(--naranja); }

a.accion {
	background: var(--naranja);
	padding: 8px 14px;
	color: var(--blanco);
	border-radius: 4px;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
	margin: 0 auto 0;
	display: block;
	width: 100px;
}
a.accion:hover { color: var(--dorado); background: var(--marino); }

a.boton { width: 30px; padding: 5px; background: var(--fiuxa); }
a.boton:hover { background: var(--rata); }

a.activo { color: var(--rojo); }

a.marino { background: var(--marino); color: var(--blanco); }
a.azul { background: var(--azul); color: var(--blanco); }
a.cielo { background: var(--cielo); color: var(--blanco); }
a.guinda { background: var(--guinda); color: var(--blanco); }
a.rojo { background: var(--rojo); color: var(--blanco); }
a.rosa { background: var(--rosa); color: var(--blanco); }
a.violeta { background: var(--violeta); color: var(--blanco); }
a.morado { background: var(--morado); color: var(--blanco); }
a.cafe { background: var(--cafe); color: var(--blanco); }
a.naranja { background: var(--naranja); color: var(--blanco); }
a.amarillo { background: var(--amarillo); color: var(--blanco); }
a.verde { background: var(--verde); color: var(--blanco); }
a.negro { background: var(--negro); color: var(--blanco); }
a.rata { background: var(--rata); color: var(--blanco); }
a.gris { background: var(--gris); color: var(--blanco); }
a.gris9 { background: var(--gris9); color: var(--blanco); }
a.blanco { background: var(--blanco); color: var(--blanco); }

a.marino:hover { color: var(--blanco); }
a.azul:hover { color: var(--blanco); }
a.cielo:hover { color: var(--blanco); }
a.guinda:hover { color: var(--blanco); }
a.rojo:hover { color: var(--blanco); }
a.rosa:hover { color: var(--blanco); }
a.violeta:hover { color: var(--blanco); }
a.morado:hover { color: var(--blanco); }
a.cafe:hover { color: var(--blanco); }
a.naranja:hover { color: var(--blanco); }
a.amarillo:hover { color: var(--blanco); }
a.verde:hover { color: var(--blanco); }
a.negro:hover { color: var(--blanco); }
a.rata:hover { color: var(--blanco); }
a.gris:hover { color: var(--blanco); }
a.gris9:hover { color: var(--blanco); }
a.blanco:hover { color: var(--blanco); }

a.centro { margin: 0 auto 0; }

/************ form input label *************/

form {
	margin: 0px;
}

label.texto {
	width: auto; /* Ajustar el ancho automáticamente al contenido */
	margin: 0;
	font-size: 13px;
	text-align: left;
	white-space: nowrap; /* Evita que el texto se rompa en múltiples líneas */
		margin-right: 5px; /* Espacio entre el label y el input (ajusta según tus preferencias) */
}
label.texto strong { color: var(--naranja); }
label.textos {
	display: inline-block;
	width: 100%;
	margin: 10px 0px 0px 0px;
	font-size: 13px;
	line-height: 25px;
	text-align: left;
	color: var(--gris);
	float: left;
}
	label.radio {
		text-align: left;
		cursor: pointer;
		text-indent: 22px;
		font-size: 12px;
		color: var(--rata);
		overflow: visible;
		display: block;
		position: relative;
		margin: 0px 0px 0px 0px;
		padding-top: 0px;
	}
		label.radio strong { color: var(--negro); }
		label.radio:before {
			background: var(--plata);
			content:'';
			position: absolute;
			top: 1px;
			left: 0;
			width: 15px;
			height: 15px;
			border-radius: 100%;
		}
		label.radio:after {
			opacity: 0;
			content: '';
			position: absolute;
			width: 10px;
			height: 5px;
			background: transparent;
			top: 2px;
			left: 1px;
			border: 5px solid var(--cielo);
			border-top: none;
			border-right: none;
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

input[type=radio] {
	visibility: hidden;
}

	input[type=radio]:checked + label:after {
		opacity: 1;
	}

input[type=text], input[type=date], input[type=number], input[type=password], input[type="email"] {
	width: 100%; 
	height: 30px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-size: 13px;
	color: var(--negro);
	background: none;
	border-bottom: 1px solid var(--gris10);
}

	input[type=password] {
		margin-bottom: 10px;
	}

	input[type=text]:focus, input[type=date]:focus, input[type=number]:focus, input[type=password]:focus, input[type="email"]:focus {
		border-bottom: 1px solid var(--naranja);
	}

input[type="checkbox"] { display: none; }

	input[type="checkbox"] + label {
		display: block;
		/*position: relative;
		padding-left: 20px;
		margin: 0px 0px 10px 60px;*/
	}

	input[type="checkbox"] + label:last-child { margin-bottom: 0; }

	input[type="checkbox"] + label:before {
		content: '';
		display: block;
		width: 12px;
		height: 12px;
		border: 3px solid var(--amarillo);
		position: absolute;
		left: 0;
		top: 0;
		-webkit-transition: all .12s, border-color .08s;
		transition: all .12s, border-color .08s;
	}

	input[type="checkbox"]:checked + label:before {
		width: 12px;
		height: 5px;
		top: 2px;
		left: 2px;
		border-radius: 0;
		opacity: 1;
		background: transparent;
		border: 4px solid var(--cielo);
		border-top: none;
		border-right: none;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	input[type="checkbox"].azul:checked + label:before { border-color: var(--azul); opacity: 1; }
	input[type="checkbox"].cielo:checked + label:before { border-color: var(--cielo); opacity: 1; }
	input[type="checkbox"].verde:checked + label:before { border-color: var(--verde); opacity: 1; }
	input[type="checkbox"].rojo:checked + label:before { border-color: var(--rojo); opacity: 1; }
	input[type="checkbox"].naranja:checked + label:before { border-color: var(--naranja); opacity: 1; }
	input[type="checkbox"].morado:checked + label:before { border-color: var(--morado); opacity: 1; }
	input[type="checkbox"].rosa:checked + label:before { border-color: var(--rosa); opacity: 1; }
	input[type="checkbox"].cafe:checked + label:before { border-color: var(--cafe); opacity: 1; }

	input[type="checkbox"].azul + label:before { border-color: var(--azul); opacity: 0.2; }
	input[type="checkbox"].cielo + label:before { border-color: var(--cielo); opacity: 0.2; }
	input[type="checkbox"].verde + label:before { border-color: var(--verde); opacity: 0.2; }
	input[type="checkbox"].rojo + label:before { border-color: var(--rojo); opacity: 0.2; }
	input[type="checkbox"].naranja + label:before { border-color: var(--naranja); opacity: 0.2; }
	input[type="checkbox"].morado + label:before { border-color: var(--morado); opacity: 0.2; }
	input[type="checkbox"].rosa + label:before { border-color: var(--rosa); opacity: 0.2; }
	input[type="checkbox"].cafe + label:before { border-color: var(--cafe); opacity: 0.2; }
	
textarea {
	width: 100%;
	color: var(--negro);
	background: none;
	box-sizing: border-box;
	min-width: 50px;
	height: 25px;
	font-size: 13px;
	line-height: 18px;
	padding-left: 5px;
	margin-bottom: 8px;
	border-bottom: 1px solid #dadada;
	resize: vertical;
	}

	textarea.basic {
		width: 100%;
		color: var(--negro);
		background: none;
		box-sizing: border-box;
		font-size: 13px;
		line-height: 18px;
		padding: 0px;
		margin: 0px;
		border: none;
		resize: vertical;
		}

	textarea.formulario {
		width: 100%; 
		margin: 0px;
		padding: 5px 0px;
		font-size: 16px;
		line-height: 21px;
		color: var(--negro);
		background: none;
		box-sizing: border-box;
		border-bottom: 1px solid var(--gris10);
	}


	/* Estilos para la barra de desplazamiento cuando se desplaza */
	textarea::-webkit-scrollbar {
		width: 6px; /* Ancho de la barra de desplazamiento */
	}

	textarea::-webkit-scrollbar-thumb {
		background-color: var(--plata); /* Color de la barra de desplazamiento */
	}

	textarea::-webkit-scrollbar-track {
		background-color: none; /* Color del riel de la barra de desplazamiento */
	}

select {
	width: 100%;
	padding: 0px;
	margin: 0px;
	font-size: 13px;
	color: var(--azul);
	border: none;
	background: none;
}
	select.zona {
		color: var(--azul);
		width: 80px;
		font-size: 15px;
	}

.opcioneslinea { float: left; display: block; width: 100%; }
.opcioneslinea > div { display: inline-block; }

input.formulario, .col-formulario input {
	width: 100%; 
	height: 20px;
	margin: 0px 0 20px 0;
	padding: 5px 0px;
	font-size: 16px;
	color: var(--negro);
	background: none;
	border-bottom: 1px solid var(--gris10);
}
	.col-formulario textarea { font-size: 16px; }
	input.formulario:focus, .col-formulario input:focus, 
	.col-formulario textarea:focus {
		border-bottom: 1px solid var(--cielo);
	}

input.basic, input.basic:focus {
	margin: 0px;
	padding: 0px;
	height: 20px;
	font-size: 13px;
	background: none;
	border: none;
	color: var(--negro);
}

input.tabla, input.tabla:focus {
	margin: 0;
	padding: 0;
	font-size: 13px;
	background: none;
	border: none;
}
input.tablaform {
	width: 100%; 
	height: 20px;
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	color: var(--negro);
	background: none;
	border: none;
}

input.izquierda { text-align: left; }
input.centro { text-align: center; }
input.derecha { text-align: right; }

input.negro { color: var(--negro); }
input.gris { color: var(--gris); }
input.cielo { color: var(--cielo); }
input.violeta { color: var(--violeta); }
input.morado { color: var(--morado); }
input.naranja { color: var(--naranja); }
input.rosa { color: var(--rosa); }
input.verde { color: var(--verde); }
input.guinda { color: var(--guinda); }
input.vino { color: var(--vino); }
input.rojo { color: var(--rojo); }

input::placeholder { color: var(--gris10); }
textarea::placeholder { color: var(--gris10); }

/************ radio button custom *************/

.lbl{
	display: inline-block;
	width: 45px;
	height: 25px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 100px;
	cursor: pointer;
	position: relative;
	transition: .2s;
}
 
.lbl::after{
	content: '';
	display: block;
	width: 17px;
	height: 17px;
	background: #eee;
	border-radius: 100px;
	position: absolute;
	top: 4px;
	left: 4px;
	transition: .2s;
}
	.swtichek:checked + .lbl::after { left: 23px; }
	.swtichek:checked + .lbl { background: var(--cielo); }

	.swtichek.cafe:checked + .lbl { background: var(--cafe); }
	.swtichek.verde:checked + .lbl { background: var(--verde); }
	.swtichek.cielo:checked + .lbl { background: var(--cielo); }

	.swtichek { display: none; }

/*****/

.switch {
	display: flex;
	margin: 0px 10px;
}

.switch input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch label { 
	min-width: 40px;
	background-color: var(--alpha);
	color: var(--gris);
	font-size: 13px;
	line-height: 1;
	text-align: center;
	padding: 7px 5px 5px 5px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.1s ease-in-out;
}

.switch label:first-of-type{ border-radius: 5px 0 0 5px; }
.switch label:last-of-type { border-radius: 0 5px 5px 0; }

.switch label.Ene { border-radius: 5px 0px 0px 0px; }
.switch label.Abr { border-radius: 0px 5px 0px 0px; }
.switch label.Sep { border-radius: 0px 0px 0px 5px; }
.switch label.Dic { border-radius: 0px 0px 5px 0px; }


.switch label.Mujer, .switch label.Si { border-radius: 5px 0 0 5px; font-size: 13px; padding: 5px 10px; }
.switch label.Hombre, .switch label.No { border-radius: 0 5px 5px 0; font-size: 13px; padding: 5px 10px; }

.switch label:hover { cursor: pointer; }
.switch input:checked + label { background-color: var(--cielo); color: var(--blanco); box-shadow: none; }

.switch input:checked + label.Hombre { background-color: var(--cielo); color: var(--blanco); }
.switch input:checked + label.Mujer { background-color: var(--rosa); color: var(--blanco); }

.switch input:checked + label.Si { background-color: var(--cielo); color: var(--blanco); }
.switch input:checked + label.No { background-color: var(--gris); color: var(--blanco); }

.switch input:checked + label.blanco { background-color: var(--blanco); color: var(--negro); box-shadow: none; }
.switch input:checked + label.cafe { background-color: var(--cafe); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.azul { background-color: var(--azul); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.gris { background-color: var(--gris5); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.cielo { background-color: var(--cielo); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.rosa { background-color: var(--rosa); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.rojo { background-color: var(--rojo); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.amarillo { background-color: var(--amarillo); color: var(--negro); box-shadow: none; }
.switch input:checked + label.vino { background-color: var(--vino); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.verde { background-color: var(--verde); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.negro { background-color: var(--negro); color: var(--blanco); box-shadow: none; }
.switch input:checked + label.naranja { background-color: var(--naranja); color: var(--negro); box-shadow: none; }
.switch input:checked + label.morado { background-color: var(--morado); color: var(--blanco); box-shadow: none; }
/*
.switch label:first-of-type { border-radius: 4px 0 0 4px; }
.switch label:last-of-type { border-radius: 0 4px 4px 0; }
*/
/*--------------------------------------------------------------
# buscar
--------------------------------------------------------------*/

.buscar {
	width: 100%;
	position: relative;
	display: flex;
}

input.searchTerm {
	width: 100%;
	height: 18px;
	padding: 8px;
	border: 1px solid var(--gris);
	border-right: none;
	border-radius: 5px 0 0 5px;
	outline: none;
	color: var(--color);
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
input.searchTerm::placeholder { opacity: 1; }

button.searchButton {
	width: 40px;
	height: 36px;
	text-align: center;
	color: var(--blanco);
	cursor: pointer;
	border-radius: 0 5px 5px 0;
	border: 1px solid var(--gris);
	background: var(--cielo);
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
}
button.searchButton:hover { background: var(--azul); }