/*--------------------------------------------------------------
# input
--------------------------------------------------------------*/

select {
	padding: 0px;
	margin: 0px;
	font-size: 15px;
	color: var(--negro);
	border: none;
	background: none;
}

select.tema {
	width: 100%;
	padding: 8px 10px;
	margin-bottom: 20px;
	display: block;
	outline: none;
	color: var(--rosaclaro);
	background-color: rgba(0, 0, 0, 0.8);
	border: 1px solid var(--negro);
	border-radius: 6px;
	font-size: 17px;
}

select.tema option { padding: 6px; }
select.tema:focus { outline: none; }
select.tema option:checked {
	background-color: var(--amarillo);
	color: var(--negro);
	border-radius: 4px;
}

/* Styling for the scrollbars */
select::-webkit-scrollbar { width: 8px; }

select::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.5); }

select::-webkit-scrollbar-thumb {
	background-color: var(--amarillo);
	border-radius: 4px;
}

select::-webkit-scrollbar-thumb:hover { background: var(--amarillo); }

/* Firefox scrollbar styling */
select { scrollbar-width: thin; scrollbar-color: var(--amarillo) rgba(0, 0, 0, 0.2); }

/* Universal styling for other elements with scrollbars */
textarea::-webkit-scrollbar, div::-webkit-scrollbar { width: 8px; }

textarea::-webkit-scrollbar-track,
div::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }

textarea::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb {
	background-color: var(--amarillo);
	border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb:hover, div::-webkit-scrollbar-thumb:hover { background: var(--amarillo); }


input[type=text], input[type=date], input[type=number], input[type="email"], input[type=password],
textarea {
	padding: 6px;
	margin-bottom: 20px;
	width: 100%;
	display: block;
	border: none;
	border-radius: 6px;
	outline: none;
	color: var(--azul);
	background-color: rgba(0, 0, 0, 0.8);
	border: 1px solid var(--negro);
	font-size: 14px;
}

input::placeholder { color: var(--gris); opacity: 0.8; } /* Para navegadores WebKit (Chrome, Safari, Opera) */
input:-moz-placeholder { color: var(--gris); opacity: 0.8; } /* Para Firefox */
input:-ms-input-placeholder { color: var(--gris); opacity: 0.8; } /* Para Internet Explorer 10+ */
input::-ms-input-placeholder { color: var(--gris); opacity: 0.8; } /* Para Edge */

input.login { color:var(--blanco); }

input.basic {
	width: 100%;
	margin: 0;
	padding: 5px;
	font-size: 14px;
	background: var(--gris2);
	border: var(--rosa);
	border-radius: 3px;
	margin-bottom: 10px;
}

#form p { color:var(--naranja); }
#form input { color:var(--blanco); }
#form input::placeholder { color: var(--verde); opacity: 0.8; }
#form input:-moz-placeholder { color: var(--verde); opacity: 0.8; }
#form input:-ms-input-placeholder { color: var(--verde); opacity: 0.8; }
#form input::-ms-input-placeholder { color: var(--verde); opacity: 0.8; }

#formcita input { font-size:17px; color:var(--amarillo); }
#formcita input::placeholder { color: var(--rosaclaro); opacity: 0.8; }
#formcita input:-moz-placeholder { color: var(--rosaclaro); opacity: 0.8; }
#formcita input:-ms-input-placeholder { color: var(--rosaclaro); opacity: 0.8; }
#formcita input::-ms-input-placeholder { color: var(--rosaclaro); opacity: 0.8; }
#formcita textarea { color:var(--amarillo); }

#formquiz input { font-size:15px; color:var(--cielo); }
#formquiz input::placeholder { color: var(--rosaclaro); opacity: 0.8; }
#formquiz input:-moz-placeholder { color: var(--rosaclaro); opacity: 0.8; }
#formquiz input:-ms-input-placeholder { color: var(--rosaclaro); opacity: 0.8; }
#formquiz input::-ms-input-placeholder { color: var(--rosaclaro); opacity: 0.8; }
#formquiz textarea { font-size: 15px; color:var(--cielo); }

input.basic { margin: 0px; background: none; }

label.radio {
		cursor: pointer;
		text-indent: 25px;
		overflow: visible;
		display: inline-block;
		position: relative;
		margin: 0 0 10px 0;
		padding-top: 0px;
		color: var(--blanco);
	}

		label.radio:before {
			background: var(--cielo);
			content:'';
			position: absolute;
			top: 2px;
			left: 0;
			width: 15px;
			height: 15px;
			border-radius: 100%;
		}

		label.radio:after {
			opacity: 0;
			content: '';
			position: absolute;
			width: 8px;
			height: 4px;
			background: transparent;
			top: 4px;
			left: 2px;
			border: 4px solid var(--blanco);
			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;
	}

/*--------------------------------------------------------------
# button
--------------------------------------------------------------*/

		.btn {
			background: linear-gradient(45deg, #ff0066, #ffcc00);
			border: none;
			border-radius: 25px;
			color: white;
			padding: 15px 30px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 10px;
			cursor: pointer;
			transition: background 0.3s, transform 0.3s;
		}

		.btn:hover {
			background: linear-gradient(45deg, #ffcc00, #ff0066);
			transform: scale(1.05);
		}

		.btn:active {
			transform: scale(0.95);
		}
		
button, a.boton, a.maps, a.waze {
	display: inline-block;
	position: relative;
	padding: 10px 20px;
	margin-bottom: 10px;
	color: #ffffff;
	border-radius: 6px;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	background-color: var(--vino);
	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 { color: var(--blanco); background-color: var(--rosa); }

	button:hover, a.boton:hover, a.maps:hover, a.waze:hover { 
		top: 3px;
		background-color: var(--vino);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,var(--negro)),to(var(--azul)));
		background-image: linear-gradient(var(--negro) 10%,var(--azul) 100%);
		-webkit-box-shadow: none; 
		-moz-box-shadow: none; 
		box-shadow: none;
	}
	
a.boton:hover { color: var(--blanco); background: var(--rojo); }

button { color: var(--blanco); background-color: var(--rojo); }
button:hover { color: var(--blanco); background: var(--verde); }

a.maps { background-color: var(--rojo); }
a.maps:hover { color: var(--blanco); background: var(--negro); }

a.waze { background-color: var(--cielo); }
a.waze:hover { color: var(--blanco); background: var(--negro); }

/* botones admin */

button.guardar, button.editar, button.eliminar, button.borrar, 
a.guardar, a.editar, a.eliminar, a.borrar, a.icono, a.rojo, a.amarillo, a.naranja, a.morado, a.negro, a.verde, a.cielo, a.azul {
	display: block;
	background-color: var(--cielo);
	color: var(--blanco);
	border-radius: 4px;
	font-weight: bold;
	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.3);
	padding: 5px 8px;
	margin: 0 auto 0;
}
button:hover, button.login:hover { background: var(--azul); }

a.otro { display: inline-block; background: var(--gris); }
a.guardar, a.editar, a.eliminar, a.icono,
a.rojo, a.amarillo, a.naranja, a.morado, a.negro, a.verde, a.cielo, a.azul { padding: 5px 8px; }

a.guardar, button.guardar { background: var(--verde); }
a.editar, button.editar { background: var(--cielo); }
a.eliminar, button.eliminar { color: var(--blanco); background: var(--rojo); }

button.borrar { background: var(--gris); }

button.guardar:hover, button.editar:hover, button.borrar:hover, 
a.guardar:hover, a.editar:hover { background: var(--negro); }

button.eliminar:hover, a.eliminar:hover, 
a.rojo:hover, a.amarillo:hover, a.naranja:hover, a.morado:hover, a.negro:hover, a.verde:hover, a.cielo:hover, a.azul:hover { color: var(--blanco); background: var(--negro); }

a.rojo { background: var(--rojo); }
a.amarillo { background: var(--amarillo); }
a.naranja { background: var(--naranja); }
a.morado { background: var(--morado); }
a.verde { background: var(--verde); }
a.cielo { background: var(--cielo); }
a.azul { background: var(--azul); }
a.negro { background: var(--negro); }

a.icono  { 
	background: var(--cielo);
	font-size: 22px;
	padding: 1px 5px;
	width: 22px;
}

a.imprimir {
	background: var(--gris);
	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(--cielo); background: var(--negro); }

/*--------------------------------------------------------------
# switch
--------------------------------------------------------------*/

.switch, .switch-hr, .switch-color, .switch-cuestionario {
	display: flex;
	margin: 0px;
}

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

.switch label, .switch-hr label, .switch-color label, .switch-cuestionario label { 
	background-color: var(--gris10);
	color: var(--negro);
	font-size: 20px;
	line-height: 1.2;
	text-align: center;
	padding: 5px 10px;
	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-color label { 
	background-color: var(--gris10);
	color: var(--blanco);
	padding: 5px 3px;
}

.switch-cuestionario label { 
	width: 25%;
	background-color: var(--gris10);
	color: var(--negro);
	padding: 5px 3px;
	font-size: 16px;
}

.switch-hr label { padding: 5px 10px; }

.switch label:hover, .switch-hr label:hover, .switch-color label:hover, .switch-cuestionario label:hover { cursor: pointer; }
.switch input:checked + label, .switch-hr input:checked + label {
	background-color: var(--amarillo); box-shadow: none;
}

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

.switch-color input:checked + label { background-color: var(--cielo); color: var(--negro); box-shadow: none; }
.switch-color input:checked + label.blanco { background-color: var(--blanco); color: var(--negro); box-shadow: none; }
.switch-color input:checked + label.cafe { background-color: var(--cafe); color: var(--blanco); box-shadow: none; }
.switch-color input:checked + label.azul { background-color: var(--azul); color: var(--blanco); box-shadow: none; }
.switch-color input:checked + label.gris { background-color: var(--gris5); color: var(--blanco); box-shadow: none; }
.switch-color input:checked + label.cielo { background-color: var(--cielo); color: var(--blanco); box-shadow: none; }
.switch-color input:checked + label.rosa { background-color: var(--rosa); color: var(--blanco); box-shadow: none; }
.switch-color input:checked + label.amarillo { background-color: var(--amarillo); color: var(--negro); box-shadow: none; }
.switch-color input:checked + label.vino { background-color: var(--vino); color: var(--blanco); box-shadow: none; }
.switch-color input:checked + label.verde { background-color: var(--verde); color: var(--blanco); box-shadow: none; }
.switch-color input:checked + label.negro { background-color: var(--negro); color: var(--blanco); box-shadow: none; }
.switch-color input:checked + label.naranja { background-color: var(--naranja); color: var(--negro); box-shadow: none; }
.switch-color input:checked + label.morado { background-color: var(--morado); color: var(--blanco); box-shadow: none; }

.switch label:first-of-type, .switch-hr label:first-of-type, .switch-color label:first-of-type, .switch-cuestionario label:first-of-type { border-radius: 4px 0 0 4px; }
.switch label:last-of-type, .switch-hr label:last-of-type, .switch-color label:last-of-type, .switch-cuestionario label:last-of-type { border-radius: 0 4px 4px 0; }

.switch-hr input:checked + label { background-color: var(--amarillo); color: var(--negro); }
.switch-color input:checked + label { background-color: var(--amarillo); color: var(--blanco); }


.lbl{
	display: inline-block;
	width: 45px;
	height: 25px;
	background: #dbdbdb;
	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(--azul); }

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

	.swtichek { display: none; }