/* ----------------- General ----------------- */

body {
  margin: 0; /* Elimina los márgenes por defecto del navegador */
  padding: 0; /* Elimina el padding por defecto */
  font-family: Arial, sans-serif; /* Fuente general */
  overflow-x: hidden; /* Evita scroll horizontal innecesario */
}

/* ----------------- Navbar ----------------- */

.custom-navbar {
  height: 100px; /* Altura del navbar */
  background-color: #f8f9fa; /* Color gris claro */
  display: flex; /* Flexbox para centrar contenido */
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente */
}

.navbar-logo {
  height: 130px; /* Alto de la imagen del logo */
  width: auto; /* Mantiene la proporción */
  object-fit: contain; /* Evita distorsión del logo */
  position: relative;
  top: -20px; /* Levanta un poco el logo para alinearlo mejor */
}

/* ----------------- Fondo ----------------- */

.login-background {
  background-image: url("Imagenes/Fongo_Login.svg"); /* Imagen de fondo */
  background-repeat: no-repeat; /* No se repite la imagen */
  background-size: cover; /* Cubre todo el fondo */
  background-position: center; /* Centrada */
  min-height: calc(100vh - 100px); /* Ocupa todo el alto menos el navbar */
}

/* ----------------- Caja ----------------- */

.login-box {
  background-color: #fff; /* Fondo blanco */
  padding: 30px; /* Espaciado interno */
  border-radius: 12px; /* Bordes redondeados */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
  max-width: 500px; /* Ancho máximo */
  width: 100%; /* Ancho completo en pantallas pequeñas */
}

/* ----------------- Imagen Principal ----------------- */

.main-image {
  height: 120px; /* Altura fija */
  width: auto; /* Mantiene proporción */
  margin: 0 auto; /* Centra horizontalmente */
  display: block; /* Se comporta como bloque para usar margin */
}

/* ----------------- Formulario ----------------- */

.form-line {
  margin-bottom: 20px; /* Espacio entre campos */
  display: flex; /* Muestra los elementos en fila */
  align-items: center; /* Alinea verticalmente al centro */
}

.form-label {
  min-width: 80px; /* Ancho mínimo de la etiqueta */
  text-align: right; /* Alinea el texto a la derecha */
  margin-right: 10px; /* Espacio con el input */
}

.form-control.flex-fill {
  flex: 1; /* Hace que el input ocupe todo el espacio disponible */
}

.icon-img {
  width: 30px; /* Tamaño del icono */
  height: 30px;
  object-fit: contain; /* Evita distorsión de la imagen */
  margin-left: 8px; /* Separación del input */
}

/* ----------------- Botón ----------------- */

.login-button {
  font-size: 1.1rem; /* Tamaño de fuente del botón */
  padding: 10px; /* Espaciado interno */
  background-color: #d3d3d3; /* Color de fondo gris claro */
  color: #000; /* Texto negro */
  border: none; /* Sin bordes */
  border-radius: 8px; /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Efecto suave al pasar el mouse */
  display: inline-block;
  text-decoration: none; /* Elimina subrayado */
  text-align: center;
}

.login-button:hover {
  background-color: #bfbfbf; /* Color cuando el mouse está encima */
  cursor: pointer; /* Cambia el cursor a "mano" */
  text-decoration: none;
}