#sp-top-bar {
  background-color: #FFF;
  padding: 0;
}

#sp-top1 {
	width: 100%;
}

#form_15 .row,
#form_16 .row {
  justify-content: center;
  /*display: flex;*/
 /* justify-content: flex-start;*/
}
#form_15 .justify-content-between {
  /*justify-content: center !important;*/
  margin-left: 240px;
  width: 455px;
}
#system-message-container {
  font-family: 'Noto Sans JP', sans-serif;
}

.aviso-legal:hover,
.politica-privacidad:hover {
  text-decoration: underline;
}


.chosen-container-single .chosen-single {
  border: 1px solid #d4d9de ;
  height: 55px;
  background: #fff;
  padding: 15px 0 0 10px;
}

#empresa___nombre_de_tu_empresa {
	height: 55px;
}
#empresa___tu_nombre {
	height: 55px;
}

#empresa___e_mail{
    height:55px;
}
#empresa___tel_fono {
	height: 55px;
}

#empresa___contrase_a {
	height: 55px;
}
#empresa___contrase_a_check{
    height:55px;
}

.chosen-container {
  font-size: 1rem;
}
/* Para pantallas grandes y medianas */
@media (min-width: 768px) {
  .fabrikElement.col-sm-9 {
    width: 72.5%;
  }
  }


/* Para pantallas más pequeñas */
@media (max-width: 767px) {
  .fabrikElement.col-sm-9 {
    width: 100%;
  }
  }

/* Para artículos */
.article-body:hover {
   background-color: #000;
   color: #fff;
   border-radius:50px;
   transition: background-color 0.3s, color 0.3s;
}



/* Estilos para cada artículo */
.article {
    margin: 10px;
    text-align: center;
}

/* Estilos para el cuerpo del artículo */
.article-body {
    padding: 20px;
    border: 1px solid #000;
    background-color: transparent;
    border-radius: 50px;
    color: #000;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

/* Estilos opcionales para el botón del artículo */
.article-button {
    border: 2px solid #000;
    background-color: transparent;
    color: #000;
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}
.article-list .article {
  border: none; /* Esto elimina el borde definido previamente */
  
}

.article-list .article a {
    color: #000;
    text-decoration: none; /* Quita el subrayado por defecto */
    transition: color 0.3s; /* Transición suave para el cambio de color */
   
}

.article-list .article a:hover {
   color: #fff;
}

/* Mantener el color de texto heredado en hover */
/*.article-body:hover .article-introtext a h2 {
  color: inherit;
}

.button-container:hover h2 a {
  color: #000;      /* Cambiar el color del texto en hover */
}


#form_43 .fabrikElement.col-sm-10{
   /*width:936px;*/
   width:580px;
    
}

/* Aplicar margen izquierdo solo al formulario específico */

#form_43 .form-check.fabrikgrid_checkbox.col-sm-12 {
  margin-left: 120px;
}
/* Estilos para hacer el botón más grande presupuesto*/
/*.btn.btn-primary.button.solicitar_presupuesto {
  padding: 18px 60px; /* Ajusta el padding según sea necesario */
  /*font-size: 22px;*/ /* Ajusta el tamaño de la fuente según sea necesario */
}

/* Estilos para hacer el botón más grande registro de empresas*/
.btn.btn-primary.btn-lg.w-100.button.registrarme{
  /*padding: 10px 95px;*//* Ajusta el padding según sea necesario */
  font-size: 1.25rem;
  /*line-height: 44px;*/
  /*margin-left: 135px;*/
  padding:0.5 rem;
  
   
}
/*test*/
.sppb-panel-body a {
    color: black !important; /* Cambia el color del texto del enlace a negro siempre */
}
.sppb-panel-body:hover a {
    color: white !important; /* Cambia el color del texto del enlace a blanco solo cuando el acordeón está seleccionado (es decir, cuando el mouse está sobre el acordeón) */
}

/*test*/
.article-body:hover h2 a {
  color: #fff !important; /* Esto forzará el cambio de color a blanco en hover */
}

h2 a {
  color: #000; /* Color del texto de los enlaces por defecto */
  transition: color 0.3s; /* Transición suave para el cambio de color */
}

/*test*/
.article-body:hover .article-introtext a {
  color: #fff !important; /* Cambia el color del texto de los enlaces a blanco al pasar el cursor */
 
}
.sppb-panel-body:hover a {
    color: white !important; /* Cambia el color del texto del enlace a blanco solo cuando el acordeón está seleccionado (es decir, cuando el mouse está sobre el acordeón) */
}
/*test*/
.article-body:hover h2 a {
  color: #fff !important; /* Esto forzará el cambio de color a blanco en hover */
}
h2 a {
  color: #000; /* Color del texto de los enlaces por defecto */
  transition: color 0.3s; /* Transición suave para el cambio de color */
}
/*test*/
.article-body:hover .article-introtext a {
  color: #fff !important; /* Cambia el color del texto de los enlaces a blanco al pasar el cursor */
}
.article-introtext a {
  color: #000; /* Color del texto de los enlaces por defecto */
  transition: color 0.3s; /* Transición suave para el cambio de color */
}
/*underline*/
.article-body .article-introtext p a:hover {
  text-decoration: underline; /* Añade un subrayado solo al enlace sobre el que se pasa el cursor */
}
/*ocultar texto menu acceso*/
.far.fa-user {
	color: #676d73;
	line-height: 65px;
}
.sp-module-content { 25-06-2024 para juntar las lineas del menu
	line-height: 56px;
}
/*boton acceso empresas*/

.btn.btn-outline-primary.btn-lg.button.registrar {
   /* padding: 10px 15px 8px; *//* Ajusta el espacio alrededor del texto */
    font-size: 14px; /* Tamaño del texto */
    border-radius: 30px; /* Radio de borde */
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    position: relative; /* Para el efecto hover */
    overflow: hidden; /* Para el efecto hover */
    background-color: rgb(204, 51, 51); /* Color de fondo azul */
    color: #ffffff; /* Color de texto blanco */
    text-align: center; /* Centrar el texto */
    line-height: 1.5; /* Ajusta la altura de línea para centrar verticalmente */
    transition: background-color 0.3s ease; /* Transición suave para el efecto hover */
    margin-right: 10px; /* Espacio entre el botón y el enlace de texto */
    /*font-weight: bold;*/
    font-family: "Roboto", sans-serif;
    border:none;
}

.btn.btn-outline-primary.btn-lg.button.registrar:hover {
    background-color: rgb(153, 38, 38); /* Color de fondo azul oscuro en el hover */
    color: #ffffff; /* Color de texto blanco */
}

.link-text {
    font-size: 14px; /* Tamaño del texto */
    color: #2665da; /* Color del enlace de texto */
    text-decoration: none; /* Sin subrayado */
    line-height: 1.5; /* Ajusta la altura de línea para alinear verticalmente */
    vertical-align: middle; /* Alinea el texto verticalmente al centro */
    cursor: pointer; /* Cursor de puntero para el enlace de texto */
    font-weight: bold; /* Texto en negrita */
    font-family: "Roboto", sans-serif;
  
}
/* Estilos para el enlace al pasar el cursor sobre él */
.far.fa-user:hover {
    /* Agrega los estilos que deseas para el hover */
    color: rgb(153, 38, 38);
  
    
}
/* Aplicar la fuente "Roboto" solo al texto del enlace "Acceso" */
.far.fa-user {
    font-family: "Font Awesome 5 Free", sans-serif; /* Mantén la fuente del icono */
    font-size: 14px;
}

.far.fa-user:not(:last-child) {
    margin-right: 0.5em; /* Espacio entre el icono y el texto */
}

.reduce-spacing {
    font-family: 'Roboto', sans-serif;
    font-size: 10pt;
    letter-spacing: -0.5px; /* Ajusta este valor según tus necesidades */
    line-height: 1;
    margin: 0; /* Elimina los márgenes para reducir el espacio vertical */
    color: #676d73; /* Define el color del texto */
}
 /*botom categorias principales */
.sppb-btn-info.sppb-btn-outline {
    color: #676D73;
    border-color: #676D73;
   
}
.sppb-btn-info.sppb-btn-outline:hover {
    color: #ffffff; /* Nuevo color de texto al pasar el ratón (hover) */
    background-color: rgb(204, 51, 51); /* Color de fondo al pasar el ratón (ya definido) */
    border-color: rgb(204, 51, 51); /* Color de borde al pasar el ratón (ya definido) */
}

/*color footer*/
#sp-footer {
	background: #ffffff;
	color: #000;
}
#sp-bottom {
	background: #ffffff;
	color: #000;
    border-top: 1px solid #e3e3e3;
    padding: 30px 0 30px;
}

#sp-bottom .sp-module .sp-module-title {
	font-weight: 700;
	font-size: 21px;
	margin: 0 0 20px; 
	color: #030303; 
}

#sp-footer1 {
	font-size: 14px;
	padding: 0;
	border-top: 1px solid #e3e3e3;
	border-bottom: 1px solid #e3e3e3;
}
/* Aplicar la fuente a toda la página o a un contenedor específico */
/*body, .sp-copyright {
    font-family: 'Noto Sans JP', sans-serif;
}

/* Estilo para subrayar enlaces al pasar el ratón */
.sp-copyright a {
    text-decoration: none; /* Quitar subrayado por defecto */
    color: #676d73; /* Color del texto */
    transition: text-decoration 0.3s ease; /* Transición suave */
}

.sp-copyright a:hover {
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* Opcional: estilos adicionales para mejorar la apariencia */
.sp-copyright {
   
    color: #676d73;
}
#sp-footer .container-inner{
     padding:0;
}
.divider.fas.fa-map-marker-alt {
	display: none;
}

#section-id-1703966796075 {
	cursor: pointer;
}

/* menu texto legales*/

/*#sp-left .sp-module,
#sp-right .sp-module {
    margin-top: 50px;
    border: 1px solid #c9d7e3;
    padding: 0;
    border-radius: 3px;
}
*/
#sp-left .sp-module.custom-menu,
#sp-right .sp-module.custom-menu {
    /* Aquí puedes personalizar aún más los estilos específicos para custom-menu */
    margin-top: 50px;
    border: 1px solid #c9d7e3;
    padding: 0;
    border-radius: 3px;
}

/*.sp-module ul > li.active {
    background-color: #cc3333;
}

.sp-module ul > li.active > a {
    color: white;
}
*/
#sp-left .sp-module.custom-menu ul > li.active,
#sp-right .sp-module.custom-menu ul > li.active {
    background-color: #cc3333;
}

#sp-left .sp-module.custom-menu ul > li.active > a,
#sp-right .sp-module.custom-menu ul > li.active > a {
    color: white;
}

/*#sp-left .sp-module ul > li > a,
#sp-right .sp-module ul > li > a {
    display: block;
    padding: 0px 0px 10px 20px;
    line-height: 36px;
}
*/
#sp-left .sp-module.custom-menu ul > li > a,
#sp-right .sp-module.custom-menu ul > li > a {
    display: block;
    padding: 0px 0px 10px 20px;
    line-height: 36px;
}
/*breacrumbs*/
.breadcrumb{
  font-size: 12px;
  padding: 0.45rem 1rem;
}
/*subir el menu texto legales*/
#sp-main-body {
    padding: 30px ; /* Ajusta los valores según tus necesidades */
}

#sp-left {
	margin-top: -32px;
}
/*#sp-main-body {
	background-color: #fafafa;
}

/* registro de empresas*/
#form_15 {
   padding-top:40px;
   padding-bottom:40px;
   background-color: #f5f5f5;
}

    /* Estilos generales para el formulario */
#form_15{
        max-width: 800px; /* Ajusta el ancho según tus necesidades */
        margin: 0 auto; /* Centra horizontalmente */
}
  /*modulo inicio de cesion*/

.col-lg-4 {
	flex: 0 0 auto;
	width: 50%;
}
@media (max-width: 767px) {
    .col-lg-4 {
        width: 100%; /* Cambia el ancho según tus necesidades */
    }
}

#com-users-login__form {
	background: #f5f5f5;
	padding: 45px;
}
/* CSS para el input con ID 'username' dentro del contenedor con ID 'com-users-login__form' */
#com-users-login__form #username {
    height: 55px;
}

/* CSS para el input con ID 'username' dentro del contenedor con ID 'com-users-login__form' */
#com-users-login__form #password {
    height: 55px;
}
/* list-group login*/
   list-group {
   display: flex;
   flex-direction: row;
   justify-content: space-around; /* Espacio alrededor de los elementos */
   /*margin-top: -30px; /* Mueve la lista hacia arriba */*/
   /*border: none; /* Elimina cualquier borde existente */*/
   
}
.list-group-item:hover {
          
    text-decoration: underline; /* Subraya el texto al pasar el ratón */
}

/*texto cabecera login empresas*/
.login-description {
	font-size: 30px;
	text-align: center;
	background-color: #f5f5f5;
	font-family: Noto Sans JP;
	font-weight: 600;
    color: #000;
    padding-top: 30px;
}

#form_15 .form-check.fabrikgrid_checkbox.col-sm-12 {
  padding-left: 0.2em;
}

#form_15 .btn-group {
  display: contents;

}
/* cambiar el color de los botones */
.btn-primary, .sppb-btn-primary {
    border-color: #cc3333; 
    background-color: #cc3333 !important;
}
.btn-primary:hover, .sppb-btn-primary:hover {
    border-color: rgb(153, 38, 38);
    background-color: rgb(153, 38, 38);
}

/* Estilos menu altas de empresas */
.item_class {
    border-radius: 30px;
    background-color: #cc3333;
    color: #ffffff !important;
    padding: 10px 15px !important;
    line-height: 1.5 !important;
   
}

/* Estilos para el hover alta de empresas */
.item_class:hover {
    background-color: #aa2222; 
}
.sp-sign-in {
	color: #676d73;
}
.far.fa-user.me-1{
    color: #676d73;
}
/* Asegúrate de que el CSS esté lo suficientemente específico para aplicar estilos */
#list_27_com_fabrik_27 {
    width: 1200px; /* Asegura que la tabla use todo el ancho disponible */
    border-collapse: collapse; /* Colapsa los bordes para que no haya espacios */
}

/* Estilos para el menú desplegable */
.codigo.custom_user_login_menu .sp-dropdown-items {
    position: absolute; /* Asegura que el menú desplegable se posicione correctamente */
    z-index: 20; /* Asegura que el menú desplegable esté por encima de otros elementos */
}


/* PARA HACER LA LISTA DE EMPRESAS REGISTRADAS MAS GRANDE CON DESPLAZABLE */
#list_27_com_fabrik_27 {
    /*width: 1200px; /* Asegura que la tabla use todo el ancho disponible */
    width:1125px;
    border-collapse: collapse; /* Colapsa los bordes para que no haya espacios */
}

.table th, .table td {
    text-align: center; /* Centra el texto en celdas */
    border: 1px solid #ddd; /* Agrega bordes alrededor de las celdas */
    padding: 8px; /* Espacio interno para las celdas */
}
/* Establece el ancho de cada columna (ajusta según sea necesario) */
.table th:nth-child(10%),
.table td:nth-child(1) { width: 10%; } /* Ajusta este porcentaje según lo necesario */

.table th:nth-child(2),
.table td:nth-child(2) { width: 40%; }

.table th:nth-child(3),
.table td:nth-child(3) { width: 20%; }

.table th:nth-child(4),
.table td:nth-child(4) { width: 40%; }

.table th:nth-child(5),
.table td:nth-child(5) { width: 15%; }

.table th:nth-child(6),
.table td:nth-child(6) { width: 30%; }

.table th:nth-child(7),
.table td:nth-child(7) { width: 10%; }

.table th:nth-child(8),
.table td:nth-child(8) { width: 10%; }

.table th:nth-child(9),
.table td:nth-child(9) { width: 5%; }

.table th:nth-child(10),
.table td:nth-child(10) { width: 5%; }

/* Estilo para la barra horizontal */
.table thead th {
    border-bottom: 2px solid #333; /* Barra horizontal más gruesa */

}
/* Opcional: estilo de hover para filas */
.table tr:hover {
    background-color: #f1f1f1;
}

.table-responsive {
    overflow-x: auto; /* Permite el desplazamiento horizontal */
            width: 100%; /* Ancho completo del contenedor */
            max-width: 100%; /* No exceder el ancho máximo */
            border: 1px solid #ddd; /* Borde alrededor del contenedor */
}

/*test anular alerta helix y dejar joomla*/

/* Anular el estilo del contenedor de mensajes del sistema */
#system-message-container {
    position: static !important; /* Cambia la posición a estática para que no esté fijado */
    max-width: 1080px; /* Elimina el ancho máximo */
    z-index: 1  /* Asegúrate de que tenga un z-index menor */
    bottom: auto; /* Elimina la fijación en la parte inferior */
    right: auto; /* Elimina la fijación en la derecha */
    margin: 0px auto; /* Centrar en la pantalla */
    line-height:40px;
   
}
#system-message-container joomla-alert {
    font-size: 16px;
}


#formulario_de_contacto___nombre {
	height: 55px;
}
#formulario_de_contacto___email {
	height: 55px;
}
#formulario_de_contacto___telefono {
	height: 55px;
}
#formulario_de_contacto___asunto {
	height: 55px;
}
/*boton formulario de contacto*/

#form_45 .justify-content-between {
  display:flex;
  justify-content: center !important;
  align-items:center;
  margin:0 auto;
  width:100%;
  height:55px;
  /*transform: translateX(-10px);*/ /* Ajusta este valor según lo que necesites */
}
#form_45 .row {
  justify-content: center;
  /*display: flex;*/
 /* justify-content: flex-start;*/
}

#form_45 .form-check.fabrikgrid_checkbox.col-sm-12{
  margin-left:100px;
}

/* Media Query para dispositivos móviles */
@media (max-width: 767px) {
  #form_45 .form-check.fabrikgrid_checkbox.col-sm-12 {
    margin-left: 30px; /* Elimina el margen a la izquierda en pantallas más pequeñas */
  }
}
#form_45 textarea.fabrikinput.inputbox.col-sm-6 {
    width: 100%; /* Ajusta el ancho al 100% */
    box-sizing: border-box; /* Asegura un diseño consistente */
}

/*describe el servicio formulario 30-01-25*/

#solicitud___describe_el_servicio{
  
    width: 100%; /* Ocupa todo el ancho */
}
@media screen and (max-width: 768px) {
    /* Asegúrate de que el contenedor del campo de texto ocupe todo el ancho en móviles */
    .fabrikElement {
        width: 100%;  /* Contenedor ocupa el 100% del ancho disponible */
        box-sizing: border-box; /* Incluye el padding dentro del ancho total */
    } 
}
/* Adjuntar imagenes formulario centrado con el resto de items */
#form_43 .row {
  justify-content: center;
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea si no caben */
}

#form_43 .fabrikElement.col-sm-8 {
  width: 475px; /* Ancho ideal para PC */
  box-sizing: border-box;
}


/* Ajuste para móviles */
@media (max-width: 768px) {
  #form_43 .fabrikElement.col-sm-8 {
    width: 100%; /* Hace que el elemento ocupe todo el ancho en móviles */
    max-width: 100%; /* Evita que el ancho supere el contenedor */
    padding: 10px; /* Añade espacio alrededor */
  }
}
#form_43 #solicitud___nombre {
    height: 55px;
}
#form_43 #solicitud___email {
    height: 55px;
}
#form_43 #solicitud___telefono {
    height: 55px;
}

/* Ajuste para móviles ley proteccion de datos en solicitud presupuesto*/

/* Ajuste para móviles */
@media (max-width: 768px) {
  #form_43 .form-check.fabrikgrid_checkbox.col-sm-12 {
    margin-left: 25px; /* Elimina el margen en dispositivos móviles */
   
  }
}

#form_43 .justify-content-between {
  justify-content: center !important;
  margin: 0 auto;
  width: 485px;
  height:55px;
  transform: translateX(-20px); /* Ajusta este valor según lo que necesites */
}


/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
  #form_43 .justify-content-between {
    width: 100%; /* Ocupa todo el ancho disponible */
    justify-content: center !important; /* Centrado total */
    margin: 0 auto; /* Asegura que esté centrado */
    padding-left: 0; /* Elimina cualquier padding izquierdo extra */
    padding-right: 0; /* Elimina cualquier padding derecho extra */
    transform: none !important; /* Asegura que no haya desplazamiento */
  }
}
/* Estilos específicos para dispositivos móviles */
@media (max-width: 768px) {
  /* Seleccionamos específicamente el formulario con el ID #form_15 */
  #form_15 .justify-content-between {
    margin-left: 0; /* Elimina el margen izquierdo en pantallas pequeñas */
    width: 100%; /* Asegura que el contenedor ocupe el 100% del ancho en dispositivos móviles */
    margin-right: 0; /* Elimina el margen derecho en pantallas pequeñas */
    padding-left: 10px; /* Opcional: Agrega un pequeño relleno para evitar que el contenido esté pegado al borde */
    padding-right: 10px; /* Opcional: Relleno adicional para el lado derecho */
  }
}

/* Ajustes específicos para el formulario #form_15 */
@media (max-width: 768px) {
  #form_15 .form-check.fabrikgrid_checkbox.col-sm-12 {
    margin-left: 40px !important;  /* Aumenta el margen izquierdo para el checkbox */
    padding-left: 0 !important;    /* Elimina cualquier relleno extra */
    margin-right: 0 !important;   /* Elimina cualquier margen derecho */
  }
}
 /* Aseguramos que la fila no tenga márgenes extra */
  #form_15 .row {
    margin-left: 0 !important;    /* Elimina margen izquierdo extra */
    padding-left: 0 !important;   /* Elimina relleno izquierdo extra */
    padding-right: 0 !important;  /* Elimina relleno derecho extra */
  }
  /* Reducir el espacio entre el checkbox y el texto */
  #form_15 .form-check-label {
    display: inline-block;        /* Hace que el texto esté en línea con el checkbox */
    margin-left: 0px;             /* Reduce el margen izquierdo (ajusta el valor según necesidad) */
    word-wrap: break-word;         /* Evita que el texto se desborde */
    overflow-wrap: break-word;     /* Asegura que el texto se ajuste a la línea */
  }
										/* MENU ACCESO EMPRESAS*/
.sp-profile-wrapper .sp-profile-dropdown {
  min-width: 260px;
  margin-top:0px;
  padding: 0;
  z-index: 9999;

  }
  
.far.fa-user.me-1 {
	display: none;
}


/* DISEÑO DEL DESPLEGABLEE REGISTRO EMPRESA*/

/* Asegurarse de que el contenedor del dropdown tenga un ancho específico y esté alineado a la izquierda */
.sp-profile-wrapper .sp-profile-dropdown {
    display: block;
    width: auto; /* Puedes ajustar el ancho o dejarlo como auto */
    text-align: left; /* Alinea los elementos a la izquierda dentro del contenedor */
    margin-left: 0px; /* Separación de 70px desde la izquierda */
}

/* Centra los enlaces dentro de los ítems de menú */
.sp-profile-wrapper .sp-profile-dropdown li a {
    display: inline-block; /* Hace que los enlaces sean bloques en línea */
    text-align: left; /* Alinea el texto a la izquierda */
    padding: 10px 20px; /* Espaciado alrededor del texto */
}

/* Regula el margen izquierdo de .custom_user_login_menu */
.custom_user_login_menu {
    margin-left: 10px !important; /* Aplica el margen de 50px a la izquierda */
}



.sp-profile-dropdown-item {
  margin-left: 10px;
}

/*prueba avatar*/

    /* Contenedor de la firma de usuario (para alinear el texto y el icono horizontalmente) */
    .sp-sign-in {
        display: flex;
        align-items: center;  /* Alinea verticalmente los elementos en el centro */
    }

    /* Aumentar el tamaño del texto "admin" */
    .sp-sign-in .user-text {
        font-size: 14px; /* Ajusta el tamaño según lo que necesites */
        margin-left: 8px; /* Espacio entre el ícono y el texto */
    }

    /* Aumentar el tamaño del ícono de usuario con un límite máximo de 50px */
    .sp-sign-in i.fas.fa-user-circle {
        font-size: 28px; /* Ajusta el tamaño del ícono */
        max-width: 50px;  /* Limita el ancho máximo del ícono */
        width: 100%;      /* Asegura que el ícono es flexible dentro del contenedor */
        height: auto;     /* Mantiene la proporción del ícono */
    }
.sp-profile-wrapper .arrow-icon {
    font-size: 11px;      /* Ajusta el tamaño de la flecha */
    margin-left: 5px;     /* Ajusta el espacio entre la flecha y el texto/ícono anterior */
}

.sp-profile-dropdown {
    margin-top: 20px; /* Ajusta el valor según lo que necesites */
}

/*prueba iconos menu empresas*/
/* Icono para "Salir" (Cerrar sesión) */
.sp-profile-dropdown-item a[href="/mi-cuenta/cerrar-cesion"]::before {
    font-family: "Font Awesome 5 Free";
    content: "\f2f5"; /* Código Unicode de fa-sign-out-alt */
    font-weight: 900; /* Asegura que el icono sea grueso */
    margin-right: 8px;
    font-size: 18px; /* Aumentar el tamaño del icono si lo deseas */
    color: #000000; /* Asegura que el color sea negro sólido */
}

/* Icono para "Editar perfil" */
.sp-profile-dropdown-item a[href="/mi-cuenta/perfil-usuario"]::before {
    font-family: "Font Awesome 5 Free";
    content: "\f303"; /* Código Unicode de fa-pencil-alt (ícono de editar) */
    font-weight: 900; /* Asegura que el icono sea grueso */
    margin-right: 8px;
    font-size: 18px; /* Aumentar el tamaño del icono si lo deseas */
    color: #000000; /* Asegura que el color sea negro sólido */
}

/* Icono para "Mis Presupuestos" */
.sp-profile-dropdown .menuaccount-menu a[href="/mi-cuenta/mis-presupuestos"]::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0ae"; /* Código Unicode de fa-tasks */
    font-weight: 900; /* Asegura que el icono sea grueso */
    margin-right: 8px;
    font-size: 18px; /* Aumentar el tamaño del icono si lo deseas */
    color: #000000; /* Asegura que el color sea negro sólido */
}


 
/*test desplegable usuario registrado no se cierre*/
.sp-profile-dropdown .menuaccount-menu a[href="/mi-cuenta/mis-presupuestos"] {
    padding-top: 0px;  /* Ajusta el espaciado superior */
    padding-bottom: 0px;  /* Ajusta el espaciado inferior */
    display: flex;  /* Usamos flexbox para asegurar la alineación */
    align-items: center; /* Alinea el texto y el icono */
}
/*letra menu movil */
.menu li a {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
  
}
.classmenumovil {
    color: #656565;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
}

.classmenumovil:hover {
    color: #007bff !important;
}

/* Menú empresa registrada en avatar */
/*
@media (max-width: 768px) {
.sp-profile-dropdown {
    
    left: 0;!important;
  }
} 
*/
@media (max-width: 768px) {
    .sp-profile-dropdown {
        left: 0 !important; /* Corrige la sintaxis */
        width: auto !important; /* Ajusta al contenido */
        display: block !important; /* Se asegura de que el menú aparezca */
        z-index: 9999;
    }
}

.offcanvas-menu .offcanvas-inner .sp-profile-wrapper .user-text {
        display: inline-block !important;
      
    }

.custom-alert {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 20px 15px;
}