/* ======= GENERAL ======= */
body {
  margin: 0;              /* Elimina márgenes predeterminados del navegador */
  padding: 0;             /* Elimina relleno predeterminado */
  font-family: Arial, sans-serif; /* Fuente legible y sencilla */
  overflow-x: hidden;     /* Evita scroll horizontal por contenido desbordado */
}

/* ======= NAVBAR ======= */
.custom-navbar {
  height: 100px;          /* Altura fija para la barra de navegación */
  background-color: #f8f9fa; /* Color claro para el fondo de la navbar */
  display: flex;          /* Flexbox para centrar contenido */
  justify-content: center; /* Centra horizontalmente */
  align-items: center;    /* Centra verticalmente */
}

.navbar-logo {
  height: 130px;          /* Altura fija para el logo */
  object-fit: contain;    /* Ajusta el logo sin deformar */
  position: relative;
  top: -20px;             /* Ajusta visualmente hacia arriba para centrar */
}

/* ======= FONDO DE FORMULARIO ======= */
.login-background {
  background-image: url("Imagenes/Fongo_Login.svg"); /* Imagen de fondo decorativa */
  background-repeat: no-repeat;   /* No repetir la imagen */
  background-size: cover;         /* Cubrir todo el área */
  background-position: center;    /* Centrar la imagen */
  min-height: calc(100vh - 100px); /* Altura mínima ajustada restando la navbar */
}

/* ======= CONTENEDOR DEL FORMULARIO ======= */
.login-box {
  background-color: #fff;         /* Fondo blanco para contraste */
  padding: 30px;                  /* Espacio interno */
  border-radius: 12px;            /* Bordes redondeados para estilo moderno */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidad */
  max-width: 500px;               /* Máximo ancho para no estirar demasiado */
  width: 100%;                   /* Ocupa todo el ancho disponible dentro del max-width */
  text-align: center;             /* Texto centrado dentro del contenedor */
}

/* ======= IMAGEN SUPERIOR ======= */
.main-image {
  height: 120px;                 /* Altura fija para la imagen decorativa */
  display: block;                /* Para que margin auto funcione correctamente */
  margin: 0 auto 20px auto;      /* Centrar horizontalmente y margen inferior */
}

/* ======= FORMULARIO DE REGISTRO ======= */
.form-line {
  margin-bottom: 20px;           /* Espacio entre cada campo */
  display: flex;                 /* Flexbox para alinear etiqueta e input en línea */
  align-items: center;           /* Centrar verticalmente */
}

.form-label {
  min-width: 90px;               /* Ancho mínimo para que etiquetas tengan tamaño uniforme */
  text-align: right;             /* Alinear texto a la derecha para quedar junto al input */
  margin-right: 10px;            /* Espacio entre etiqueta y campo de texto */
}

.form-control.flex-fill {
  flex: 1;                      /* El campo ocupa todo el espacio restante */
}

/* ======= BOTÓN ======= */
.login-button {
  font-size: 1.1rem;            /* Tamaño de texto legible */
  padding: 10px;                /* Espaciado interno para hacer botón clickeable */
  background-color: #d3d3d3;    /* Color de fondo gris claro */
  color: #000;                  /* Texto negro para contraste */
  border: none;                 /* Sin bordes predeterminados */
  border-radius: 8px;           /* Bordes redondeados */
  transition: background-color 0.3s ease; /* Transición suave para hover */
  width: 100%;                  /* Botón ocupa todo el ancho del contenedor */
  text-decoration: none;        /* Sin subrayado en texto */
}

.login-button:hover {
  background-color: #bfbfbf;    /* Cambio de color al pasar el mouse */
  cursor: pointer;              /* Cursor cambia a mano para indicar clickeable */
}