@import url("variables.css");

*, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}
body{
	background-color: #fff;
	/*background: url('https://source.unsplash.com/featured/1920x1080/?mexico') no-repeat;*/
	/*background: url('../images/background.png') no-repeat;*/
	background-size: cover;
	background-position: top center;
}
html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
}
input[type="text"], input[type="password"]{
	font-size: var(--text-sm);
	line-height: calc(var(--spacing)* 6);
    border: 0px;
	border-bottom: 2px solid #fff;
	color: var(--color-gray-900);
	padding-block: calc(var(--spacing)* 1.5);
	padding-inline: calc(var(--spacing)* 3);
	background-color: #f37a1f;
	width: 100%;
	display: block;
}
.centrado_logo{
	width: 500px;
	margin: auto;
	position: relative;
	padding: 0;
	overflow: hidden;
	top: 10px;
}
	.centrado_logo img{
		width: 500px;
	}
	.centrado_logo h2{
		color: #23273c;
		letter-spacing: var(--tracking-tight);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-2xl);
		line-height: calc(var(--spacing)* 9);
		margin-top: calc(var(--spacing)* 6);
		text-align: center;
	}

.centrado_index{
	width: 500px;
	height: 500px;
	margin: auto;
	position: absolute;
	background: #d5d4d5;
	padding: 0;
	overflow: hidden;
	top: 60%;
	left: calc(50% - 250px);
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
	border-radius: 25px;	

	padding-inline: calc(var(--spacing)* 12);
	border-radius: var(--radius-lg);
	--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
	padding-block: calc(var(--spacing)* 12);
	background-color: #f37a1f;
}
	.centrado_index form{
		:where(& > :not(:last-child)) {
			--tw-space-y-reverse: 0;
			margin-block-start: calc(calc(var(--spacing)* 6)* var(--tw-space-y-reverse));
			margin-block-end: calc(calc(var(--spacing)* 6)* calc(1 - var(--tw-space-y-reverse)));
		}
	}
	.tit_login{
		color: #fff;
		font-weight: var(--font-weight-medium);
		font-size: var(--text-sm);
		line-height: calc(var(--spacing)* 6);
		display: block;
	}
	.user_log{
		position: relative;
		top: 150px;
		width: 90%;
		margin: auto;
		border: 1px solid #a6a8ab;
		height: 40px;
		background-color: #FFF;
		border-radius: 10px;
		padding: 10px;
		font-size: 20px;
		color: #87d87d;
	}
	.user_pass{
		position: relative;
		top: 200px;
		width: 90%;
		margin: auto;
		border: 1px solid #a6a8ab;
		height: 40px;
		background-color: #FFF;
		border-radius: 10px;
		padding: 10px;
		font-size: 20px;
		color: #87d87d;
	}
	.boton_ingresar{
		position: relative;
		top: 250px;
		width: 90%;
		margin: auto;
		text-align: center;
	}
	.boton {
		background-color: #fff;
		--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
		color: #23273c;
		--tw-font-weight: var(--font-weight-semibold);
		font-weight: var(--font-weight-semibold);
		font-size: var(--text-sm);
		line-height: calc(var(--spacing)* 6);
		padding-block: calc(var(--spacing)* 1.5);
		padding-inline: calc(var(--spacing)* 3);
		border-radius: var(--radius-md);
		justify-content: center;
		width: 100%;
		display: flex;
		appearance: button;
	}
	.boton:hover{
		background-color: #23273c;
		color: #fff;
	}


	button, input, select, optgroup, textarea, ::file-selector-button {
		font: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		letter-spacing: inherit;
		color: inherit;
		border-radius: 0;
		background-color: transparent;
		opacity: 1;
	}
	/*.power{
		position: fixed;
		bottom: 10px;
		left: 50%;
		margin-left: -50px;
		width: 100px;
		background: rgba(238,235,235,0.7);
	}*/

	.hf {
		margin-top: calc(var(--spacing)* 2);
	}
	
@media screen and (max-width: 400px){
	.centrado_index{width: 80%; height: 80%;}
}


/*Created with human intelligence by @jkarreno 2023 - 2024*/
/*May the force be with you*/
/*move your stars*/
/*always ready*/