* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--colorOscuro: #515760; /* RGB(81,87,96) */
	--colorClaro: #D6EC8E;  /* RGB(214,236,142) */
	--colorFuerte: #000;
}

html {
	height: 100%;
}

body {
	/* min-height: 100vh; */
	background-color: var(--colorClaro);
	overflow-x: hidden;
}

.bgColorOscuro {
	background-color: var(--colorOscuro) !important;
}

.bgColorClaro {
	background-color: var(--colorClaro) !important;
}

.bgColorFuerte {
	background-color: var(--colorFuerte) !important;
}

.bgColorPurple {
	background-color: var(--bs-purple) !important;
}

.textColorOscuro {
	color: var(--colorOscuro) !important;
}

.textColorClaro {
	color: var(--colorClaro) !important;
}

.textColorFuerte {
	color: var(--colorFuerte) !important;
}

.etiquetaInput{
	margin-bottom: 0px;
	font-style: italic;
}

.etiquetaInputHidden{
	margin-bottom: 0px;
	font-style: italic;
	visibility: hidden;
}

.inputFocusColorOscuro:focus {
	border-color: var(--colorOscuro);
	box-shadow: 0 1px 1px var(--colorOscuro)inset, 0 0 8px var(--colorOscuro);
	outline: 0 none;
}

.selectionColorOscuro::selection {
	background: var(--colorOscuro);
	color: #fff;
	text-shadow: 1px 1px #fff;
}

select option:hover {
	background-color: var(--colorOscuro) important !;
}


.psfBoton {
	background-color: #000;
	padding: 6px;
	font-size: 24px;
	color: var(--colorFuerte);
	border-bottom: 6px solid #000;
	cursor: pointer;
	transition: all .5s;
}

.psfBoton:hover {
	border-bottom: 6px solid var(--colorFuerte);
}

.cursorManita {
	cursor: pointer;
}

.textNoSelection {
	user-select: none;
}

.gpBotonPrincipal{
	background-color: var(--colorOscuro);
	color: var(--colorClaro);
	transition: all .5s;
}
.gpBotonPrincipal:hover{
	/* background-color: #365A72; */
	color: #fff;
}


@media only screen and (max-width: 320px) {
	.etiquetaInputHidden {
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	.etiquetaInputHidden {
		display: none;
	}
}