/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: white;
  text-align: center;
  overflow: hidden;
  margin: 0;
}

  .pantalla-inicial {
    transition: opacity 1s ease;
  }

 .pantalla-inicial.oculta {
    opacity: 0;
    pointer-events: none;
  }

.contenedor-imagen {
  
  text-align: center;
  
}


    .imagen-bajada {
      margin-top: 150px;
    }
    
.fade-in-image {
  /* Se recomienda aplicar la animación al contenedor para mayor control */
  animation: fadeIn 5s; 
  /* Opcional: puedes añadir la animación directamente a la imagen */
  /* img { animation: fadeIn 5s; } */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

input[type="password"] {
   font-size: 16px;
    padding: 3px;
    border: 3px solid #FFFFFF;
    border-radius: 4px;
    background-color: #0000;
    top: 480px; 
}
input[type="password"].error {
    border-color: #ff0000;
    background-color: #ffe6e6;
}

.caja-password {
   position: relative;
  top: 50px; /* Ajusta el valor según necesites */
  display: block; /* Asegura que el margen se aplique correctamente */
  margin: 0 auto;
  color: white;
  outline: none;        /* Elimina el borde azul por defecto */
  box-shadow: none;     /* Evita cualquier sombra o brillo */
  border: 2px solid white;
}

 ::placeholder {
    color: white;
    opacity: 0.7;
  }