/*
 * ----------------------------------------
 * VARIABLES CSS
 * ----------------------------------------
 * Define colores principales para un fácil mantenimiento.
 * Se cambió la paleta a tonos de azul.
 */
:root {
  --color-principal: #0A6CFF; /* Azul vibrante para elementos principales */
  --color-hover: #0048A4;     /* Azul oscuro para el efecto al pasar el mouse */
  --color-gris-claro: #adadad;
  --color-enlace: #0A6CFF;
  --color-fondo-enlace: #2E79FF; /* Azul más claro para los enlaces */
  --color-borde-formulario: silver;
}

/*
 * ----------------------------------------
 * ESTILOS GENERALES
 * ----------------------------------------
 * Estilos básicos para el cuerpo y el fondo.
 */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../fotos/mlb_park.jpg") no-repeat center/cover;
  filter: blur(8px);
  z-index: -1;
}

/*
 * ----------------------------------------
 * ESTILOS DEL FORMULARIO
 * ----------------------------------------
 * Estilos para la caja principal del formulario.
 */
.formulario {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.formulario h1 {
  text-align: center;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--color-borde-formulario);
}

.formulario form {
  padding: 0 40px;
  box-sizing: border-box;
}

/*
 * ----------------------------------------
 * ESTILOS DE LOS CAMPOS DE ENTRADA
 * ----------------------------------------
 * Estilos para el contenedor, input, label y la línea de efecto.
 */
.username, .contrasena {
  position: relative;
  border-bottom: 2px solid var(--color-gris-claro);
  margin: 30px 0;
}

.username input, .contrasena input {
  width: 100%;
  height: 40px;
  padding: 0 5px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
}

.username label, .contrasena label {
  position: absolute;
  top: 50%;
  left: 5px;
  color: var(--color-gris-claro);
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  transition: 0.5s;
}

.username span::before, .contrasena span::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-principal);
  transition: 0.5s;
}

/* Efecto al enfocar el input: Se agrupan los selectores */
.username input:focus ~ label, .username input:valid ~ label,
.contrasena input:focus ~ label, .contrasena input:valid ~ label {
  top: 5px;
  color: var(--color-principal);
}

.username input:focus ~ span::before, .contrasena input:focus ~ span::before {
  width: 100%;
}

/*
 * ----------------------------------------
 * ESTILOS ADICIONALES
 * ----------------------------------------
 * Estilos para el enlace de "recordar" y el botón de enviar.
 */
.recordar {
  margin: -5px 0 20px 5px;
  cursor: pointer;
}

.recordar a {
    color: var(--color-enlace);
    text-decoration: none;
}

.recordar a:hover {
    text-decoration: underline;
}

/* Se cambió el selector de 'input[type="submit"]' a 'button' */
button {
  width: 100%;
  height: 50px;
  border: 1px solid;
  background: var(--color-principal);
  border-radius: 25px;
  font-size: 18px;
  color: white;
  cursor: pointer;
  outline: none;
  transition: 0.5s;
  text-decoration: none; 
}

button:hover {
  border-color: var(--color-hover);
}

/*
 * ----------------------------------------
 * ESTILOS DEL REGISTRO
 * ----------------------------------------
 * Estilos para el texto y el enlace de registro.
 */
.registrarse {
  margin: 30px 0;
  text-align: center;
  font-size: 16px;
  color: black;
}

.registrarse a {
  color: var(--color-fondo-enlace);
  text-decoration: none;
}

.registrarse a:hover {
  text-decoration: underline;
}