@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");
:root {
	--msger-bg: #fff;
	--left-msg-bg: #ececec;
	--right-msg-bg: #579ffb;
	--azulOscuro: #1d2636;
	--azulMedioOscuro:#242E42;
	--azulUltraOscuro: #161d2a;
	--duracionAnimacion:0.9s;

	--colorVariableIconos:#DDE9F8;
	--colorVariableInput:  #fff;
	--colorVariableInputArea:#DDE9F8;
	--colorVariableHeaderChat:#161d2a;
	--colorVariableVentanaChat: #fff;
	--colorVariableBtn:#242E42;
  }
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font: 16px/1.5 "Lato", sans-serif;
}
.mainBox{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;

}

.inicioSesion, .registro{
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 60px 40px;
  box-sizing: border-box;
  background-color: #DDE9F8;
}

.inicioSesion img, .registro img{
  width: 275px;
}
.opciones{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}
.formularioLogin{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
label{
  font-weight: bold;
}
input{
  border: none;
  width: 100%;
  height: 35px;
  border-radius: 5px;
  background-color: white;
  color: black;
  outline: none;
  padding-left: 5px;
}
button{
  margin-top: 20px;
  border: none;
  width: 100%;
  height: 35px;
  border-radius: 5px;
  background-color: #1D2636;
  color: white;
  border: 1px solid #161D2A;
  border-bottom: 3px solid #161D2A;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
}
button:hover{
  filter: brightness(1.2);
}
button:active{
  filter: brightness(0.8);
  background-color: #161d2a;
  border: 0px solid #1D2636 ;
  border-top: 2px solid #1D2636;
}
.enlaces{
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.msger{
  max-width: 100%;
  height: 100%;
  background-color: #242E42;

	box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;

  flex: 1;
	overflow-y: auto;
	padding: 10px 30px;
	box-sizing: border-box;

  overflow-y: auto;
  overflow-x: hidden;
}
.msger::-webkit-scrollbar {
	width: 6px;
	
  }
  .msger::-webkit-scrollbar-track {
	background: #ddd;	
  }
  .msger::-webkit-scrollbar-thumb {
	background: #bdbdbd;
	
  }
  .msg {
	display: flex;
	align-items: flex-end;
	margin-top: 10px;
  }

  .msg-img {
	width: 50px;
	height: 50px;
	margin-right: 10px;
	background: #ddd;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 50%;
	box-sizing: border-box;
  }
  .msg-bubble {
	max-width: 450px;
	padding: 15px;
	border-radius: 15px;
	background: var(--left-msg-bg);
	box-sizing: border-box;
 
  }
  .msg-bubble img{
	max-width: 400px;
	max-height:200px ;
  }
  .msg-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
  }
  .msg-info-name {
	margin-right: 10px;
	font-weight: bold;
  }
  .msg-info-time {
	font-size: 0.85em;
  }
  
  .left-msg .msg-bubble {
	border-bottom-left-radius: 0;
  }
  .right-msg {
    flex-direction: row-reverse;
    }
  
  .right-msg .msg-bubble {
	background: var(--right-msg-bg);
	color: #fff;
	border-bottom-right-radius: 0;
  }
  .right-msg .msg-img {
	margin: 0 0 0 10px;
  
  }
  



  .procesandoMensaje{
    height: 7px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    box-sizing: border-box;
    overflow: visible;
    
  }
  .punto{
    background-color: #161d2a;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    
    animation: pensando;
    animation-duration: var(--duracionAnimacion);
    animation-iteration-count: infinite;
  }
  
  .pto1{
    animation-delay: calc(var(--duracionAnimacion)*0.5);
  }
  .pto2{
    animation-delay: calc(var(--duracionAnimacion)*0.75);
  }
  .pto3{
    animation-delay:calc(var(--duracionAnimacion)*1);
  }
  
  @keyframes pensando {
    0%{
      transform: translateY(0px);
    }
    25%{
      transform: translateY(-5px);
    }
    50%{
      transform: translateY(0px);
    }
    100%{
  
    }
    
  }
  .imagenSynthIa{
    width: 37.5px;
    height: 44.25px;
    margin-right: 10px;
  
    box-sizing: border-box;
  }

.cambioFormulario{
  color: #1E90FF;
}
.cambioFormulario:hover{
  transition: all 0.3s; 
  filter: brightness(0.6);
  cursor: pointer;
}


.invisible{
  display: none;
}

@media (max-width:600px) {
  body{
    overflow: hidden;
  }
  .inicioSesion,.registro{
    width: 100vw;
    height: 100vh;
  }
  .msger{
    display: none;
  }
  
}