@font-face {
    font-family: 'Lato';
    src: url('../styles/fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
  
@font-face {
    font-family: 'Lato';
    src: url('../styles/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* General styles */
html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #fff !important; /* Fondo blanco para toda la web */
    font-family: 'Lato', sans-serif !important;
    display: flex;
    flex-direction: column;
}

#contenido{
    padding-top: 92px; /* Altura predeterminada de la navbar */
    flex: 1;
}


.mi-texto {
    text-align: center;
    font-weight: 500; /* Medium en Lato */
    font-size: 18px;
    line-height: 22px;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0px;
    color: #454545;
    opacity: 1;
}

.partnumber-texto {
    text-align: center;
    font-weight: bold; /* Negrita */
    font-size: 24px;
    line-height: 29px;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0px;
    color: #454545;
    opacity: 1;
}

.qr-boton {
    width: 250px;
    height: 50px;
    background: #395DA2;
    border-radius: 7px;
    opacity: 0.9;
    border: none;
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    font-weight: 500; /* Medium en Lato */
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaciado entre el icono y el texto */
    text-decoration: none;
}

/* Efecto hover */
.qr-boton:hover {
    opacity: 1;
}

/* Ajuste del icono */
.qr-boton i,.boton-login-qr i {
    font-size: 30px; /* Tamaño del icono */
}

/*enlaces a documentos*/
.document-link-qr {
    color: #029def !important; /* Color de enlace, cambia según tus preferencias */
    text-decoration: none !important; /* Opcional: quitar subrayado */
    font-size: 13px !important;
    cursor: pointer !important;
}
.document-link-qr:hover {
    text-decoration: underline !important; /* Opcional: subrayar en hover */
}
.texto-login-qr {
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-weight: 400; /* Normal */
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #454545;
    opacity: 1;
}

.boton-login-qr {
    background: none !important; /* Sin fondo */
    border: none !important; /* Sin bordes */
    font-family: 'Lato', sans-serif !important;
    font-weight: 500 !important; /* Medium */
    font-size: 16px !important;
    line-height: 17px !important;
    letter-spacing: 0px !important;
    color: #029DEF !important;
    text-align: left !important;
    text-decoration: underline !important; /* Subrayado */
    cursor: pointer !important;
    padding: 0 !important; /* Elimina cualquier relleno */
    margin: 0 !important; /* Elimina márgenes extra */
    display: flex !important;
    align-items: center !important;
    gap: 5px !important; /* Espaciado entre el icono y el texto */
    display: inline-flex !important;
}

/* Efecto al pasar el mouse */
.boton-login-qr:hover {
    color: #027bb8 !important; /* Azul más oscuro al pasar el mouse */
    text-decoration: none !important; /* Quita el subrayado en hover */
}

.qr-line{
    margin: 0px !important;
    margin-bottom: 30px !important;
    color: #707070 !important;
}

.texto-ventajas-qr {
    text-align: left !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 300 !important; /* Light */
    font-size: 16px !important;
    line-height: 17px !important;
    letter-spacing: 0px !important;
    color: #6B6B6B !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* Espaciado entre el icono y el texto */
}

/* Estilo del icono */
.texto-ventajas-qr i {
    font-size: 20px !important; /* Aumenta el tamaño del icono */
    color: #454545 !important; /* Color más oscuro */
}






header {
    font-family: 'Lato', sans-serif !important;
}

/* Estilos para el div del loader */
#loadingDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999 !important; /* Asegúrate de que este valor sea superior al de cualquier otro elemento */
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-breadcrumb .breadcrumb {
    font-size: 1.25rem; /* Ajusta este valor según tus necesidades */
}

.titulo_home{
    font-weight: bold !important;
}
.subtitulo_home{
    font-weight: normal !important; 
}
.intro_home{
    font-weight: lighter !important;
    color: #454545 !important;
}

/*efectos img homepage*/
.imagen-entrada {
    opacity: 0;
    transform: translateX(-100%);
    animation: entrada 1.2s forwards;
}

.imagen-group{
    width: 260px;
    height: 200px;
}

.btn-image {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.btn-image img {
    display: block; /* Asegura que la imagen se muestre correctamente */
}

.form-post {
    display: inline-block;
    margin: 0;
    padding: 0;
}
  
@keyframes entrada {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.img-shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s, transform 0.3s; /* Añade transform a la transición */
    cursor: pointer !important;
}

.img-shadow:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transform: scale(1.05) translateX(0) !important; /* Combina transformaciones */
}


/* Blue line */
#myNavBar {
    border-bottom: 5px solid #395DA2; /* Ajusta el grosor y el color según tus preferencias */
    background-color: white !important;
}

/* Header styles */
.li-header{
    margin-right: 40px;
}

.link-header{
    color: #454545 !important;
    font-weight: bold !important;
}

/* Estilos para el enlace cuando se pasa el ratón por encima */

/* Estilo específico para el texto del nav-link */
.nav-link-text {
    position: relative;
    display: inline-block; /* Permite aplicar la propiedad position:relative */
    transition: color 0.5s ease; /* Transición suave del color del texto */
  }
  
  .nav-link-text::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px; /* Ajusta según necesites para el subrayado */
    left: 0;
    background-color: #395DA2; /* Color del subrayado */
    transition: width 0.5s ease;
  }

  .nav-link:hover .nav-link-text {
    color: #395DA2 !important; /* Cambia el color del texto al pasar el ratón */
  }
  
  .nav-link:hover .nav-link-text::after {
    width: 100%;
  }
  
  .nav-link-text.active-link {
    color: #395DA2 !important; /* Asegura que el texto permanezca del color deseado */
  }
  
  .nav-link-text.active-link::after {
    width: 100% !important;
  }

.shopping-cart-icon-quantity{
    width: 42px !important;
    height: 30px !important;
    padding: 15.2px 7.8px !important;
    font-size: 27px !important;
    border-radius: 26px !important;
    transform: perspective(0px) translate(-12px) rotate(0deg) scale(0.50) !important;
    transform-origin: top !important;
    padding-right: 0 !important;
    padding-top: 0.2px !important;
    padding-left: 0.2px !important;
    text-align: center;
    border-width: 48px !important;
}

.shopping-cart-icon, .person-icon{
    font-size: 22px;
}

.customer-name{
    font-style: italic;
    letter-spacing: 0px;
    color: #707070;
    opacity: 1;
    font-size: small;
    vertical-align: text-top;
}

/* Estilos para el logo en dispositivos grandes */
.logo-vm {
    max-width: 200px; /* Ajusta según sea necesario */
    max-height: 60px; /* Ajusta según sea necesario */
}

/*Estilos switch customer */
#modalCambioCuenta .modal-content {
    background-color: #f8f9fa !important; /* Color de fondo del modal */
}

#modalCambioCuenta .modal-header {
    background-color: #395DA2 !important; /* Color de fondo del encabezado */
    color: white !important; /* Color del texto del encabezado */
}

/* Estilos para la lista */
#modalCambioCuenta ul {
    list-style: none !important; /* Remover los estilos por defecto de lista */
    padding: 0 !important; /* Remover el padding por defecto */
}

#modalCambioCuenta ul li {
    background-color: #e9ecef !important; /* Color de fondo de cada elemento */
    border: 1px solid #dee2e6 !important; /* Bordes para cada elemento */
    padding: 10px !important; /* Espaciado interno para cada elemento */
    margin-bottom: 8px !important; /* Espaciado entre elementos */
    border-radius: 5px !important;
    cursor: pointer !important;
}

#modalCambioCuenta ul li:hover {
    background-color: #cfd8dc !important; /* Cambia el color de fondo al pasar el cursor */
}

.cliente-historico {
    color: #ff0000; /* Rojo para resaltar cuentas archivadas */
    margin-left: 10px;
    font-weight: bold;
}

/* Estilos para la barra de búsqueda dentro del modal */
#buscadorCuentas {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px; /* Espacio entre la barra de búsqueda y la lista */
}

/*Estilos del login*/
.login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.login-form {
    width: 100%;
    max-width: 400px;
}
.login-logo {
    margin-bottom: 20px;
    width: 450px; /* Tamaño predeterminado del logo */
    height: auto; /* Mantener la proporción del logo */
}
/* Estilos offcanvas filtros */
.boton-filtro {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050; /* Asegúrate de que esté por encima de otros elementos */
    background-color: #395DA2 !important;
    border-radius: 0 0.25rem 0.25rem 0 !important; /* Bordes redondeados en el lado derecho */
    width: 40px; /* Ancho del botón reducido */
    height: 50px; /* Altura del botón */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Estilos adicionales para el icono, si es necesario */
.boton-filtro .bi-funnel, .boton-info-groups .bi-info-circle {
    font-size: 1.5rem; /* Tamaño del icono */
    color: white; /* Color del icono */
}

/* Estilos offcanvas filtros */
.boton-info-groups {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050; /* Asegúrate de que esté por encima de otros elementos */
    border-radius: 0 0.25rem 0.25rem 0; /* Bordes redondeados solo en el lado derecho */
    background-color: #395DA2 !important;
    border-radius: 0.25rem 0 0 0.25rem !important; /* Bordes redondeados en el lado derecho */
    width: 40px; /* Ancho del botón reducido */
    height: 50px; /* Altura del botón */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: pulsoSutil 3s infinite ease-in-out;
}

@keyframes pulsoSutil {
    0%, 100% {
      opacity: 1;
      transform: scale(1); /* Mantiene el botón a su tamaño original */
    }
    50% {
      opacity: 0.6;
      transform: scale(1.2); /* Aumenta ligeramente el tamaño del botón */
    }
  }

#offcanvasInfoGroups{
    width: 900px !important; /* o cualquier otro valor que prefieras */
    z-index: 1055 !important;
}

.accordion-body-info-groups{
    color: #707070 !important;
}

.form-label-filtros{
    color: black !important;
    font-weight: bolder !important;
    font-size: 1rem !important;
}

.clickable-image {
    width: 300px; /* o el tamaño inicial que prefieras */
    height: auto;
    transition: transform 0.3s ease;
    cursor: pointer;
}


.form-check-input:checked {
    background-color: #78CB7B !important;
    border-color: #78CB7B !important;
}
.form-check-input:focus {
    border-color: #78CB7B !important;
    box-shadow: 0 0 0 0.25rem rgba(120, 203, 123, 0.25);
}
.offcanvas-body {
    color: #707070 !important; /* Cambia el color de todo el texto en el offcanvas-body */
}
.form-check-label, #shippingAddressSelect, .date-select {
    color: #707070 !important; /* Cambia el color de los labels de los checkbox */
}
.toggle-types-btn {
    color: #707070 !important; /* Color del texto */
    text-decoration: underline; /* Subrayado */
    display: flex; /* Para alinear el texto y el ícono */
    align-items: center; /* Alineación vertical */
    gap: 0.5rem; /* Espacio entre el texto y el ícono */
}
.accordion-button:hover,.accordion-button:not(.collapsed):hover {
    background-color: #d6d8db !important; /* Un gris más oscuro para el hover */
}
.accordion-button:not(.collapsed) {
    background-color: transparent !important; /* Fondo transparente para quitar el azul por defecto */
    color: inherit; /* Mantiene el color original del texto */
}
.accordion-button {
    padding-left: 0.1rem !important; /* Reduce el padding izquierdo */
}
.selectedGammas {
    color: #78CB7B !important; /* Color verde, con fallback */
    font-weight: bold !important; /* Peso de la fuente */
    font-size: .875rem !important; /* Tamaño de la fuente */
}

/* Estilos card-articulo */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card {
    --bs-card-spacer-y: 0.5rem !important; /* Establece un valor menor para el espaciado vertical en las tarjetas */
    animation: fadeIn 0.1s ease-out;
    box-shadow: 0px 0px 6px #00000029 !important;
}

.btn-custom {
    background-color: white !important; /* Fondo blanco */
    color: grey !important; /* Texto gris */
    border: 1px solid grey !important; /* Borde gris */
    flex-shrink: 0 !important; /* Evita que el botón se reduzca */
    padding: 0.5rem !important; /* Ajusta el padding para crear un cuadrado */
    display: inline-flex !important; /* Mantiene los elementos centrados */
    align-items: center !important; /* Centra verticalmente */
    justify-content: center !important; /* Centra horizontalmente */
    width: 2rem !important; /* Ancho del botón */
    height: 2rem !important; /* Alto del botón, igual al ancho para un cuadrado */

}

.btn-custom:hover {
    background-color: #f8f8f8 !important; /* Fondo ligeramente gris en hover */
    color: darkgrey !important; /* Texto más oscuro en hover */
    border-color: darkgrey !important; /* Borde más oscuro en hover */
}

.icon-plus {
    font-size: 1.5rem !important; /* Aumenta el tamaño del ícono */
}

.img-custom {
    width: 100% !important; /* O un valor fijo como 150px */
    max-width: 230px !important; /* Por ejemplo, para un máximo de 150px */
    height: 230px !important;
}

.img-custom:hover {
    cursor: pointer; /* Cambia el cursor a un puntero al pasar el ratón por encima */
    /* Aquí puedes añadir más estilos para el efecto hover, como un ligero aumento de tamaño, cambio de opacidad, etc. */
    transform: scale(1.03); /* Ejemplo: Aumenta ligeramente el tamaño de la imagen */
    opacity: 0.9; /* Ejemplo: Hace la imagen ligeramente más transparente */
}

.image-container {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 100%; /* O establece una altura específica si lo necesitas */
}

/* .title-part-number */
.title-part-number{
    letter-spacing: 0px !important; /* Sin espaciado adicional entre letras */
    color: #454545 !important; /* Color del texto en gris oscuro */
    font-weight: bold !important; /* Texto en negrita */
    font-size: 15px !important; /* Tamaño del texto a 15 píxeles */
}

/* .descrip-part-number */
.descrip-part-number{
    letter-spacing: 0px !important; /* Sin espaciado adicional entre letras */
    color: #454545 !important; /* Color del texto en gris oscuro */
    font-size: 13px !important; /* Tamaño del texto a 13 píxeles */
    flex-grow: 1 !important; /* Elemento crece para ocupar el espacio disponible en un flex container */
    margin-right: 10px !important; /* Añade un margen de 10 píxeles a la derecha */
}

/* .text-truncate */
.text-truncate{
    white-space: nowrap !important; /* El texto se mantiene en una sola línea horizontal */
    overflow: hidden !important; /* Oculta el contenido que sobrepasa el contenedor */
    text-overflow: ellipsis !important; /* Muestra puntos suspensivos si el texto sobrepasa el contenedor */
}
/* .obsolete-part-number */
.obsolete-part-number{
    letter-spacing: 0px !important; /* Sin espaciado adicional entre letras */
    color: #C71A22 !important; /* Color del texto en gris medio */
    font-size: 14px !important; /* Tamaño del texto a 14 píxeles */
    font-weight: bold !important;
}
/* .stock-part-number */
.stock-part-number{
    letter-spacing: 0px !important; /* Sin espaciado adicional entre letras */
    color: #707070 !important; /* Color del texto en gris medio */
    font-size: 14px !important; /* Tamaño del texto a 14 píxeles */
    font-weight: bold !important;
}
/* .expected-delivery */
.expected-delivery{
    letter-spacing: 0px !important; /* Sin espaciado adicional entre letras */
    color: #707070 !important; /* Color del texto en gris medio */
    font-size: 11px !important; /* Tamaño del texto a 14 píxeles */
    font-weight: lighter !important;
}
/* alertas sustituto obsoletos */
.sustituto-obsoleto{
    letter-spacing: 0px !important; /* Sin espaciado adicional entre letras */
    color: #C71A22 !important; /* Color del texto en gris medio */
    font-size: 11px !important; /* Tamaño del texto a 14 píxeles */
    font-weight: lighter !important;
}
/* .expected-delivery-icon */
.custom-outline-danger {
    color: #dc3545 !important; /* Color del icono: rojo de Bootstrap "danger" */
}
/* .stock-icon */
.custom-outline-success {
    color: #198754 !important; /* Color del icono: rojo de Bootstrap "danger" */
}
/*ambos iconos*/
.custom-icon{
    background-color: transparent; /* Fondo transparente */
    font-size: 15px !important;
    border: none; /* Sin bordes */
    padding: 0.25em !important; /* Menos padding */
    transform: scale(1.2) !important; /* Escalar el icono para hacerlo más grande */
}
/*Cerrar acordeon part-number*/
.btn-close-collaps {
    background-color: white !important; /* Fondo rojo para indicar acción de cierre */
    color: #f44336 !important; /* Texto blanco para contraste */
    border: 1px solid #f44336 !important; /* Sin borde para un look más limpio */
    margin-left: auto !important;
    margin-top: 1rem !important; /* Margen superior para separarlo del contenido del collapse */
    border-radius: 5px !important; /* Bordes redondeados */
    font-weight: bold !important; /* Texto en negrita para destacar */
    transition: background-color 0.3s !important; /* Transición suave para el cambio de color */
    display: block !important;
}
.btn-close-collaps:hover {
    background-color: #d32f2f !important; /* Color ligeramente más oscuro al pasar el ratón por encima */
    color: white !important;
}
/*titulo propiedades part-number*/
.property-part-number {
    font-style: italic;
    font-weight:bold;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #454545;
}
/*parrafos propiedades part-number*/
.parrafos-property-part-number{
    margin-bottom: 4px; /* Reduce el margen inferior*/
}
/*valor propiedad part-number*/
.val-property-part-number{
    font-style:normal;
    font-weight:lighter;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0px;
    color: #454545;
    opacity: 1;
}
/* Estilo para el acordeón de part-number-documents */
.accordion-documents-part-number {
    border: 1px solid #707070 !important;
    border-radius: 5px !important;
    margin-bottom: 5px !important; /* Ajusta el margen según sea necesario */
}

/* Estilo para el acordeón abierto */
.accordion-button:not(.collapsed) {
    box-shadow: none !important; /* Quita el box shadow */
}
/* Estilo para el título del acordeón */
.tittle-documents-part-number {
    font-weight: bold !important;
    font-size: 13px !important;
    line-height: 22px !important;
    letter-spacing: 0px !important;
    color: #454545 !important;
    background-color: transparent !important; /* Puede ser necesario para sobrescribir estilos de Bootstrap */
    text-align: center !important;
    display: block !important; /* Asegúrate de que el botón se comporte como un bloque para permitir el centrado */
    width: 100% !important; /* Estira el botón para ocupar todo el ancho */
    padding-left: 0 !important; /* Ajusta según sea necesario */
    padding-right: 0 !important; /* Ajusta según sea necesario */
    padding: 0.5em 1em !important; /* Reduce el padding, ajusta según sea necesario */
}
/* Select serial numbers / purchase documents */
.btn-showSerialNumbers {
    width: 100%; /* Ocupar todo el ancho del cuerpo del acordeón */
    font-size: smaller; /* Letra más pequeña */
    font-weight: bold; /* Negrita */
    background-color:#E1E4E3; /* Fondo gris */
    color: #454545;
    border: 1px solid #ccc; /* Bordes sutiles (opcional) */
    border-radius: 5px;
    padding: 0.5em; /* Espaciado interno para mejor presentación (opcional) */
    box-sizing: border-box; /* Asegura que el padding y border no aumenten su ancho */
}
/* No hay documentos message */
.no-documents-message {
    color: #666; /* Color del texto */
    font-size: 0.9rem; /* Tamaño del texto */
    margin-top: 10px; /* Espacio superior para separarlo del elemento anterior */
    padding: 10px; /* Espaciado interno */
    background-color: #f2f2f2; /* Color de fondo */
    border-left: 3px solid red; /* Borde izquierdo para destacar */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil */
    border-radius: 4px; /* Bordes redondeados */
}


/*btn-recambios-recomendados*/
.custom-part-number-btn{
    border-radius: 5px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 13px !important;
    line-height: 22px !important;
    letter-spacing: 0px !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    border: none !important; /* Remueve el borde por defecto de los botones */
    padding: 10px 20px !important; /* Ajusta el padding según necesidades */
    width: 100% !important;
    transition: background-color 0.3s !important;
    padding: 0.5em 1em !important; /* Reduce el padding, ajusta según sea necesario */
    margin-bottom: 5px !important; /* Añade un margen en la parte inferior del primer botón */
}
.custom-recommended-parts-btn {
    background-color: #14741A !important;
}
.custom-recommended-parts-btn:hover {
    background: #0f5c14 !important; /* Un tono más oscuro de verde, ajústalo según tus preferencias */
}
.custom-part-number-btn i {
    margin-right: 5px !important; /* Ajusta este valor según sea necesario */
    font-size: 1.2em !important; /* Ajusta este valor para cambiar el tamaño del icono */
}

.custom-view-structure-btn {
    background-color: #CC9A12 !important;
}

.custom-view-structure-btn:hover {
    background: #b38e10 !important; /* Un tono más oscuro para el efecto hover, ajusta según tus preferencias */
}
/*add to cart button*/
.add-cart-btn {
    background-color: #78CB7B !important; /* Color de fondo */
    border: 1px solid #78CB7B !important; /* Borde con el mismo color */
    border-radius: 5px !important; /* Radio del borde */
    color: #FFFFFF !important; /* Color del texto e icono, ajusta si es necesario */
    padding: 2px 12px !important; /* Ajusta el padding según sea necesario */
    text-align: center !important; /* Centrar el texto e icono */
    font-size: 20px !important; /* Ajusta el tamaño del texto e icono si es necesario */
    transition: background-color 0.3s !important; /* Transición suave para hover */
}

.add-cart-btn:hover {
    background-color: #6ab169 !important; /* Un tono más oscuro para el efecto hover */
}

.help-btn {
    background-color: #C81F1F !important; /* Color de fondo */
    border: 1px solid #C81F1F !important; /* Borde con el mismo color */
    border-radius: 5px !important; /* Radio del borde */
    color: #FFFFFF !important; /* Color del texto e icono, ajusta si es necesario */
    padding: 2px 12px !important; /* Ajusta el padding según sea necesario */
    text-align: center !important; /* Centrar el texto e icono */
    font-size: 20px !important; /* Ajusta el tamaño del texto e icono si es necesario */
    transition: background-color 0.3s !important; /* Transición suave para hover */
}

.help-btn:hover {
    background-color: #f05151 !important; /* Un tono más oscuro para el efecto hover */
}

.row-flex-container {
    display: flex !important;
    justify-content: space-between !important; /* Alinea el botón a la izquierda y el texto a la derecha */
    align-items: end !important; /* Alinea verticalmente los elementos en el centro */
}
/*unit price texto*/
.unit-price-text {
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0px !important;
    color: #454545 !important;
}
/*enlaces a documentos*/
.document-link {
    color: #029def !important; /* Color de enlace, cambia según tus preferencias */
    text-decoration: none !important; /* Opcional: quitar subrayado */
    font-size: 13px !important;
    margin-top: 5px !important; /* Reduce el espacio encima de los enlaces */
    cursor: pointer !important;
}
.document-link:hover {
    text-decoration: underline !important; /* Opcional: subrayar en hover */
}
.accordion-body {
    padding-top: 2px !important; /* Ajusta este valor según tus necesidades */
}
/* buscador de texto de grupos */
.search-groups{
    margin-bottom: 10px;
    margin-top: 5px;
}
.search-groups input {
    width: 100%;
    padding: 4px;
    font-size: 15px;
}
/* texto flotante cambio gamma */
.floating-text {
    display: inline-block; /* Hace que el div sea solo tan ancho como su contenido */
    background-color: #395DA2; /* Color de fondo azul */
    color: #ffffff; /* Color de texto blanco */
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #0056b3; /* Borde azul más oscuro para contraste */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Margen inferior */
}
.floating-text-container {
    width: 100%; /* Ocupa todo el ancho de la fila */
    text-align: left; /* Centra el div interior */
}

/* Estilos form register new machine */
.custom-form-container {
    border: 2px solid #395DA2; /* Borde azul */
    padding: 20px;
    border-radius: 5px; /* Bordes redondeados */
}


/* Estilo personalizado para el botón REGISTER */
.btn-register-machine {
    background-color: #395DA2 !important; /* Color de fondo verde personalizado */
    border-color: #395DA2 !important; /* Color del borde */
    color: white !important; /* Color del texto */
    font-weight: bold !important;
}
/* Cambiar el color al pasar el mouse por encima para mantener la coherencia */
.btn-register-machine:hover {
    background-color: #2b488a !important; /* Un tono de azul un poco más oscuro para el hover */
    border-color: #2b488a !important; /* Color del borde al pasar el mouse por encima */
}
/* Estilo personalizado para el botón REGISTER */
.btn-eliminate-machine {
    background-color: #c81f1f !important; /* Color de fondo verde personalizado */
    border-color: #c81f1f !important; /* Color del borde */
    color: white !important; /* Color del texto */
    font-weight: bold !important;
}
.btn-eliminate-machine:hover {
    background-color: #f54554 !important; /* Un tono de azul un poco más oscuro para el hover */
    border-color: #f54554 !important; /* Color del borde al pasar el mouse por encima */
}

/* Estilo personalizado para el botón REQUEST HELP */
.btn-submit-form {
    background-color: #78CB7B !important; /* Color de fondo verde personalizado */
    border-color: #78CB7B !important; /* Color del borde */
    color: white !important; /* Color del texto */
    font-weight: bold !important;
}
/* Cambiar el color al pasar el mouse por encima para mantener la coherencia */
.btn-submit-form:hover {
    background-color: #67b56e !important; /* Un tono de azul un poco más oscuro para el hover */
    border-color: #67b56e !important; /* Color del borde al pasar el mouse por encima */
}

.icon-large {
    font-size: 1.5rem; /* O cualquier tamaño que prefieras */
}

/* Estilo personalizado para los campos de entrada con la clase .input-register.machine */
.input-register-machine {
    border: none !important; /* Sin bordes */
    border-bottom: 2px solid #DADCDD80 !important; /* Solo borde inferior */
    border-radius: 0 !important; /* Sin bordes redondeados */
    box-shadow: none !important; /* Sin sombra */
    color: #495057 !important; /* Color del texto */
}
.input-register-machine::placeholder {
    color: #495057 !important; /* Color del texto del placeholder más oscuro para mejor contraste */
}
.input-register-machine:focus {
    border-bottom: 1px solid black !important; /* Borde inferior negro al hacer focus */
    outline: none !important; /* Eliminar el outline predeterminado */
}
/* Estilos orders */
.text-custom-red {
    color: #cd5c5c !important; /* Un tono rojo no muy intenso */
}
.order-inactive {
    filter: grayscale(100%); /* Convierte la imagen a escala de grises */
    opacity: 0.5; /* Ajusta esto para hacer el gris más intenso */
    background-color: #e0e0e0; /* Color de fondo más oscuro para resaltar el estado inactivo */
}
/* Estilos pending_ordes */
/* CSS personalizado para resaltar filas en rojo */
.resaltado_rojo{
    background-color: #BA1313 !important; /* Rojo */
    color: #fff !important; /* Texto en blanco para mayor contraste */
}

.resaltado_naranja{
    background-color: orange !important; /* Naranja */
    color: #fff !important; /* Texto en blanco para mayor contraste */
}

.resaltado_verde{
    background-color: #03a037 !important; /* Verde */
    color: #fff !important; /* Texto en blanco para mayor contraste */
}

.document-link-pending-order {
    color: black !important; /* Color de enlace, cambia según tus preferencias */
    text-decoration: none !important; /* Opcional: quitar subrayado */
    font-size: 13px !important;
    margin-top: 5px !important; /* Reduce el espacio encima de los enlaces */
    font-weight: bold !important;
}
.document-link-pending-order:hover {
    text-decoration: underline !important; /* Opcional: subrayar en hover */
}

.document-link-disabled {
    color: #c0c0c0; /* Gris claro */
    pointer-events: none; /* Desactiva el clic en el enlace */
    text-decoration: none; /* Elimina el subrayado del enlace */
    cursor: default; /* Cambia el cursor a default en lugar de pointer */
    font-size: 13px !important;
    margin-top: 5px !important; /* Reduce el espacio encima de los enlaces */
}
/* Estilos footer */
.footer-custom{
    background-color: #BCBCBC;
    color: white;
    font-size: 16px;
    font-weight: 300;
    padding: 8px 0; /* Aumenta el espacio vertical dentro del footer */
}
/* Search spare parts */
.descrip-search-part{
    min-height: 40px !important;
}

/* Estilos para modal advertencia registrar maquina */
/* Estilo icono advertencia spare parts */
.icono-advertencia{
    color: #707070 !important;
    font-size: 50px !important;
}
/* Estilo btn registrar nueva referencia */
.btnRegistrarReferencia-advertencia{
    height: 48px !important;
    width: 165px !important;
    background-color: #395DA2 !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: white !important;
    padding: 0px !important;
    padding-top: 15px !important;
}

/* Preferencias modales */

#videoModal {
    z-index: 1070; 
}

#partNumbersModal {
    z-index: 1060; 
}

#imageModal {
    z-index: 1070; 
}

/* Preferencias my account */

.subtitulo-account{
    color: #454545;
    font-weight: bold;
}

.txt-account{
    font-weight: lighter !important;
}

.dato-account{
    font-style: italic;
}

.editarAccount{
    text-decoration: none !important;
    color: #395DA2 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
}

.iconoEditarAccount{
    font-size: 22px !important;
}

/* shopping-cart estilos */

.form-shopping-cart{
    background-color: #F9F9F9 !important;
}

.form-shopping-cart-title{
    font-weight: bold !important;
    color: #454545 !important;
}

.form-shopping-cart-text{
    color: #707070 !important;
}

.form-shopping-cart-select{
    font-weight: italic !important;
    letter-spacing: 0px;
    color: #707070 !important;
}

.form-shopping-cart-email{
    color: #029DEF !important;
}

.form-shopping-cart-btn {
    background-color: #78CB7B !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.form-shopping-cart-btn:hover {
    background-color: #2e4d2f !important;
}

.form-shopping-cart-link{
    color: #029DEF !important;
    text-decoration: underline !important;
}

.form-shopping-cart-icon{
    font-size: 23px !important;
    font-weight: 600 !important;
}

.form-shopping-cart-btn-empty{
    border: none !important;
}

.form-shopping-cart-img{
    width: 100% !important; /* O un valor fijo como 150px */
    max-width: 100px !important; /* Por ejemplo, para un máximo de 150px */
    height: 100px !important;
}

.form-shopping-cart-input-cantidad{
    color: #454545 !important;
    font-size: 13px !important;
    font-weight: bold !important;
}

.form-shopping-cart-btn-remove-item{
    background-color: white !important;
    color: #f44336 !important;
    border: 1px solid #f44336 !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    transition: background-color 0.3s !important;
    display: block !important;
}

.form-shopping-cart-btn-remove-item:hover {
    background-color: #d32f2f !important;
    color: white !important;
}

.form-shopping-cart-sombreado-articulo{
    box-shadow: 0px 0px 6px #00000029 !important;
}
/* Estilo catalogo deshabilitado */
.disabled-div {
    pointer-events: none; /* Evita que el elemento sea clickable */
    opacity: 0.5; /* Da un aspecto de estar desactivado */
}

.card-header-gamma {
    background-color: #395DA2; /* Fondo azul para el encabezado */
    color: white;
    padding: 5px 10px;
    margin-top: 5px; /* Margen superior de 5px */
    position: absolute;
    top: 15px;
    left: 0;
    text-transform: uppercase; /* Texto en mayúsculas */
    font-size: 1.25em; /* Tamaño de letra más grande */
    font-weight: bold;
}

.form-groups-gammas .btn-image {
    padding: 0;
    border: none;
    background: none;
    width: 100%;
    height: 100%;
    position: relative;
}

.card-gamma-button {
    width: 100%;
    height: 100%;
    display: block;
}

.card-gamma {
    width: 260px;
    height: 200px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px; /* Opcional para bordes redondeados */
    overflow: hidden; /* Asegura que todo el contenido se ajuste dentro de la tarjeta */
    display: flex;
    align-items: flex-start; /* Alinea el texto del encabezado al inicio verticalmente */
    justify-content: flex-start; /* Alinea el texto del encabezado al inicio horizontalmente */
}

.card-img-gamma {
    width: 100%; /* Asegura que la imagen llene el ancho de la tarjeta */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Cubre el área sin perder las proporciones */
}

.card-gamma-body {
    padding: 0; /* Elimina el padding predeterminado */
    height: 100%; /* Ocupa toda la altura disponible */
    display: flex;
    align-items: stretch; /* Estira los elementos hijos para que llenen el contenedor */
}



/* Estilos página bulletins */
.btn-open-bulletin {
    background-color: #395DA2  !important;
}
.btn-open-bulletin:hover {
    background: #769add  !important; /* Un tono más oscuro de verde, ajústalo según tus preferencias */
}



/* Estilos para el logo en dispositivos más pequeños */
@media (max-width: 767px) {
    .navbar {
        padding: 5px 10px; /* Reducir padding en dispositivos móviles */
    }

    .logo-vm{
        max-width: 100px;
    }

    .nav-link {
        font-size: 14px; /* Reducir tamaño de fuente */
    }

    .navbar .dropdown-menu {
        width: 100% !important; /* Hace que el menú desplegable ocupe todo el ancho */
    }
}

@media (min-width: 992px) and (max-width: 1425px) {
    .navbar-nav .nav-item {
        margin-right: 5px; /* Ajusta el espaciado entre elementos del menú */
    }

    .navbar .navbar-brand img {
        width: 70%; /* Reduce el tamaño del logo */
    }

    .navbar-nav .nav-link {
        font-size: 0.80em; /* Tamaño ligeramente mayor para pantallas más grandes */
    }
}

/* Media query para pantallas pequeñas */
@media (max-width: 576px) { /* Bootstrap breakpoint para dispositivos pequeños */
    .login-logo {
        width: 300px; /* Tamaño más pequeño del logo para pantallas pequeñas */
    }
}

/* Estilos para pantallas entre 1400px y 1550px */
@media screen and (min-width: 1504px) and (max-width: 1593px) {
    .obsolete-part-number {
        /* Estilos modificados para este rango de pantalla */
        font-size: 13px !important; /* Ejemplo: ajustar el tamaño de la fuente */
        /* otros estilos según sea necesario */
    }

    .stock-part-number {
        /* Estilos modificados para este rango de pantalla */
        font-size: 13px !important; /* Ejemplo: ajustar el tamaño de la fuente */
        /* otros estilos según sea necesario */
    }

    .expected-delivery {
        /* Estilos modificados para este rango de pantalla */
        font-size: 10px !important; /* Ejemplo: ajustar el tamaño de la fuente */
        /* otros estilos según sea necesario */
    }
       /*ambos iconos*/
    .custom-icon{
        font-size: 13px !important;
    }
}
@media screen and (min-width: 1400px) and (max-width: 1503px) {
    .obsolete-part-number {
        /* Estilos modificados para este rango de pantalla */
        font-size: 12px !important; /* Ejemplo: ajustar el tamaño de la fuente */
        /* otros estilos según sea necesario */
    }

    .stock-part-number {
        /* Estilos modificados para este rango de pantalla */
        font-size: 12px !important; /* Ejemplo: ajustar el tamaño de la fuente */
        /* otros estilos según sea necesario */
    }

    .expected-delivery {
        /* Estilos modificados para este rango de pantalla */
        font-size: 10px !important; /* Ejemplo: ajustar el tamaño de la fuente */
        /* otros estilos según sea necesario */
    }

    /*ambos iconos*/
    .custom-icon{
        font-size: 12px !important;
    }
}

@media (min-width: 1400px) and (max-width: 1700px) {
    .custom-full-width-on-specific-range {
        flex-basis: 100% !important; /* Hace que la columna ocupe todo el ancho */
        max-width: 100% !important; /* Asegura que no haya un ancho máximo que lo restrinja */
        justify-content: flex-end !important; /* Alinea el contenido a la derecha */
        padding-top: 5px !important; /* Agrega un poco de espacio en la parte superior */
     }
}

@media screen and (min-width: 1400px) and (max-width: 1540px) {
    .custom-part-number-btn, .tittle-documents-part-number {
        font-size: 11px !important;
     }
}