@charset "utf-8"; /* CSS Document */



/* General Settings */
/* Personalización de la barra de scroll */
::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de scroll */
    height: 8px; /* Altura de la barra de scroll (para desplazamiento horizontal) */
  }
  
  ::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);
   /* Fondo de la barra */
    border-radius: 10px; /* Bordes redondeados */
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888; /* Color del "thumb" (parte móvil) */
    border-radius: 10px; /* Bordes redondeados */
    transition: background 0.3s ease; /* Transición para un efecto suave */
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color del "thumb" al pasar el mouse por encima */
  }
  
  /* Para navegadores que no soportan WebKit */
  .scrollbar {
    scrollbar-width: thin; /* Estilo de barra más delgada (Firefox) */
    scrollbar-color: #888 #f1f1f1; /* Color del thumb y track (Firefox) */
  }
  html {
    scroll-behavior: smooth; /* Suaviza el desplazamiento */
  }

body {
  background-image: url(../imagen/FONDO.png);
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
}

#frase_motivacional {
    color: white;
    font-size: 30px;
    margin-bottom: -70px;
    font-family: "Agency FB";
    font-weight: bold;
    text-align: center;
}

#formulario {
    background-color: rgba(0, 0, 0, 0.918);
    border-radius: 20px;
    width: 90%; /* Cambiado a 90% para ser responsivo */
    max-width: 520px; /* Ancho máximo */
    height: auto;
    color: white;
    text-align: center;
    margin: 25px auto; /* Centrado automático */
    padding: 20px; /* Espaciado interno */
}
label{
  transition: all 0.5s ease-in-out;

  color: rgb(255, 251, 0);

	font-size: 20px;

  font-family: "Agency FB";
  font-weight: bold;
}


#nombre{
  
	transition: all 0.5s ease-in-out;

	color: rgb(255, 251, 0);

	font-size: 20px;

  font-family: "Agency FB";
  font-weight: bold;

 
}

i{
  color: rgb(255, 251, 0);
  transition: all 0.5s ease-in-out;
  margin-top: -2px;
  margin-right: -15px;

}

#documento{


	transition: all 0.5s ease-in-out;

	color: rgb(255, 251, 0);

	font-size: 20px;

  font-family: "Agency FB";
  font-weight: bold;

  
}

input[type=text] {
  text-align: center;
  justify-content: center;
  font-family: "Agency FB";
  font-weight: bold;
	color: white;
	border:0;
 	border-bottom:1px solid rgb(255, 255, 255);  
  background:transparent;

	position:relative;

	width: 200px;
	font-size: 1.2em;
	border-bottom: 3px solid rgb(255, 251, 0);

  


  }

  input[type=email] {
    text-align: center;
    justify-content: center;
  
    color: white;
    border:0;
     border-bottom:1px solid rgb(255, 255, 255);  
      background:transparent;
  
    position:relative;
  
    width: 200px;
    font-size: 1.2em;
    border-bottom: 3px solid rgb(255, 251, 0);
    font-family: "Agency FB";
    font-weight: bold;
      
    
  
  
    }

  input[type=password] {
    text-align: center;
    justify-content: center;

    color: white;
    border:0;
    border-bottom:1px solid rgb(255, 255, 255);  
    background:transparent;

    position:relative;
    

    width: 200px;

    font-size: 1.2em;
    border-bottom: 3px solid rgb(255, 251, 0);
  }
  input[type=date] {

    text-align: center;
    justify-content: center;

    color: white;
    border:0;
    border-bottom:1px solid rgb(255, 255, 255);  
    background:transparent;
  
    position:relative;
  
    width: 150px;
    font-size: 1.2em;
    border-bottom: 3px solid rgb(255, 251, 0);
    font-family: "Agency FB";
    font-weight: bold;
      
  
  }
 
  input::placeholder {

    color: rgb(255, 255, 255);
    font-size: 1.2em;
    font-family: "Agency FB";
    font-weight: bold;
    background:transparent;
  }
    input:focus {

    color: rgb(255, 255, 255);
    font-size: 1.2em;
    font-family: "Agency FB";
    font-weight: bold;
    background:transparent;
    border:none;	
    outline:none;

    border-bottom: 3px solid rgb(255, 251, 0);
    }
    input:active {

    color: rgb(255, 255, 255);
    font-size: 1.2em;
    font-family: "Agency FB";
    font-weight: bold;
    background:transparent;
    }
    

      #Sexo {
        text-align: center;
        justify-content: center;
    
        color: white;
        border:0;
        border-bottom:1px solid rgb(255, 255, 255);  
        background:transparent;
      
        position:relative;
      
        width: 120px;
        font-size: 1.2em;
        border-bottom: 3px solid rgb(255, 251, 0);
        font-family: "Agency FB";
        font-weight: bold;
       
          
     }
      #Sexo option[value="masculino"]{
        
        background-color: black;
        color: rgb(255, 251, 0);
        font-size: 1.2em;
        font-family: "Agency FB";
        font-weight: bold;
        color: white;
      }
      
      #Sexo option[value="femenino"]{
        background-color: black;
        color: rgb(255, 251, 0);
        font-size: 1.2em;
        font-family: "Agency FB";
        font-weight: bold;
      }

      #Nivel {
        text-align: center;
        justify-content: center;
    
        color: white;
        border:0;
        border-bottom:1px solid rgb(255, 255, 255);  
        background:transparent;
      
        position:relative;
      
        width: 120px;
        font-size: 1.2em;
        border-bottom: 3px solid rgb(255, 251, 0);
        font-family: "Agency FB";
        font-weight: bold;
        
        
     }
      #Nivel option[value="principiante"]{
        background-color: black;
        color: rgb(255, 251, 0);
        font-size: 1.2em;
        font-family: "Agency FB";
        font-weight: bold;
        
      }
      
      #Nivel option[value="intermedio"]{
        background-color: black;
        color: rgb(255, 251, 0);
        font-size: 1.2em;
        font-family: "Agency FB";
        font-weight: bold;
        
      }
      #Nivel option[value="avanzado"]{
        background-color: black;
        color: rgb(255, 251, 0);
        font-size: 1.2em;
        font-family: "Agency FB";
        font-weight: bold;
      
      }
      #select1{
       
        width: 100px;
        margin-left: 100px ;
      
        
      }
      #select2{
        margin-top: -50px;
        width: 100px;
        margin-left: 300px ;
        margin-bottom: auto;
     }
     #Altura{
      margin-top: -50px;
        width: 100px;
        height: auto;
        margin-left: 100px ;
        margin-bottom: auto;
      
     }
     #Peso{
      margin-top: 50px;
      width: 100px;
      margin-left: 300px ;
      margin-bottom: auto;
   }
     input[type=number] {

      text-align: center;
      
  
      color: white;
      border:0;
      border-bottom:1px solid rgb(255, 255, 255);  
      background:transparent;
    
      position:relative;
    
      width: 120px;
      font-size: 1.2em;
      border-bottom: 3px solid rgb(255, 251, 0);
      font-family: "Agency FB";
      font-weight: bold;
        
    
    }
     
    button{

      background-color: rgb(255, 251, 0);
      border: 0;
      color: rgb(0, 0, 0);
      position:relative;
      width: 150px;
      height: 40px;
      
      font-size:20px;
      
      font-family: "Agency FB";
      font-weight: bold;
        
      border-radius: 4px;
      
      }
button:hover{
          
  color: rgb(0, 0, 0);
  background-color: white;
          
  cursor: pointer;
}
#boton1{
  text-align: center;
  font-family: "Agency FB";
  font-weight: bold;



  border: 0;
  color: rgb(255, 255, 255);
  position:relative;
  width: auto;
  height: 45px;
  font-size:20px;



  border-end-end-radius: 20px;
  border-end-start-radius: 20px;
}
#boton1:hover{
    
  background-color: rgb(255, 251, 0);
  color: black;
 
 }


footer {
    position: relative; /* Cambiado a relative para que se ajuste al contenido */
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    text-align: center;
    padding: 10px 0; /* Espaciado interno */
    bottom: -110px;
}

q {
    font-size: 15px;
    color: white;
    font-family: "Agency FB";
    font-weight: bold;
}

.f1 {
    color: rgb(255, 251, 0);
}

a {
    color: black;
    cursor: pointer;
}

/* Media Queries para mejorar la responsividad */
@media (max-width: 768px) {
    #formulario {
        width: 85%; /* Ancho más pequeño en pantallas pequeñas */
        margin: 20px auto; /* Centrado automático */
    }

    #frase_motivacional {
        font-size: 24px; /* Tamaño de fuente más pequeño en pantallas pequeñas */
    }
    #boton1:hover{
    
      background-color: rgb(255, 251, 0);
      color: black;
     
     }
     #boton1{
      text-align: center;
      font-family: "Agency FB";
      font-weight: bold;
    
    
    
      border: 0;
      color: rgb(255, 255, 255);
      position:relative;
      width: auto;
      height: 45px;
      font-size:20px;
    
    
    
      border-end-end-radius: 20px;
      border-end-start-radius: 20px;
    }
}