@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root{
	--background-gradient: linear-gradient(180deg, #000000 40%, #032ca6e9 70%,  #d955aa 90%);
	--color-primary:#11A0D9;
	--color-secondary: #0487D9;
	--boton-padding: 20px 40px;	

	--color-paleta-1: #11A0D945 ;
	--color-paleta-2: #3C6973 ;
	--color-paleta-3: #73CFD955 ;
	--color-paleta-4: #F0F0F055 ;
	--color-paleta-5: #012E40 ;
	--shadow-svg: drop-shadow(0px 3px 6px #888); 

	--card-border-radius: 2rem;
	--border-radius-1: 0.4rem;
	--border-radius-2: 0.8rem;
	--border-radius-3: 1.2rem;

	--card-padding: 1.8rem;
	--padding-1: 1.2rem;
	--box-shadow: 0 0.4rem 1rem 0.1rem #11A0D944; 

	--gray-light-1: #F6F5FD;
	--gray-light-2: #F5F3FF;
	--gray-light-3: #EAE7F8;

	--gray-dark-1: #2C2F3B;
	--gray-dark-2: #262933;
	--gray-dark-3: #22252E;

}
/* */

.dark-theme-variables {
	--color-paleta-1: #181a1e;
	--color-paleta-2: #362528;
}

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	border: 0;
	list-style: none;
	appearance: none;
}

@font-face {
font-family: 'harvest';
src: url('../assets/harvest.ttf');
}


body{
	background: #cccccc;
	font-family: 'Poppins', 'sans-serif';
	width: 100vw;
	height: 100vh;
	font-size: 0.88rem;
	/*user-select: none;*/
	overflow-x: hidden;
	background: var(--color-paleta-4);
}

.container_popup{
	position: fixed;
	width: 100%;
	height: 100vh;
	background: #3c507769;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
    left: 0;
    visibility: hidden;
    z-index: 2;
}

.open_container{
	visibility: visible;
}

.popup{
	text-align: center;
	width: 60%;
	height: 97%;
	background: #fff;
	border-radius: 6px;
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.1);
	text-align: center;
	padding: 40px 40px 30px;
	color: #333;
	visibility: hidden;
	transition: transform 0.4s top 0.4s;
	overflow: scroll;
}

.open-popup{
	visibility: visible;
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	overflow-x: hidden;
}

.popup span{
	background: 0 2px rgba(0, 0, 0, 0.2); 
	width: 50px;
	height: auto;
	padding: 10px;
	margin-top: -50px;
	border-radius: 50%;
	box-shadow: 0 2px rgba(0, 0, 0, 0.2); 
}



.popup h2{
	font-size: 28px;
	font-weight: 500;
	margin: 30px 0 10px;
}

.popup button{
	width: 27%;
	margin: 50px auto 0;
	padding: 10px 0;
	background: #A7A7A7;
	color: #fff;
	border: 0;
	outline: none;
	font-size: 18px;
	border-radius: 4px;
	cursor: pointer;	
	box-shadow: 0 2px rgba(0, 0, 0, 0.2); 
}

.popup button.close{
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	margin: 2% 5%;
	padding: 10px 0;
	background: transparent;
	color: var(--gray-dark-3);
	border: 0;
	outline: none;
	font-size: 18px;
	border-radius: 4px;
	cursor: pointer;	
	/*box-shadow: 0 2px rgba(0, 0, 0, 0.2); */
	box-shadow: none;
	font-family: "Arial";
}

	

/*FORMS*/

form{
	padding: 20px;
	background: linear-gradient( -90deg, #004AEA 30%, #00AAF6 100%);
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	width: 800px;
	text-align: left;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
}


form.form_popup{
	margin: 30px auto;
	padding: 20px;
	/*background: linear-gradient(
		50deg,
		#77B0CC 0%,
		#D7D7D7 50%,
		#77B0CC 100%
	);*/
	background: #D7D7D755;
	border-radius: 15px;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	text-align: left;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
}

.form-group{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-gap: 20px;
	margin-bottom: 20px;
}

.form-content{
	display: flex;
	flex-direction: column;
}

label{
	/*color: #fff;*/
	font-size: 13px;
	margin-bottom: 10px;
}

input, select, option{
	padding: 7px;
	background: #283864;
	border: 0;
	outline: none;
	border-radius: 25px;
	color: #f5fcff;
	font-size: 14px;
}

/* Quitar estilos a <span> dentro de labels en formularios */
.form_popup label span.no-style{
  all: unset;
  display: inline;
  color: inherit;
  font: inherit;
  line-height: inherit;
  margin: 0;
}




.container_login {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #056CF230;
}

.box_login{
	width: 45%;
	height: 80%;
	background: #4545cb;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-content: center;
	box-shadow: 0 9px 5px 0.05px #ccccccee;
}

.portada_login{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 50%;
	height: 100%;
	background: url(../img/foto_login.JPG);
	background-size: cover;
	background-position: center;
}

.portada_login h4, .portada_login p{
	z-index: 1;
}

.portada_login h4{
	font-size: 1.6rem;
	color: #0D0D0D;
}

.portada_login p{
	font-size: 1.2rem;
    color: #CC6305;
    font-weight: 500;
}

.capa_login{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	background: #F2CB05;
	opacity: 0.99;
	mix-blend-mode: screen;
}

#form_login{
	background: #004BE5;
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
}

#form_login figure{
	width: 180px;
	height: auto;
	margin: -30px auto 60px;
}

#form_login figure img{
	width: 100%;
	object-fit: contain;
}


#form_login input{
	width: 55%;
	padding: 0.25rem;
	border-radius: 0.3rem;
}

#form_login label{
	margin-top: 1.6rem;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
}

#form_login button{
	cursor: pointer;
	width: 50%;
	margin: 20px 5px;
	padding: 5px;
	border-radius: var(--border-radius-1);
	background: radial-gradient(circle, #00AAF3, #004BE5);
	font-size: 0.85rem;
	letter-spacing: 1px;
	font-weight: 500;
	transition: all 0.9s ease-out;
	box-shadow: 1px 4px 7px 2px #004Bb8;;
}

#form_login button:hover,
#form_login button:focus{
	background: #00AAF3;
}




.container{
	position: relative;
	display: grid;
	width: 99.5%;
	gap: 1.8rem;
	grid-template-columns: 14rem auto 14rem;
	margin: 0 auto;
}


a{
	color: var(--color-primary);
}

h1{
	font-weight: 800;
	font-size: 1.8rem;
}

h2{
	font-size: 1.4rem;
}

h3{
	font-size: 0.87rem;
}
h4{
	font-size: 0.8rem;
}
h5{
	font-size: 0.77rem;
}
small{
	font-size: 0.75rem;
}

.profile-photo{
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	overflow: hidden;
}

.profile-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.text-muted{
	color: var(--color-paleta-3);
}

p{
	color: var(--color-paleta-5);
}

b{
	color: #BE0E25;
}

.primary{
	color: var(--color-paleta-2);
}

.success{
	color: var(--color-paleta-5);
}

.danger{
	color: var(--color-paleta-5);
}

.warning{
	color: var(--color-paleta-3);
}

/*ASIDE*/

aside{
	height: 100vh;
}

aside .top{
	background-color: var(--color-paleta-3); 
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 1.4rem;
}

aside .logo{
	display: flex;
	gap: 1rem;
	padding: 10px;
	justify-content: center;
	align-items: center;
}

aside .logo a{
	width: 140px;
	height: auto;
}

aside .logo a img{
	width: 100%;
}

aside .top div.close span{
	display: none;
}



/*  ***********
sidebar
********/

aside .sidebar{
	background-color: var(--color-secondary);
	display: flex;
	flex-direction: column;
	height: 85vh;
	position: relative;
	top: 0rem;
}

aside h3{
	font-weight: 400;
}

aside .sidebar a{
	display: flex;
	color: #cccccc;
	margin-left: 2rem;
	gap: 1rem;
	align-items: center;
	height: 3.2rem;
	transition: all .1s ease-in;
}

aside .sidebar a span{
	font-size: 1.6rem;
	transition: all .1s ease-in;
	color: #F2CB05;
	}

aside .sidebar a:last-child{
	position: absolute;
	bottom: 1rem;
	width: 100%;
}

aside .sidebar a.active{
	background: #E1EDF9;
	color: var(--color-paleta-2);
	margin-left: 0;
	box-shadow: var(--box-shadow);
	/*border-left: 5px solid var(--color-primary);*/
}

aside .sidebar a.active::before{
	content: '';
	width: 6px;
	height: 100%;
	background-color: #BE0E25;
}

aside .sidebar a:hover{
	color: #F2CB05;
}

aside .sidebar a:hover span{
	margin-left: 1rem;
	transition: .4s ease;
}

aside .sidebar a span.msg_count{
	background: #cfcf7c;
	color: var(--color-paleta-2);
	padding: 2px 5px;
	font-size: 11px;
	border-radius: var(--border-radius-1);
}

/************
start main section style
************/

main{
	position: relative;
	margin-top: 1.4rem;
	width: auto;
}


main input{
	background-color: #7AB3BF;
  border: 0;
  outline: 0;
  color: #3C6973;
}

main .date{
	display: inline-block;
	background-color: var(--color-paleta-3);
	border-radius: var(--border-radius-1);
	margin-top: 1rem;
	padding: 0.5rem 1.6rem;
}

main .nav_btns{
	padding: 10px;
  margin: 20px 0;
  width: 90%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

main .nav_btns a{
	padding: 10px;
  margin: 4px 5px;
  border-radius: 15px;
  background: var(--color-paleta-2);
  color: #fff;
}

main .nav_btns a.active{
  background: var(--color-paleta-3);
  color: #000;
  box-shadow: 0px 0px 1px 1.3px #0008;
}

main .insights{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 1.6rem;
}

main .insights>div{
	background-color: var(--color-paleta-1);
	padding: var(--card-padding);
	border-radius: var(--card-border-radius);
	margin-top: 1rem;
	box-shadow: var(--box-shadow);
	transition: all .3s ease;
}

main .insights > div:hover{
	box-shadow: none;
}


.add{
	height: 0px;
	opacity: 0;
	cursor: pointer;
}

main .insights > div:hover .add{
	display: flex;
	margin-top: 10px;
	justify-content: space-around;
	align-items: center;
	background: #fff;
	padding: 10px;
	border-radius: 10px;
	height: 34%;
	opacity: 1;
	transition: height 0.3s linear, opacity 0.3s linear, margin-top 0.3s ease;
}

main .insights > div span{
	background: #F2CB05;
	padding: 0.4rem;
	border-radius: 50%;
	color: var(--gray-dark-2);
	font-size: 2rem;
	margin: 0 auto 17px;
}

main .insights :is(.sales, .expenses, .income) div.add span {
    background: transparent;
    color: #000;
    margin: 0;
    padding: 0;
}

main .insights > div.expenses span{
	background: #F2CB05;
}

main .insights > div.income span{
	background: #F2CB05;
}

main .insights > div .middle{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

main .insights > div .middle h1{
	font-size: 1.6rem;
}

main h1{
	color: var(--color-paleta-2);
}

main .insights h1{
	color: var(--color-paleta-5);
}

main .insights h3{
	color: var(--color-paleta-5);
}

main .insights p{
	color: var(--color-paleta-5);
}

main .insights .progress{
	position: relative;
	height: 68px;
	width: 68px;
	border-radius: 50px;
}

main .insights svg{
	height: 150px;
	width: 150px;
	position: absolute;
	top: 0;
}

main .insights svg circle{
	fill: none;
	stroke: var(--color-paleta-2);
	transform: rotate(270,80,80);
	stroke-width: 5;
}

main .insights .sales svg circle{
	stroke-dashoffset: 10;
	stroke-dasharray: 150;
}

main .insights .expenses svg circle{
	stroke-dashoffset: 50;
	stroke-dasharray: 150;
}

main .insights .income svg circle{
	stroke: var(--color-secondary);
}

main .insights .progress .number{
	position: absolute;
	top: 5%;
	left: 5%;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

main div.recent_order{
	margin-top: 0.9rem;
	padding: 5px;
    width: 52rem;
}

.buttons_bd{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	/*background: #ccccccbb;*/
	padding: 40px;
}

.buttons_bd a.button--bd{
	display: flex;
	align-items: center;
	background: #44444477;
	padding: 10px;
	margin: 20px 10px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 0.1px #999;
	transition: all 0.3s ease;
}

.buttons_bd a.button--bd:hover{
	box-shadow: none;
}

.buttons_bd .button--bd span{
	color: var(--color-paleta-5);
	margin: 0 7px;
}



/*NAV TABS*/
nav.nav-tabs{
	position: relative;
	height: 50px;
	width: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recent_order nav.nav-tabs::after{
	content: "";
	background: silver;
	width: 100%;
	height: 1px;
	position: absolute;
	top: 47px;
	filter: blur(0.5px);
}

nav.nav-tabs label{
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	font-size: 17px;
	font-weight: 600;
	transition: all 0.3s ease;
}

#blog:checked ~ nav label .home,
#blog:checked ~ nav label .blog,
#blog:checked ~ nav label .code,
#blog:checked ~ nav label .help,
#blog:checked ~ nav label .about{
	color: #6f55ca;
}

input[type='radio']{
	display: none;
}

/*SLIDER PARA 3 ITEMS*/

nav.nav-tabs .slider{
	position: absolute;
	height: 4.5px;
	background-color: #F2CB05;
	border-radius: 20px;
	width: 30%;
	z-index: 1;
	left: 0;
	bottom: 0;
	transition: all 0.3s ease;
	filter: blur(0.4px);
}


#blog:checked ~ nav .slider{
	left: 33.33%;
}

#code:checked ~ nav .slider{
	left: 66.66%;
}

#help:checked ~ nav .slider{
	left: 100%;
}

/*#about:checked ~ nav .slider{
	left: 50%;
}*/


/*SLIDER PARA 2 ITEMS*/

nav.nav-tabs .slider_2{
	position: absolute;
	height: 4.5px;
	background-color: #F2CB05;
	border-radius: 20px;
	width: 50%;
	z-index: 1;
	left: 0;
	bottom: 0;
	transition: all 0.3s ease;
	filter: blur(0.4px);
}


#blog:checked ~ nav .slider_2{
	left: 50%;
}

#code:checked ~ nav .slider_2{
	left: 100%;
}




#home:checked ~ nav .home{
	color: #BE0E25;
}

#blog:checked ~ nav .blog{
	color: #BE0E25;
}

#code:checked ~ nav .code{
	color: #BE0E25;
}

#help:checked ~ nav .help{
	color: #BE0E25;
}

#about:checked ~ nav .about{
	color: #BE0E25;
}


.nav-tab-container{
	filter: blur(0.3px);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	overflow-y: hidden;
}

.nav-tab-container .content{
	display: none;
	margin-bottom: 0px;
	width: 100%;
}

.nav-tab-container .content .title{
	font-size: 19px;
	font-weight: 600;
	margin: 10px 0 0px 0;
}

#home:checked ~ section .content-1{
	display: block;
	width: 100%;
}

#blog:checked ~ section .content-2{
	display: block;
	width: 100%;
}

#code:checked ~ section .content-3{
	display: block;
	width: 100%;
}

#help:checked ~ section .content-4{
	display: block;
	width: 100%;
}

#about:checked ~ section .content-5{
	display: block;
	width: 100%;
}



.scroll_container {
  width: auto;
  min-height: 220px;
  /* más grande por defecto y adaptable; nunca supera la vista */
  height: clamp(30vh, 65vh, calc(100vh - 140px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding-right: 8px; /* evita que la barra de scroll tape contenido */
}

/* Estilo personalizado para la barra de scroll dentro de .scroll_container usando variables de paleta */
.scroll_container {
  -webkit-overflow-scrolling: touch;
}

/* WebKit (Chrome, Edge, Safari) */
.scroll_container::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scroll_container::-webkit-scrollbar-track {
  background: var(--scroll-track, transparent);
  border-radius: 8px;
}
.scroll_container::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb, rgba(0, 0, 0, 0.22));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color .18s ease;
  box-shadow: 0 0 0 1px var(--scroll-thumb-border, transparent);
}
.scroll_container::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover, rgba(0, 0, 0, 0.34));
}

/* Firefox */
.scroll_container {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb, rgba(0,0,0,0.22)) var(--scroll-track, transparent);
}

/* Accesibilidad / enfoque */
.scroll_container:focus {
  outline: none;
}

main .recent_order h2{
	color: var(--color-paleta-3);
}

main .recent_order .title{
	font-size: 19px;
	font-weight: 600;
	margin: 10px 0 0px 0;
}

main .recent_order table{
	background-color: var(--color-paleta-1);
	width: 100%;
	border-radius: var(--border-radius-3);
	padding: var(--card-padding);
	text-align: center;
	box-shadow: var(--box-shadow);
	transition: all .3s ease;
	color: var(--color-paleta-1);
}

main .recent_order table:hover{
	box-shadow: none;
}

main table tbody tr{
	height: 3.8rem;
	border-bottom: 1px solid var(--color-paleta-2);
	color: var(--color-paleta-1);	
}

main table tbody td{
	height: 3.8rem;
	border-bottom: 1px solid var(--color-paleta-3);
}

main table tbody td figure{
	width: 4rem;
	height: 4rem;
	border-radius: 15px;
}

main table tbody td figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
}

main table tbody tr:last-child td{
	border: none;
}

main .recent_order a{
	text-align: center;
	display: block;
	margin: 1rem;
	color: #000;
}

/*  **********000
start right side style
***********/

.right{
	margin-top: 1.4rem;
}

.right h2{
	color: var(--color-paleta-5);
}

.right .top{
	display: flex;
	justify-content: start;
	gap: 2rem;
}

.right .top button{
	display: none;
}

.right .theme-toggler{
	background-color: var(--color-paleta-5);
	display: flex;
	justify-content: space-between;
	height: 1.6rem;
	width: 4.2rem;
	cursor: pointer;
	border-radius: var(--border-radius-1);
}

.right .theme-toggler span{
	font-size: 1.2rem;
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.right .theme-toggler span.active{
	background-color: var(--color-paleta-2);
	color: #fff;
}

.right .top .profile{
	display: flex;
	gap: 2rem;
	text-align: center;
}

.right .info h3{
	color: var(--color-paleta-3);
}

.right .item h3{
	color: var(--color-paleta-3);
}

/*recent update*/
.right .recent_updates{
	margin-top: 1rem;
	margin-left: -20px;
}

.right .recent_updates .updates{
	background-color: var(--color-paleta-1);
	padding: var(--card-padding);
	border-radius: var(--card-border-radius);
	box-shadow: var(--box-shadow);
	transition: all .3s ease;
}


.right .recent_updates .updates:hover{
	box-shadow: none;
}

.right .recent_updates .update{
	display: grid;
	grid-template-columns: 2.6rem auto;
	gap: 1rem;
	margin-bottom: 1rem;
}

/*sales analytics*/

.right .sales_analytics{
	margin-top: 2rem;
}

.right .sales_analytics .item{
	background-color: var(--color-paleta-2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1;
	margin: 10px 0;
	width: 100%;
	margin-bottom: 0.8rem;
	padding: 1.4rem var(--card-padding);
	border-radius: var(--border-radius-3);
	box-shadow: var(--box-shadow);
}

.right .sales_analytics .item:hover{
	box-shadow: none;
}

.right .sales_analytics .item .icon{
background: coral;
padding: 0.6rem;
color: var(--color-paleta-2);
border-radius: 50%;
height: 50px;
width: 50px;
line-height: 50px;
align-items: center;
}

.right .sales_analytics .item:nth-child(3) .icon{
	background-color: var(--color-paleta-1);
}

.right .sales_analytics .item:nth-child(4) .icon{
	background-color: var(--color-paleta-4);
}

.add_products button{
	display: flex;
	height: auto;
	width: 85%;
	text-align: center;
	justify-content: center;
	align-items: center;
	border: 2px dashed #BE0E25;
	color: var(--color-paleta-5);
	margin: 48px 0 40px;
	padding: 30px;
	background: transparent;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.add_products button:hover{
	box-shadow: 0px 0px 10px 0.1px #ccc;
}

.add_products button:nth-child(2){
	margin-top: -5px ;
}

.add_products button span{
	color: #BE0E25;

}

/* Icon-only edit button used in tables: centered icon, transparent, no border, pointer cursor */
.btn-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 6px;
	margin: 0;
	color: inherit;
	cursor: pointer;
}
.btn-icon:focus{outline: none;}
.btn-icon .material-symbols-sharp{font-size: 20px;}





/*grupo_membrete
membrete--logo
membrete--datos
membrete--datos*/

.grupo_name{
	background: #ffffff88;
	border-radius: 15px;
	padding: 20px;
}

.grupo_membrete{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.grupo_membrete div{
	margin: 0 20px 0 0;
}

.membrete--logo{
	width: 10rem;
	height: 10rem;
}

.membrete--logo img{
	width: 100%;
	object-fit: cover;
}




/***********B
MEDIA QUERY
************/


@media screen and (max-width: 1200px) {
	.container{
		width: 94%;
		grid-template-columns: 7rem auto 14rem;
	}

	aside .sidebar h3{
		display: none;
	}

	aside .sidebar a:last-child{
		position: relative;
		margin-top: 1.8rem;
	}

	main .insights{
		display: grid;
		grid-template-columns: repeat(1,1fr);
	}

	.container_login{
		width: 100%;
	}

	.box_login{
	flex-direction: column;
	flex-wrap: nowrap;
	width: 90%;
	}

	.portada_login{
		width: 100%;
		height: auto;
		padding: 20px;
	}

	#form_login{
		width: 100%;
		height: auto;
		padding: 20px;
	}

	#form_login input{
		width: 75%;
		padding: 0.30rem;
	}

}

/***********************8
MEDIA QUERY FOR PHONES
************************/

@media screen and (max-width: 768px) {

	.container{
		width: 100%;
		grid-template-columns: repeat(1,1fr);
	}

	aside{
		position: fixed;
		width: 18rem;
		z-index: 3;
		background: var(--color-paleta-2);
		display: none;
		left: -100;
		animation menuAni 1s forwards;
	}


	@keyframes menuAni{
		to{
			left: 0;
		}
	}

	aside .logo h2{
		display: inline;
	}

	aside .sidebar h3{
		display: inline;
	}

	aside .sidebar a {
		width: 100%;
		height: 3.4rem;
	}

	aside .top div.close span{
		display: inline;
		position: absolute;
		right: 0;
		margin-right: 30px;
		font-size: 35px;
	}

	.right .top{
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0.8rem;
		background: var(--color-paleta-3);
		width: 100%;
		height: 4.6rem;
		z-index: 2;
		box-shadow: 0 1rem 1rem var(--color-paleta-3);
		margin: 0;
	}

	main .insights{
		display: grid;
		grid-template-columns: repeat(1,1fr);
		gap: 1.6rem;
		padding: 40px;
	}

	main .recent_order{
		padding: 30px;
		margin: 0 auto;
	}

	.right .profile{
		position: absolute;
		left: 70%;
	}

	.right .recent_updates{
		padding: 30px;
	}


	.right .recent_updates{
		padding: 30px;
	}

	.right .sales_analytics{
		padding: 30px;
	}

	.add_products{
		padding: 30px;
	}

	.right .top button{
		display: inline-block;
		background: transparent;
		cursor: pointer;
		color: var(--color-paleta-2);
		position: absolute;
		left: 1rem;
	}

}