@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

:root {
  --ColorPrincipal: #3E4078;
  --ColorSecundario: #EDEEFF;
  --ColorDanger:#DC3545;
  --ColorSuccess:#4BB543;

  --BorderRadius: 5px;
  --border: 1.5px;
  --Padding: 10px;
  --LetterSpacing: 1.5px;
  --Margin: 10px;
  --Top:104.17px;

  --SizeTitulo: 1.6rem;

  --SizeDescripcion: 0.9rem;

  --FontSize: 16px;
}

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

body {
  background-color: var(--ColorPrincipal);
}

html {
  font-family: 'Roboto', sans-serif;
  font-size: var(--FontSize);
}

.contenedor-header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  height: 40px;
  background-color: var(--ColorSecundario);
  align-items: center;
  justify-content: space-between;
  padding-left: var(--Padding);
  padding-right: var(--Padding);
  z-index: 1000;
}

.contenedor-header div img {
  width: 30px;
  height: 30px;
}

nav {
  position: fixed;
  top: 40px;
  width: 100%;
  padding: var(--Padding);
  background-color: var(--ColorPrincipal);
  display: flex;
  flex-direction: column;
  border-bottom: var(--border) solid var(--ColorSecundario);
  z-index: 1000;
}

nav ul, nav li {
  list-style: none;
}

nav .nav-enlaces {
  display: flex;
  justify-content: space-around;
  height: calc(100% - var(--Padding));
  align-items: stretch;
}

.contenedor-header div {
  display: flex;
}

.contenedor-header div:last-child img {
  margin-left: var(--Margin);
  cursor: pointer;
}

.btn-menu {
  display: none;
}

nav .nav-enlaces li a {
  background-color: var(--ColorPrincipal);
  color: var(--ColorSecundario);
  text-decoration: none;
  padding: var(--Padding) calc(var(--Padding) - var(--Padding) / 2);
  display: block;
  font-size: 1.2rem;
}

nav .nav-enlaces li ul {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: .5s opacity;
}

nav .nav-enlaces li:hover>ul {
  opacity: 1;
  pointer-events: visible;
}

nav .nav-enlaces li>ul>li {
  transition: transform .5s;
  border-bottom: var(--border) solid var(--ColorSecundario);
}

nav .nav-enlaces li>ul>li:hover {
  transform: scale(1.1);
  border: var(--border) solid var(--ColorSecundario);
}



/*LOGIN*/
.nav-login-background {
  position: fixed;
  top: 104.17px;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: var(--ColorPrincipal);
  padding: var(--Padding);
  align-items: center;
  justify-content: center;
  display: none;
  opacity: 0;
  transform: translateY(140%);
}

.nav-login-background  .nav-login-contenedor {
  
  width: 60%;
  height: 70%;
  background-color: var(--ColorSecundario);
  border-radius: var(--BorderRadius);
  transform: translateY(-140%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.nav-login-background  .nav-login-contenedor form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--Padding);
  width: 100%;
  height: 100%;
  justify-content: center;
}

.nav-login-background  .nav-login-contenedor form div {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-login-background  .nav-login-contenedor form div img {
  width: 30px;
  position: absolute;
  left: 8%;
  top: 8px;
}



.nav-login-background  .nav-login-contenedor form h1 {
  text-align: center;
  color: var(--ColorPrincipal);
  font-weight: 700;
  margin-bottom:calc(var(--Margin) * 3);
}
.nav-login-background  .nav-login-contenedor form input {
  width: 85%;
  padding: calc(var(--Padding));
  outline: none;
  border: 0;
  border-radius: var(--BorderRadius);
  border: var(--border) solid var(--ColorPrincipal);
  background-color: var(--ColorSecundario);
  margin-bottom:calc(var(--Margin) * 2);
  font-size: 1.3rem;
  padding-left:33px;
}

.nav-login-background  .nav-login-contenedor form div button {
  padding: calc(var(--Padding) * 1.2) calc(var(--Padding) * 3);
  width: 150px;
  outline: none;
  border: 0;
  border-radius: var(--BorderRadius);
  background-color: var(--ColorPrincipal);
  color: var(--ColorSecundario);
  cursor: pointer;
  margin-top:var(--Margin);
  font-weight: 600;
  opacity: 1;
  transition: .3s all;
}
.nav-login-background  .nav-login-contenedor form div button:hover {
  opacity: .8;
}

@keyframes efectoLogin {
  to{
    transform: translateY(0);
    opacity: 1;
  }
}


/*ENALSE PARA INICIAR COMO cliente EN EL SISTEMA*/
#contenedor-btn-login {
  display: flex;
  flex-direction: column;
}
#loginCliente {
  margin-top: var(--Margin);
  font-weight: 600;
  color: var(--ColorPrincipal);
  cursor: pointer;
  transition: transform .3s;
}
#loginCliente:hover {
  transform: scale(1.2);
}
/*MODAL ENCARGADO DE MOSTRAR INFO DE USUARIO*/
.loal-contenedor-modal {
  width: 300px;
  position: fixed;
  top: var(--Top);
  right: 0;
  border-radius: var(--BorderRadius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--ColorSecundario);
  z-index: 999;
  border: var(--border) solid var(--ColorPrincipal);
  padding: var(--Padding);
  transform: translateX(1000px);
  transition: transform .5s;
}
.loal-contenedor-modal .loal-modal{
  display:flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap:5px;
}
.loal-contenedor-modal .loal-modal .loal-header {
  width: 100%;

}
.loal-contenedor-modal .loal-modal .loal-header button ,
.loal-contenedor-modal .loal-modal .loal-footer button ,
 .loal-contenedor-modal .loal-modal .loal-footer a{
  padding: var(--Padding) calc(var(--Padding) * 2);
  outline: none;
  border: none;
  background-color: var(--ColorPrincipal);
  border-radius: var(--BorderRadius);
  color: var(--ColorSecundario);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: var(--LetterSpacing);
  width: 200px;
  text-align: center;
  opacity: 1;
  transition: .3s opacity;
  font-family:'Roboto', sans-serif;;

}

.loal-contenedor-modal .loal-modal .loal-footer a:hover {
  opacity: .9;
}
.loal-contenedor-modal .loal-modal .loal-footer button {
  background-color: var(--ColorDanger);
  font-size: var(--FontSize);
}
.loal-contenedor-modal .loal-modal .loal-footer button:hover {
  opacity: .9;
}

.loal-contenedor-modal .loal-modal .loal-body {
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loal-contenedor-modal .loal-modal .loal-body img{
  border-radius: 50%;
  width: 100px;
  height: 100px;
  cursor: pointer;
}
.loal-contenedor-modal .loal-modal .loal-body p {
  font-weight: 600;
  font-size: 1.3rem;
  color:var(--ColorPrincipal);
}
.loal-contenedor-modal .loal-modal .loal-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--Padding);
}

.transition-modal {
  transform: translateX(0);
}



/*RESPONSIVE (MOVIL Y TABLET)*/
@media (max-width:600px) {
  nav {
    position: fixed;
    background-color: var(--ColorPrincipal);
    top: 40px;
    width: 100%;
    transform: translateX(100%);
    transition: transform .5s;
  }

  .showandhide {
    transform: translateX(0);
  }

  nav .nav-enlaces li ul {
    position: absolute;
    top: 0;
    right: 0;
  }

  nav .nav-enlaces {
    flex-direction: column-reverse;
    width: 100%;
    height: 100%
  }


  .btn-menu {
    display: block;
  }

  /*LOGIN */
  .nav-login-background {
    top: 40px;
  }
  .nav-login-background  .nav-login-contenedor {
    width: 100%;
    height: 60%;
  }
  .nav-login-background  .nav-login-contenedor form div button {
    width: 85%;
  }
  :root {
    --Top:40px;
  }
  
}

/*STYLE TABLE GENERAL*/
.l-contenedor-table {
  background-color: var(--ColorSecundario);
}

.l-contenedor-table>.l-thead {
  background-color: var(--ColorSecundario);
border: var(--border) solid black;
color: black;
font-size: calc(var(--FontSize) + 2px);
}
.l-contenedor-table>.t-body {
  background-color: var(--ColorSecundario);
  font-size: var(--FontSize);
}
/*FIN STYLE TABLE GENERAL*/