/* Permite configurar los menus justificados hacia 
la derecha y de manera flexible hacia la izquierda */

.sub-navbar .navbar-collapse {
    justify-content: flex-end;
    margin-left: -100%;
    } 

      /* Permite configurar los menus así com la flecha hacia la derecha*/
      
.dropdown-toggle-modificado::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid rgba(0, 0, 0, 0);
    border-right: 0;
    border-bottom: .3em solid rgba(0, 0, 0, 0);
    border-left: .3em solid;
    transform: translateX(30%);
    transform: translateY(30%);

}

/* Permite configurar los items hacia la derecha*/

.dropdown-item-derecha {
    display: inline-block;
    left: 10%;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
}

/* Permite configurar toggle*/

.dropdown-toggle-modificado:focus + .dropdown-menu-derecha, 
.dropdown-menu-derecha:focus-within {
    display: inline-block;
    position: absolute;
    left: 101%;
    z-index: 1000;
    min-width: 10rem;
    padding: .5rem 0;
    font-size: 1rem;
    /*color: #212529;*/
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

/* Asegura que los submenús no se cierren inmediatamente */
.dropdown-menu-derecha {
    display: block;
    position: absolute;
    left: 100%; /* Ajusta si es necesario, 100% lo coloca a la derecha del padre */
    z-index: 1000;
    min-width: 10rem;
    padding: .5rem 0;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

}
/* Asegura que los submenús no se cierren inmediatamente */
.dropdown-menu-derecha {
    display: none;
    position: absolute;

}
/* Permite colocar el menú al mismo nivel que la primera opción*/
.altura-1{
    top: 0%;
}

/* Permite colocar el menú al mismo nivel que la segunda opción*/
.altura-2{
    top: 23px;
}

/* Permite colocar el menú al mismo nivel que la tercera opción*/
.altura-3{
    top: 45px;
}
/* Permite colocar el menú al mismo nivel que la tercera opción*/
.altura-4{
    top: 69px;
}
.altura-5{
    top: 100px;
}

.altura-6{
    top: 123px;
}

/* Permite que los menús desplegables se abran al pasar el cursor */
.navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
}

/* Opcional: Asegura que los sub-submenús también se abran al pasar el cursor */
.navbar-nav .dropdown-menu .dropdown-toggle-modificado:hover + .dropdown-menu-derecha,
.navbar-nav .dropdown-menu-derecha:hover {
    display: block;
    position: absolute; /* Mantiene la posición lateral */
    left: 100%; /* Ajusta si es necesario, 100% lo coloca a la derecha del padre */
}

/* Configuración del login*/
.container-fluid {
  margin: 0;
  padding: 0;
}

.img-fluid {
  height: 100%;
  object-fit: cover;
}

.formulario-bg {
  color: white;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.formulario {
  width: 100%;
  max-width: 550px;

}
.panel{
    margin-left: auto;
    margin-right: auto;
    /*opacity: 0.8;*/
    background-color: rgba(0, 0, 0, 0.65);
}
.row .col-md-4 {
    /*background-color: #000000;*/
    height: auto;
    margin-left: 0%;
    width: 100%;
        
}




@media (max-width: 768px) {
  .row .col-md-4{
  /*background-color: #000000;*/
  margin: 0;
  padding: 2rem;
  }

  .formulario-bg {
    min-height: auto;
    padding: 2rem 1rem;
  }

  .img-fluid {
    height: auto;
  }
  .body {
    padding-top: 60px; /* ajusta según la altura del navbar */
  }

}
/* Termina configuración login

/*Configuración parte de la barra de navegación*/
.navbar-nav > li.dropdown > a::after {
    display: none !important;
}
/* Abrir dropdown al hacer hover en desktop */
.navbar-nav > li.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Mantener el estado “activo” visualmente al pasar el cursor */
.navbar-nav > li.dropdown:hover > a {
    background-color: transparent; /* ajusta según tus colores */
}

/* Evitar que el menú se “brinque” por margin superior */
.navbar-nav > li.dropdown .dropdown-menu {
    margin-top: 0; /* asegura alineación con el item */
}
/* Asegura que el dropdown se muestre debajo del item */
.navbar-nav > li.dropdown .dropdown-menu {
    top: 100% !important; /* lo baja justo debajo del enlace */
    margin-top: 0 !important; /* evita espacio extra */
    position: absolute !important; /* asegura que no se superponga */
    z-index: 1000; /* lo mantiene encima del contenido pero debajo de la barra */
}


/*Finaliza*/

.container {
    margin-top: 1rem; /* o 32px */
}

#subNavBarDropdown {
    margin-left: -200px;
}