/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  position: relative;
  display: flex; /* 🔥 Mantiene los elementos en la misma línea */
  align-items: center; /* 🔥 Alinea verticalmente los elementos */
  padding: 0 0px; /* 🔥 Evita que los elementos queden pegados a los bordes */
}
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 9px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    background-color: #333;
    color: white;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    float: right;
    display: block;
}


.empresa-info {
  margin-left: auto; /* 🔥 Empuja este elemento hacia la derecha */
  display: flex;
  align-items: center;
  color: #caec6c; /* Color del texto */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 10px;
}

  .bg-login-image {
    background: url("/static/images/fit.png");
    background-position: center;
    background-size: cover;
    opacity: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .bg-login-image:hover {
    background: url("/static/images/fit_blau.png");
    background-position: center;
    background-size: cover;
    opacity: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .text-gray-600 {
    color: #caec6c !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

/* Contenedor del dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Botón del dropdown */
.dropbtn {
  background-color: #333;
  color: white;
  padding: 10px 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Contenido del dropdown */
.dropdown-content {
  display: none;
  position: absolute; /* 🔥 Permite que el menú flote */
  top: 100%; /* 🔥 Aparece justo debajo del botón */
  left: 0;
  background-color: white;
  min-width: 200px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 9999 !important; /* 🔥 Máxima prioridad para que aparezca sobre todo */
  min-width: 200px;
  max-width: 300px; /* 🔥 Establece un ancho máximo */
  white-space: nowrap; /* 🔥 Evita saltos de línea */
  overflow: hidden; /* 🔥 Esconde el contenido extra si es demasiado largo */
  text-overflow: ellipsis;
}

/* Estilo de los enlaces dentro del dropdown */
.dropdown-content a {
  color: black;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
}

/* Cambia el color al pasar el mouse */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* 🔥 Forzar que el dropdown se muestre sobre otros divs */
.dropdown-content {
  visibility: visible;
  opacity: 1;
}

/* Mostrar el menú al pasar el mouse */
.dropdown:hover .dropdown-content {
  display: block;
}

.promo-box {
  position: fixed;
  top: 5%;
  width: 350px;
  background: #007bff;
  color: white;
  padding: 15px;
  border-radius: 10px 0 0 10px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

/* Publicidad en la derecha */
.promo-right {
  right: 5%;
}

/* Publicidad en la izquierda */
.promo-left {
  left: 5%;
  background: #28a745; /* Verde para diferenciar */
}
.promo-box:hover {
  transform: scale(1.05);
}