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

:root {
  --clr-main: #000080;
  --clr-main-light: #0099FF;
  --clr-white: #FFFFFF;
  --clr-gray: #D3D3D3;
  --clr-red: #fa0303;
  --clr-green: #099d2e;
  --clr-blu: #1e03ec;

  --clr-dark-gray: #8d8888;
}

.menu-perfil {
  align-items: center;
  justify-content: start;
  min-height: 8vh;
  background-color: transparent;
}

.menu-perfil ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin-left: 0;
  gap: 2px;
}

.menu-perfil li {
  padding: 0 40px;
  list-style-type: none;
  transition: 0.3s;
}

.menu-perfil ul li a {
  text-decoration: none;
  font-size: 1.8rem;
  color: var(--clr-main);
  font-weight: 600;

}


.contenedorPerfil {
  display: none;
  position: relative;
  top: 5rem;
  text-align: center;
  margin: auto;
  border: none;
  width: 100vw;
  /* Ancho completo */
  height: 100vh;
  /* Algura completa */
  overflow: auto;
  position: fixed;
  left: 0;
  top: 0;
  background-color: var(--clr-white);

}

.contenedor-imagen-perfil,
 .contenedor-correo,
  .contenedor-segundo-correo,
   .contenedor-tercer-correo,
    .contenedor-telefono-principal,
     .contenedor-segundo-telefono {
  display: none;
  position: absolute;
  top: 5rem;
  text-align: center;
  margin: auto;
  border: none;
  width: 98vw;
  /* Ancho completo */
  height: 98vh;
  /* Algura completa */
  overflow: auto;
  position: fixed;
  background-color: transparent;
  left: 0;
  top: 0;
}


.titulo-perfil{
  font-size: 2.25rem;
  font-family: 'Times New Roman', Times, serif;
  color: var(--clr-main-light);
  font-style: oblique;
  margin-left: -8rem;
 }

 .titulo-perfil a{
  padding-left: 4rem;
  font-size: 2.25rem;
}


.formulario-perfil {
  width: 50%;
  display: grid;
  grid-template-columns: repeat(1, 50%);
  row-gap: 12px;
  text-align: center;
  margin: auto;
  padding: 1rem 0rem;
  margin-top: 10vh;
  border: none;
  justify-content: center
}
.previaimagenPerfil, .imagenPerfil {
  width: 100%;
  margin: auto;

}


 
.verificaChecbox input[type="checkbox"] {
  accent-color: var(--clr-green);
  border: none;
}
.verificaChecbox{
  position: absolute;
  cursor: pointer;
  border: none;
  width: 1.5rem;
  height: 1.5rem;
  right: -4rem;
  top: .50em;
  
}
 
.verificaChecbox:checked {
  box-shadow: 0 0 0 2px var(--clr-green);
  color: var(--clr-green);
  border-radius: 50%;

}


.formulario-perfil div label img {
  width: 6rem;
  height: 5rem;
  border: none;
  border-radius: 50%;
}

#registros{
 
  /* Fondo modal: negro con opacidad al 50% */
      display: none; /* Por defecto, estará oculto */
      position: fixed; /* Posición fija */
      z-index: 1; /* Se situará por encima de otros elementos de la página*/
      padding-top: 250px; /* El contenido estará situado a 200px de la parte superior */
      left: 0;
      top: 0;
      width: 100vw; /* Ancho completo */
      height: 100vh; /* Algura completa */
      overflow: auto; /* Se activará el scroll si es necesario */
      background-color: rgba(0,0,0,0.5); /*Color negro con opacidad del 50% */
       
    }

#contenido-Datos-Vendedor {

  display: none;
  position: absolute;
  /* Relativo con respecto al contenedor -modal- */
  background-color: var(--clr-white);
  border: none;
  margin: auto;
  /* Centrada */
  margin-top: 0;
  padding: 0 2px 0 2px;
  width: 98vw;
  border-radius: 1rem;
  -webkit-animation-name: animarsuperior;
  -webkit-animation-duration: 0.5s;
  animation-name: animarsuperior;
  animation-duration: 0.5s;
  
 
}
 

/* DISPOSITIVOS MOVILES */

@media (max-width:768px) {
  body {
    overflow: hidden;
  }
  .formulario-perfil {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 100%);
    row-gap: 12px;
    text-align: center;
    margin: auto;
    padding: 1rem 0rem;
    margin-top: 10vh;
    
  }
  
}