/* Ajustamos la anchura máxima del navbar */
.navbar{
  max-width: 3200px;
}

/* =====================================================================
========================== MENU & NAVBAR ==============================
=====================================================================*/

/* Centramos las banderas de los idiomas añadiendo un margin-left */
.navbar .dropdown-menu.idiomas a{
  padding: 10px 20px;
}

/* Clase para mostrar la bandera que no este activa este algo más clarita */
.imagen-seleccionada img { /* Estilo para la imagen seleccionada */
  opacity: 1; /* Imagen clara */
}

.imagen-no-seleccionada img { /* Estilo para la imagen no seleccionada */
  opacity: 0.5; /* Imagen con opacidad reducida */
}

/* PARA EVITAR QUE SE PONGA EN GRIS AL CLICAR SOBRE EL ENLACE */

/* Estilo base para los enlaces en el navbar */
.navbar a {
    color: #FFFFFF; /* Color deseado para el texto del enlace */
  }
  
  /* Color al pasar el ratón sobre el enlace */
  .navbar a:hover {
    color: #F0F0F0; /* Color deseado al pasar el ratón sobre el enlace */
  }
  
  /* Color del enlace cuando está activo */
  .navbar a:active,
  .navbar a:focus {
    color: #FFFFFF; /* Color deseado al hacer clic en el enlace */
    background-color: transparent; /* Evita el cambio de fondo al hacer clic */
  }
  
  /* Color del enlace visitado */
  .navbar a:visited {
    color: #FFFFFF; /* Color deseado para los enlaces visitados */
  }
  
  /* Quitamos el padding del "container" que engloba al menú */
  .navbar .container-fluid{
    padding: 0;
  }
  
  /* Quitamos la flechita para el menú desplegable de los idiomas */
  .no-arrow::after{
    display: none !important;
  
  }
  
  /* Para que los menús se mantengan abiertos un cierto tiempo antes de sacar el ratón de ellos */
  .stay-open{
    display: block !important;
  }
  
  .inicar-sesion-user{
    display: none;
  }
  
  /* Especificaciones del Logo de TimeLaboris */
  .navbar .logoTimeLaboris{
    width: 174px;
  }
  
  /* Ocultamos el icono de TimeLaboris inicialmente */
  .navbar .iconoLogoTimeLaboris{
    display: none; 
    width: 30px;
    height: auto;
  }
  
  /* Hacemos que desaparezca lo de Iniciar Sesión y que aparezca el símbolo de user cuando ya no quepa en la pantalla */
  @media screen and (max-width: 1200px){
  
    /* Ocultamos el texto "Iniciar Sesión" y mostramos el "Símbolo de user" */
    .inicar-sesion-texto{
      display: none;
    }
  
    .inicar-sesion-user{
      display: block;
    }
  
  }
  
  /* Ajustamos animaciones suaves para cuando se abren submenús en la versión del ordenador */
  @media screen and (min-width: 992px) {
  
    /* Ajustamos los últimos botones para que parezca que están a la misma altura que los otros */
    .navbar-right{
      position: relative;
      top: 2.5px;
    }
    
    .dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    }
    
    .dropdown-menu.stay-open {
      opacity: 1;
      visibility: visible;
    }
    
    .navbar .idiomas{
      opacity: 1;
      visibility: visible;
    }
    
  }
  
  /* Quitamos el fondo al seleccionar */
  .dropdown-item:hover {
    background-color: transparent;
  }
  
  /* Creamos el estilo para los menú desplegables */
  
  .barra-navegacion-ordenador .dropdown-menu{
    background: #FFFFFF;
    /* drop-shadow-black */
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
  }
  
  /* Menú para el ordenador y para el móvil */
  #menu,
  #menu-movil{
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Peso de la fuente regular */
    font-size: 16px;
    color: #2B2B2B;
    position: fixed;
    top: 0; /* Fija la barra de navegación en la parte superior */
    width: 100%;
    background-color: #FFFFFF;
    z-index: 1001; /* Un z-index más alto para asegurar que esté por encima de las imágenes del slider */
  }
    
    
  /* con li > a indicamos que estas propiedas se le van a aplicar al 
  enlace "a" siempre y cuando esté dentro de "link" */
  #menu li > a,
  #menu-movil li > a{ /* Con "a" nos refereimos solo al enlace */ /* PARA BOTONES HASTA INICIAR SESIÓN */
    color: #3f3f3f;
  }
    
  /* Configuramos el botón de "Regístrate" */
  .navbar .registrate{
    display: none; /* Dejamos sin poner el botón de Regístrate y dejamos solo el de PRUEBA GRATIS */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 10px;
  
    width: 101px;
    height: 36px;
  
    border: 2px solid #F14E32;
    border-radius: 20px;    
  
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #F14E32 !important;
    text-decoration: none;
  }
  
  /* Para cuando se pasa el ratón por encima del botón */
  .navbar .registrate:hover{
    border-color: #D33C1E;
    color: #D33C1E !important;
  }
  
  .pruebagratis{ /* Para botón "PRUEBA GRATIS" */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 10px;
  
    box-sizing: border-box;
  
    border: 2px solid #F14E32; /* Color del borde naranja */
    background-color: #F14E32; /* Color de fondo para el botón */
    border-radius: 100px; /* Bordes redondeados */
    box-shadow: 0px 4px 4px 0px #00000040;
  
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF !important;
  
    width: 146px;
    height: 43px;
  
    text-decoration: none;
    text-align: center;
  }   
  
  .pruebagratis:active,
  .pruebagratis:focus,
  .pruebagratis:hover {
    background: #D33C1E !important; /* Para cambiar el color de fondo del botón cuando el usuario coloca el cursor sobre el */
    border: #D33C1E;
  }
  
  
  /* PARA FUNCIONALIDADES */
  .dropdown-menu.multi-column {
    width: 200px; /* Ancho del contenedor */
    height: 200px;
  }
  
  .dropdown-menu.multi-column a{
    margin-left: -1rem !important;
  }
  
  @media (max-width: 992px) {
    .dropdown-menu.multi-column {
      width: 100%; /* Para que se vea al 100% */
    }
  }
  
  /* Iconos principales (Círculitos de Colores) */
  
  .icono-principal{
    display: inline-block;
    
    width: 1em; 
    height: 1em; 
    border-radius: 50%; 
  
    margin: -0.15em;
  }
    
  
  /* Para las fotos de las distintas opciones del menú de funcionalidades */
  .icono-foto-funcionalidades{
    display: inline-block;
  
    width: 1em;
    height: auto;
  
    margin-top: -0.2em;
  }
  
  /* Para superponer las dos imágenes del icono de partner */
  .icono2-partner{
    position: absolute;
    left: 10%;
    top: 50%;
  
    width: 0.5em;
    height: auto;
  }
  
  /* Para los títulos principales de "Funcionalidades" */
  
  .titulo-funcionalidades{
    display: inline-block;
    padding: 10px;
    
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.1rem;
    
    margin: 0; /* Para quitar el margen por defecto por si se mete en otra hoja de CSS */
  }
    
  #menu .dropdown-menu a {
    padding-left: 0px; /* Establece el padding izquierdo para los enlaces dentro del menú desplegable */
  }
  
  /* Para dejar espacio entre las diferentes opciones del submenú */
  .dropdown-submenu li{
    margin-bottom: 10px !important;
  }
  
  /* Para los submenús desplegables */
  .navbar-nav li:hover > ul.dropdown-menu {
    display: block !important;
  }
  .dropdown-submenu {
    position:relative;
  }
  
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top:-6px;
  }
  
  /* Para la flecha cuando se abre el submenú */
  .dropdown-menu > li > a:after {
    text-decoration: none;
    transform: rotate(-90deg); /* Rotada */
  } 
  
  /* Estilos personalizados para la flecha del menú desplegable */
  .nav-link.dropdown-toggle::after {
    content: '\f078'; /* Código del icono FontAwesome o cualquier otro icono */
    font-family: 'FontAwesome';
    display: inline-block;
    margin-left: 0.255em;
    margin-top: -0.3em; /* Para subir un poco la flecha y alinearla correctamente */
    vertical-align: middle;
    border: none;
  
    font-size: 0.8em;
  }
  
  .dropdown-submenu > .dropdown-item::after {
    content: '\f078'; /* Código del icono FontAwesome para submenú */
    font-family: 'FontAwesome';
    display: inline-block;
  
    margin-top: 0.4em;
    vertical-align: middle;
    border: none;
  
    position: absolute; /* Asegurar que la flecha esté posicionada absolutamente */
    right: 5px; /* Distancia fija desde el borde derecho */
  }
  
  /* Para la barra de navegación, en función de si es para versión móvil o de ordenador */
  
  .barra-navegacion-movil {
      display: none; /* Empieza no viéndose hasta que es inferior a 992px */
  }      
        
  @media (min-width: 992px) { 
  
    #menu li > a{ /* Bontones hasta Iniciar Sesión */
      margin-left: 20px !important;
      /* display: inline; */
      font-size: 16px !important;
    }
  
    /* Ocultamos el icono del user para la versión del ordenador */
    .navbar .simbolo-user{
      display: none;
    }
  
  
    .logoInicial{ /* Para logo Time Laboris */
      margin-left: 32px; 
    }
  
    /* Para que se vea la barra de navegación de la verisón de ordenador */
    .barra-navegacion-ordenador {
        display: block; /* Muestra el elemento solo en dispositivos con un ancho de pantalla máximo de 768px */
    }
  
  }
  
  
  /* Ajustamos el menú de navegación para cuando no caben los enlaces */
  @media screen and (min-width: 992px) and (max-width: 1375px){
  
    /* Recortamos la imagen de TimeLaboris para que solo se vea el logo y no el texto */
    .navbar .logoTimeLaboris{
      display: none;  
    }
  
    /* Ocultamos el icono de TimeLaboris inicialmente */
    .navbar .iconoLogoTimeLaboris{
      display: block; 
    }
  
    /* Ocultamos la "HOUSE" de inicio ya que para volver a la página de Inicio solo se quedará el logo de TimeLaboris */
    .navbar .casa-inicio{
      display: none;
    }
  
  }
  
  @media screen and (min-width: 992px) and (max-width: 1100px){
  
    /* Disminuimos el tamaño de letra para que quepan las palabras */
  
    #menu li > a{ /* Con "a" nos refereimos solo al enlace */ /* PARA BOTONES HASTA INICIAR SESIÓN */
      font-size: 14px !important;
    }
  
    /* Ajustamos el botón de "PRUEBA GRATIS" */
    .pruebagratis{ /* Para botón "PRUEBA GRATIS" */  
      width: 120px;
      height: 33px;
    }   
  
    /* Ajustamos la anchura del botón regístrate */
    .navbar .registrate {
      width: 80px;
      font-size: 14px;
      line-height: 17px;
    }
  
  }
  
  @media (max-width: 991px) { /* Para cualquier dispositivo cuya anchura MÁXIMA sea 767px */
    
    /* Ocultamos la barra de navegación de la versión del ordenador */
    .barra-navegacion-ordenador {
      display: none; /* Empieza no viéndose hasta que llega a 992px */
    }
  
    /* Mostramos el menú de navegación para el móvil */
    .barra-navegacion-movil {
      display: block; 
    }
  
    /* Reducimos el tamaño del logo de Time Laboris */
    .navbar .logoTimeLaboris{
      width: 170px;
      padding-left: 25px; /* Para que tenga algo de margen a la derecha */
    }
  
    .navbar .nav-item{
      padding-left: 30px; /* Para que tenga algo de margen a la derecha */
    }
  
    /* Dejamos algo de padding derecho para que haya separación entre el icono y el texto */
    .navbar .icono-principal{
      margin-right: 10px;
    }
  
    /* Dejamos margen para el botón de "Regístrate" */
    .navbar .registrate{
      margin-left: 20px;
    }
  
    .pruebagratis{ /* Para botón "PRUEBA GRATIS" */
      margin-left: 0px !important;
      margin-top: 10px !important;
    } 
  
    /* Configuramos la posición de la bola del mundo que representa el cambio de Idioma */
    .navbar .idiomas-movil{
      margin-top: 10px;
    }
  
    .navbar .idiomas{
      padding-bottom: 10px;
      margin-top: 10px;
      width: 40px;
      min-width: 70px;
    }
  
    /* Anchura máxima de los menú despleglables */
    .navbar .dropdown-menu{
      max-width: 200px;
    }
  
    /* con li > a indicamos que estas propiedas se le van a aplicar al 
    enlace "a" siempre y cuando esté dentro de "link" */
    #menu li > a{ /* Con "a" nos refereimos solo al enlace */ /* PARA BOTONES HASTA INICIAR SESIÓN */
        margin-left: 32px !important;
        font-size: 16px !important;
    }
  
    #menu .dropdown-menu a {
        margin-left: 0px !important; /* Elimina el margen para los enlaces dentro de dropdowns */
    }
  
    /* Mostramos el botón algo más a la izquierda con algo de padding */
    .navbar-toggler{
      margin: 10px;
    }
     
  }  
  
  
  .pointer {
    cursor: pointer;
  }