*[class^='b2m-button-'] {
    padding: 15px 20px;
    line-height: 100%;
}

*[class*='b2m-button-'].medium {
    padding: 10px 15px;
    font-size: 0.8rem;
}

.rs-modalbox.modalbox-register .actions {
    display: flex;
    justify-content: space-between; /* Alinea el enlace y el botón en extremos opuestos */
    align-items: center;
}

/* Elimina el width 100% para evitar que el enlace ocupe toda la línea */
.rs-modalbox.modalbox-register .actions .b2m-button-link {
    text-align: left;
    width: auto;
}

select {
   padding: 5px 10px;
}

input {
    padding: 6.5px 10px;
}

.b2m-pivt-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.b2m-pivt-tabs::-webkit-scrollbar {
    display: none;
}

.left-menu-icon {
    opacity: 1;
    visibility: visible;
}

.left-menu-icon.icon-hidden {
    opacity: 0;
    visibility: hidden;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.50rem;
    font-size: 0.875em;
    color: #d92550;
}

.is-invalid {
    border: 1px solid #d92550;
    opacity: 1;
}

.banner-modal .meb-filters-block.is-invalid {
    border: 1px solid #d92550;
}

.b2m-lang-flag.ES {
    background-image: url('../../../resources/images/svg/ES.svg');
    background-size: contain;
}

.b2m-lang-flag.ES-CA {
    background-image: url('../../../resources/images/svg/ES-CA.svg');
    background-size: contain;
}

.b2m-lang-flag.ES-PV {
    background-image: url('../../../resources/images/svg/ES-PV.svg');
    background-size: contain;
}

.b2m-lang-flag.FR {
    background-image: url('../../../resources/images/svg/FR.svg');
    background-size: contain;
}

.b2m-lang-flag.IT {
    background-image: url('../../../resources/images/svg/IT.svg');
    background-size: contain;
}

.b2m-lang-flag.DE {
    background-image: url('../../../resources/images/svg/DE.svg');
    background-size: contain;
}

.b2m-lang-flag.PT {
    background-image: url('../../../resources/images/svg/PT.svg');
    background-size: contain;
}

.b2m-lang-flag.EN {
    background-image: url('../../../resources/images/svg/EN.svg');
    background-size: contain;
}

.b2m-lang-flag.RU {
    background-image: url('../../../resources/images/svg/EN.svg');
    background-size: contain;
}

.profile.form-items input,
.profile.form-items textarea,
.profile.form-items select {
    margin-bottom: 15px;
}

.b2m-card-footer .profile {
    text-align: right;
}

.b2m-modal-content-footer .profile {
    text-align: right;
}

/* ICONOS DE LOS MICROSERVICIOS */
.login-storage .ls-button.google .ls-service-icon {
    background-image: url('../../../resources/images/ls-icon-googledrive.png');
}
.login-storage .ls-button.dropbox .ls-service-icon {
    background-image: url('../../../resources/images/ls-icon-dropbox.png');
}
.login-storage .ls-button.onedrive .ls-service-icon {
    background-image: url('../../../resources/images/ls-icon-onedrive.png');
}


/* LISTAS DE LOS MICROSERVICIOS */
/* Para estilo de los cajones que contiene las listas de los estados de los microservicios */
.b2m-card-description-next-cont div { color: #000D; font-size: 0.9rem; font-weight: 400; padding-top:10px; } 

.b2m-list-state .icon-state.red{ color: #e74c3c;}
.b2m-list-state .icon-state.green{ color: #3ac47d;}

.b2m-list-state { background-color: transparent; color: #333; border: 1px solid #747775; text-align: center; padding: 15px; }
.b2m-list-state { background-color: transparent; color: #333; border: 1px solid #747775; text-align: center; padding: 15px; }
.b2m-list-state-aling { display: inline-flex;   align-items: center;  justify-content: center; gap: 0.5rem;   }

/* Alinear el texto de los textos */
.service-flex .ls-button{width: 100% !important ;}

/* Spinner */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
}

#loading-overlay .spinner {
    display: block;
    width: 40px;
    height: 40px;
    border-width: 4px;
    border-top-color: white;
    margin-bottom: 15px;
}

#loading-message {
    color: white;
    font-size: 16px;
    margin-top: 80px;
}

.service-flex .b2m-list-state {
    width: 100%;
    margin-top: 1em; 
}

.button-contact-delete {
    padding: 14px 20px;
}

.divider.row {
    border-bottom: 1px solid #ccc;
    margin: 20px 0;
}

.divider.row-small {
    border-bottom: 1px solid #ccc;
    margin: 10px 0;
}

.contact-field {
    margin-bottom: 10px;
}

.b2m-notification.visible {
    opacity: 0.8;
}

.b2m-notification .b2m-notification-content p {
    font-size: 1rem;
    color: #fff;
}

/*.b2m-product-mini {*/
/*    opacity: 0;*/
/*    transition: opacity 0.5s ease-in;*/
/*}*/

/*.b2m-product-mini.visible {*/
/*    opacity: 1;*/
/*}*/

/*.fade-out {*/
/*    opacity: 0;*/
/*    transition: opacity 0.5s ease-out;*/
/*}*/

.contact-positon {
    line-height: 180%;
}

.b2m-card .b2m-card-header.contact-method {
    padding: 15px 25px 15px 25px;
}

.b2m-card .b2m-card-footer.contact-method {
    padding: 15px 25px 15px 25px;
}

.b2m-card .b2m-card-header.discounts {
    padding: 15px 25px 15px 25px;
}

.b2m-card .b2m-card-footer.discounts {
    padding: 15px 25px 15px 25px;
}

.default-card {
    color: blue;
    float: right;
}

.button-contact-delete {
    margin-bottom: 15px;
}

.input-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.email-field input {
    flex: 1; /* Permite que el input ocupe todo el espacio disponible a la izquierda */
    margin-right: 10px; /* Añade un pequeño margen entre el input y el botón */
}

.email-field button {
    flex-shrink: 0; /* Evita que el botón se reduzca de tamaño */
}

.phone-field input {
    flex: 1; /* Permite que el input ocupe todo el espacio disponible a la izquierda */
    margin-right: 10px; /* Añade un pequeño margen entre el input y el botón */
}

.phone-field button {
    flex-shrink: 0; /* Evita que el botón se reduzca de tamaño */
}

.fax-field input {
    flex: 1; /* Permite que el input ocupe todo el espacio disponible a la izquierda */
    margin-right: 10px; /* Añade un pequeño margen entre el input y el botón */
}

.fax-field button {
    flex-shrink: 0; /* Evita que el botón se reduzca de tamaño */
}

.contact-field input {
    flex: 1; /* Permite que el input ocupe todo el espacio disponible a la izquierda */
    margin-right: 10px; /* Añade un pequeño margen entre el input y el botón */
}

.contact-field button {
    flex-shrink: 0; /* Evita que el botón se reduzca de tamaño */
}

.activate-two-factor {
    color: white;
    float: right;
    background-color: green;
    padding: 5px 8px;
    border-radius: var(--border-radius);
    margin-top: -6px;
}

.deactivate-two-factor {
    color: white;
    float: right;
    background-color: red;
    padding: 5px 8px;
    border-radius: var(--border-radius);
    margin-top: -6px;
}

.modal-two-factor {
    font-size: 0.85rem;
}

#two-factor-method, #two-factor-method option {
    font-size: 0.9rem;
}

.custom-send-link {
    color: var(--color-05);
    text-decoration: underline;
    cursor: pointer;
}

.custom-send-link:hover {
    color: #0a0a0a;
}

.table-actions {
    display: flex;
    justify-content: space-around; /* Asegura que los botones estén bien espaciados */
    align-items: center;
    gap: 3px; /* Espacio entre botones */
}

.table-actions button {
    background-color: transparent;
    border: none;
    padding: 5px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

/* Iconos dentro de los botones */
.table-actions button i {
    font-size: 18px; /* Tamaño de los iconos */
}

/* Efecto hover */
.table-actions button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/* Estilos específicos para los iconos */
.table-actions button.send-mail {
    color: #0052cc; /* Color del botón de enviar correo */
}

.table-actions button.show-modal {
    color: #0052cc; /* Color del botón de mostrar modal */
}

.b2m-pagination li.page-item div {
    text-decoration: none;
    user-select: none;
    font-size: 0.9rem;
    padding: 8px 12px;
    display: block;
    color: var(--color-05);
    min-width: 36px;
    text-align: center;
    cursor: pointer;
}

.b2m-pagination li.page-item.active div {
    color: #fff;
    cursor: auto;
}

.page-item.disabled .page-link {
    cursor: not-allowed;
    background-color: #d3d3d3; /* Gris claro */
    color: #6c757d; /* Gris oscuro */
    border: 1px solid #d3d3d3;
    pointer-events: none; /* Para evitar que se pueda interactuar */
}

.input-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el input y el botón */
}

.input-group input[type="text"] {
    flex: 1; /* Ocupa todo el espacio disponible */
}

.hidden {
    display: none !important; /* Asegura que el elemento esté completamente oculto */
}

.pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #ccc;
    background-color: #f8f8f8;
}

.pagination-footer .b2m-pagination-nav {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.pagination-footer .b2m-pagination-nav-block {
    display: flex;
    align-items: center;
}

.pagination-footer .b2m-pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-footer #pageSizeSelector {
    margin-right: 20px;
    padding: 5px;
}

.pagination-footer .b2m-items-shown p {
    margin: 0;
    font-size: 14px;
}

.small-icon {
    font-size: 16px; /* Ajusta el tamaño del ícono según lo necesites */
    vertical-align: middle; /* Alinea el ícono verticalmente al centro del texto */
    line-height: 1; /* Asegúrate de que la línea no añada un espacio adicional */
}

.address-option {
    display: flex;
    align-items: center; /* Centrar el radio button respecto al texto */
    gap: 10px; /* Espacio entre el radio button y el texto */
    padding: 10px; /* Espacio alrededor del contenido para hacerlo más legible */
    border-radius: 5px; /* Borde suave para darle un aspecto más moderno */
    transition: background-color 0.3s ease; /* Transición suave para resaltar */
}

/* Resaltar la opción seleccionada con un fondo gris suave */
.address-option.selected {
    background-color: #f0f0f0; /* Fondo gris claro para resaltar */
}

/* Estilo específico para los radio buttons del modal */
.modal-radio-button {
    width: auto; /* Asegurarse de que no tenga width al 100% */
    padding: 0; /* Quitar cualquier padding */
    margin: 0; /* Quitar cualquier margen indeseado */
}


/* Contenido para el Selecctor con imagen */
/* Icono de "limpiar selección" */
#clear-selection {
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 10px; /* Separación del texto */
}

.clear-icon {
    margin-left: 10px; /* Separar el texto de la X */
    text-align: center;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Ajustes para la apariencia del dropdown */
.b2m-selector-dropdown {
    max-height: 400px;
    border: 1px solid #ddd;
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: none;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: auto;
}

/* Mostrar el dropdown cuando está activo */
.b2m-selector-dropdown-visible {
    display: block;
}

/* Deshabilitar el selector cuando no esté disponible */
.ronin-div-selector.disabled {
    pointer-events: none; /* Desactivar interacción */
    opacity: 0.5; /* Indicar que está deshabilitado */
}

/* Contenedor de la lista de productos */
.b2m-selector-product-list {
    max-height: 300px; /* Altura máxima de la lista */
    overflow-y: auto; /* Scroll vertical */
    padding: 5px; /* Añadir padding para una mejor apariencia */
}

.ul-special-qo {
    margin: 0;
}

/* Contenedor del buscador */
.b2m-selector-dropdown .buscador {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Input del buscador */
.b2m-selector-dropdown .buscador #product-search-input {
    width: 100%;
    padding: 8px;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    font-size: 1rem;
}

/* Elementos de la lista de productos */
.b2m-selector-product-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    overflow: hidden; /* Asegurarse de que el contenido no se desborde */
}

.b2m-selector-product-item:last-child {
    border-bottom: none;
}

.b2m-selector-product-item:hover {
    background-color: #f0f0f0;
}

/* Imagen del producto */
.b2m-selector-product-image {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    object-fit: cover;
    border-radius: 4px;
}

/* Contenedor del texto de los productos */
.b2m-selector-product-details {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espacio entre líneas */
    max-width: calc(100% - 80px); /* Espacio para imagen y padding */
}

/* Cada línea de texto del producto */
.b2m-selector-product-line {
    font-size: 0.9rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Elemento de lista del dropdown */
.b2m-selector-list-item {
    list-style-type: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.b2m-selector-list-item:hover {
    background-color: #f7f7f7;
}

.ronin-content.admin {
    align-items: start;
}

.quick-order-03 .ptai-block .item-image {
    background-color: transparent;
}

.quick-order-03 .product-to-add-info {
    border-bottom: 0;
}

.quick-order-03 .product-to-add-info.with-border {
    border-bottom: 1px solid #ddd;
}

/*  Fin del Contenido para el Selecctor con imagen */

/* Ajusta los input para introducir el código del 2fa*/
.tf-modalbox.modalbox-twofactor .code-2fa {
    display: flex;
    gap: 2%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    max-width: 340px;
    margin: 0 auto;
}

.tf-modalbox.modalbox-twofactor .code-2fa input {
    width: 10%;
    font-size: 1.2rem;
    text-align: center;
}

.tf-modalbox.modalbox-twofactor .code-2fa-disable {
    display: flex;
    gap: 2%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    max-width: 340px;
    margin: 0 auto;
}

.tf-modalbox.modalbox-twofactor .code-2fa-disable input {
    width: 10%;
    font-size: 1.2rem;
    text-align: center;
}

.ronin-section-twofactor {
    width: 80%;
    padding: 12.5px 0;
}

/* Estilos para los iconos de la foto de perfil*/
.b2m-user-card .profile {
    text-align: center;
}

.image .image-profile {
    font-size: 110px;
    color: #484f57;
}

.image.profile {
    background-color: inherit !important;
}

.image .profile-edit {
    background-color: #484f57 !important;
}

.profile-image-size {
    height: 100px;
    width: 100px;
}

.image-head {
    font-size: 30px;
}

.header-image {
    border-radius: 50%;
    height: 45px;
    width: 45px;
}

.image .profile-delete {
    font-size: 1.0rem;
    color: #fff;
    background-color: #484f57;
    display: block;
    position: absolute;
    bottom: -10px;
    right: 85px;
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;
    user-select: none;
    transition: all 0.5s;
}

/* Estilos para el drag and drop de la foto de perfil */
.dropzone-container {
    pointer-events: none;
    position: relative;
    display: flex;
    min-height: 100px;
    border: 2px dashed #bbb;
    border-radius: 5px;
    align-items: center;
    padding: 20px 10px
}

.dropzone-container > * {
    flex: 1;
}

.dropzone-input {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1
}

.dropzone-preview {
    display: flex;
    align-items: center;
    max-width: 100%
}

.dropzone-preview-image {
    margin-left: 34px;
    min-width: 80%;
    max-width: 90%;
    height: 55px;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.dropzone-preview-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: 0 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none
}

.dropzone-preview-button::before {
    content: '×';
    padding: 3px 7px;
    cursor: pointer
}

.dropzone-placeholder {
    flex-grow: 1;
    text-align: center;
    color: #999
}

/*Fin de drag and drop*/

.button_disabled_login {
    cursor: not-allowed; /* Cambia el cursor para indicar que no se puede hacer clic */
    opacity: 0.7; /* Reduce la opacidad para un efecto de desactivación */
    pointer-events: none; /* Deshabilita todas las interacciones del mouse */
}

.button_disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed; /* Cambia el cursor para indicar que no se puede hacer clic */
    opacity: 0.6; /* Reduce la opacidad para un efecto de desactivación */
    pointer-events: none; /* Deshabilita todas las interacciones del mouse */
}

.toggle-password,
.toggle-password-confirm {
    position: absolute;
    top: 55%;
    right: 10px; /* Ajusta esta distancia según sea necesario */
    transform: translateY(-50%);
    cursor: pointer;
    visibility: visible;
}

.toggle-password .material-symbols-outlined,
.toggle-password-confirm .material-symbols-outlined {
    font-size: 24px; /* Ajusta el tamaño del ícono según tus preferencias */
    font-weight: normal;
}

input[type="password"] { /*, input[type="text"]*/
    width: 100%;
    padding-right: 40px; /* Espacio para el ícono */
    box-sizing: border-box;
}

input[type="password"]::-ms-reveal {
    display: none;
}

/* Checkbox para el modal de las direcciones*/
.form-item.acepto-address {
    margin: 15px 0 0;
}

input#acepto_shipping_input[type='checkbox'] {
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 25;
    cursor: pointer;
    width: 15px;
    opacity: 0;
}

input#acepto_shipping_input[type='checkbox'] + label {
    position: absolute;
    top: 0;
    margin-top: 0px;
    padding: 0 0 0 30px;
    left: 0;
    z-index: 25;
    cursor: pointer;
}

input#acepto_shipping_input[type='checkbox'] + label::before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
}

input#acepto_shipping_input[type='checkbox'] + label::after {
    content: '';
    display: block;
    opacity: 0;
    transition: all 0.3s;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 8px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #000;
    -ms-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

input#acepto_shipping_input[type='checkbox']:checked + label::after {
    opacity: 1;
    transition: all 0.3s;
}

input#acepto_billing_input[type='checkbox'] {
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 25;
    cursor: pointer;
    width: 15px;
    opacity: 0;
}

input#acepto_billing_input[type='checkbox'] + label {
    position: absolute;
    top: 0;
    margin-top: 0px;
    padding: 0 0 0 30px;
    left: 0;
    z-index: 25;
    cursor: pointer;
}

input#acepto_billing_input[type='checkbox'] + label::before {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
}

input#acepto_billing_input[type='checkbox'] + label::after {
    content: '';
    display: block;
    opacity: 0;
    transition: all 0.3s;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 8px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #000;
    -ms-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

input#acepto_billing_input[type='checkbox']:checked + label::after {
    opacity: 1;
    transition: all 0.3s;
}

/* Fin del checkbox para el modal de las direcciones*/

#password-criteria {
    margin-top: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    font-size: 0.9em;
    position: relative;
    display: none; /* Oculto por defecto */
}

#password-criteria ul {
    list-style-type: none;
    padding-left: 0;
}

#password-criteria li {
    margin: 5px 0;
}

.invalid {
    color: red;
}

.valid {
    color: green;
}

.input-container {
    position: relative;
    width: 100%;
}

.password-input {
    width: 100%;
    padding-left: 40px; /* Deja espacio para el ícono de check */
    padding-right: 40px; /* Deja espacio para el ícono de visibilidad */
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #888;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Estilos para el ícono de check verde */
#check-icon,
#check-icon-confirm {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: green;
    font-size: 24px;
    display: none;
}

.b2m-search-bar.visible .icon {
    background-color: transparent;
}

.b2m-search-bar {
    border-radius: 25px;
    transition: all 0.3s ease;
    background-color: transparent;
    border: 2px solid transparent;
    height: 44px;
    width: auto;
}

.b2m-search-bar.visible {
    background-color: #ffffff;
    border: 2px solid #ccc;
}

.b2m-search-bar input {
    display: none;
    border: none;
    outline: none;
    padding: 10px 15px;
    font-size: 16px;
    flex-grow: 1;
    height: 40px;
}

.b2m-search-bar.visible input {
    display: block;
    border: none;
    background-color: white;
    padding-left: 10px;
    height: 40px;
}

.b2m-sb-item.sb-close {
    display: none;
    font-size: 24px;
    color: blue;
    cursor: pointer;
}

.b2m-search-bar.visible .sb-close {
    display: flex;
    justify-content: center;
    align-items: center;
}

.b2m-search-bar.visible{
    grid-template-columns: 210px 45px;
    width: 260px;
}

.b2m-search-bar .b2m-sb-item:nth-child(1) {
    grid-area: 1 / 1 / 1 / 2;
    overflow: hidden;
    padding-left: 10px;
}

input[type="text"].prod-input {
    padding: 0;
}

.data-empty {
    text-align: center;
    padding: 10px;
    border: 1px solid #444;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.data-empty p {
    font-size: 0.9rem;
}

.alert-profile {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #444;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}


*[class^='b2m-button-'].small.show-more {
    margin-top: 10px;
    padding: 7px 9px;
    font-size: 0.7rem;
}

.filter-parent {
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-05);
}

.no-subset {
    color: #999;
    font-size: 0.9rem;
}

.no-prods {
    grid-column: span 4;
    text-align: center;
}

.list-flow {
    overflow: auto;
}

.material-symbols-outlined.icono.toggle.side-menu {
    top: 12px;
}

.chart-centered {
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    height: 100%; /* Asegura que ocupe todo el espacio vertical */
}

.chart-centered canvas {
    max-width: 100%; /* Evitar que el gráfico desborde horizontalmente */
    max-height: 100%; /* Ajustar el tamaño vertical */
    width: 300px; /* Ancho fijo opcional */
    height: 300px; /* Alto fijo opcional */
}

.statistics-abc-01 {
    padding-bottom: 0 !important;
}

.statistics-abc-01 .b2m-card-title {
    text-transform: uppercase;
    font-weight: 700;
}

.statistics-abc-01 .b2m-card-header.b2mch-2col {
    padding-top: 5px;
    padding-bottom: 5px;
}

.statistics-abc-01 .b2m-card-header.b2mch-2col .b2m-card-header-block:nth-child(1) {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 575.98px) {
    .statistics-abc-01 .b2m-card-header.b2mch-2col {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .statistics-abc-01 .b2m-card-title {
        text-align: center;
        width: 100%;
    }
}

.b2m-button-action {
    padding: 2px 0;
}

.b2m-align-sides {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.b2m-align-sides h3 {
    margin: 0;
}

.b2m-align-sides span {
    margin-left: auto;
    margin-right: 20px;
}

.b2m-my-orders-summary .ronin-block-title {
    border-bottom: 1px solid #0004;
    padding: 10px 0;
}

.calendar-container-full {
    width: 100%;
    height: 100%;
}

.b2m-order-detail-summary .rb-line.date , .b2m-order-detail-summary .rb-line.total{
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 10px;
    margin: 0 0 5px;
}

.b2m-order-detail-summary .rb-line.date span {
    margin-top: 6px;
}

.ronin-section.cards-grid .b2m-card.admin {
    grid-template-rows: 70px auto 94px;
}

.last-orders.order_status\.confirmed {
    color: #68be7c;
}

.last-orders.order_status\.draft {
    color: #999ea3;
}

.last-orders.order_status\.canceled {
    color: #e46c88;
}

.last-orders.order_status\.onhold {
    color: #52a4e7;
}

.last-orders.order_status\.processed {
    color: #f08742; /* Naranja para Processed */
}

.last-orders.order_status\.sent {
    color: #a37cf0; /* Naranja para Processed */
}

.last-orders.order_status\.delivered {
    color: #f55bc9; /* Naranja para Processed */
}

.b2m-align-sides-order {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.b2m-align-sides-order h2 {
    margin: 0;
}

.b2m-align-sides-order span {
    margin-left: auto;
}

.b2m-order-detail-summary .ronin-block-title {
    padding: 0 0 5px 0;
}

/* Spinner */

.spinner {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

.spinner.black {
    margin-top: 5px;
    display: block;
    position: relative;
    top: 30%;
    border-top-color: black;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.button.loading .spinner {
    display: block;
}

/* Estilo para enlaces deshabilitados */
a.disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

.responsive-ul-2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 8px 8px;
}

.placeholder-wrapper-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.placeholder-wrapper-search .image-profile {
    font-size: 40px;
    width: auto;
    height: auto;
    text-align: center;
}

.mouse-clicked {
    cursor: pointer;
}

/* Estilo del contenedor */
.b2m-search-card .b2m-sc-footer {
    display: flex; /* Alinea los elementos en una sola fila */
    justify-content: space-between; /* Texto a la izquierda, botón a la derecha */
    align-items: center; /* Centra verticalmente los elementos */
    min-height: 50px;
    padding: 15px;
    border-top: 1px solid #0004; /* Línea superior */
}

/* Texto "Resultados de búsqueda" */
.b2m-sc-footer .info {
    margin: 0; /* Elimina cualquier margen del párrafo */
    color: #333; /* Color del texto */
    font-size: 14px; /* Ajusta el tamaño de fuente */
    font-weight: normal; /* Sin negrita */
}

/* Botón "Ver más" */
.b2m-sc-footer #b2m_sc_footer_show_more button {
    background: none; /* Sin fondo */
    border: none; /* Sin borde */
    color: var(--color-05); /* Color del texto tipo enlace */
    font-size: 14px; /* Ajusta el tamaño de fuente */
    cursor: pointer; /* Muestra el cursor de enlace */
    padding: 5px 10px; /* Espaciado interno */
    text-align: right; /* Alinea el texto a la derecha */
}

.b2m-sc-footer #b2m_sc_footer_show_more button:hover {
    text-decoration: underline; /* Subraya el texto al pasar el mouse */
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 1;
}

.no-fill {
    font-variation-settings: "FILL" 0;
}

/* 📌 Estilos del Menú Contextual */
.context-menu {
    position: absolute;
    background-color: #fff; /* Fondo blanco sólido */
    border: 1px solid #ccc;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); /* Sombra */
    border-radius: 12px 12px 8px 8px;
    z-index: 9999;
    min-width: 220px; /* Ancho mínimo */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: none;
    white-space: normal;
    overflow: hidden;
}

.context-menu.show {
    opacity: 1;
    transform: scale(1);
    display: block;
}

/* 📌 Estilos del encabezado */
.context-menu-header {
    font-size: 16px;
    font-weight: bold;
    padding: 14px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    flex-wrap: nowrap;
    gap: 10px;
}

.context-menu-header .file-info {
    display: flex;
    flex-direction: column;
    max-width: calc(100% - 40px); /* Evita que la X lo cubra */
    overflow-wrap: break-word;
    word-break: break-word;
}

.context-menu-header .file-name {
    font-size: 16px;
    font-weight: bold;
    white-space: normal;
    line-height: 1.2;
}

.context-menu-header .file-size {
    font-size: 14px;
    color: #666;
    display: block;
    margin-top: 5px;
}

.context-menu-header button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    flex-shrink: 0; /* Evita que se reduzca */
}

/* 📌 Estilos de los ítems del menú */
.context-menu-item {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px; /* ✅ Espacio entre ícono y texto */
    transition: background 0.2s;
    background: white;
    border-bottom: 1px solid #eee;
}

/* Último elemento sin borde inferior */
.context-menu-item:last-child {
    border-bottom: none;
}

/* 🎨 Efecto hover en los ítems (excepto los desactivados) */
.context-menu-item:hover {
    background-color: #f2f2f2;
}

/* 📌 Íconos en el menú */
.context-menu-item .material-symbols-outlined {
    font-size: 20px; /* ✅ Tamaño adecuado */
    color: #555; /* Color gris */
    flex-shrink: 0; /* ✅ Evita que se reduzca */
}

/* 🎨 Ajuste de espacio para íconos */
.context-menu-item span {
    flex: none;
}

/* 🔒 Estilos especiales para "Not Shared" */
.not-clickable {
    cursor: default;
    opacity: 0.6;
    pointer-events: none; /* ✅ No permite clics ni hover */
    background: none !important;
}

.user-storage .files-items {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.user-storage .files-items.list-view > li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 15px 15px;
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden;
}

.user-storage .files-items > li:hover {
    background-color: #f5f5f5;
}

.user-storage .files-items > li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.user-storage .files-items > li > span {
    color: var(--color-05);
    font-size: 1.4rem;
}

.user-storage .files-items > li > span.folder-item-title {
    color: #111;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.user-storage .files-items > li > span.file-size {
    color: #555;
    font-size: 0.85rem;
    text-align: right;
    white-space: nowrap;
    min-width: 70px;
    max-width: fit-content;
    overflow: visible;
}

@media (max-width: 768px) {
    :root {
        --padding: 10px;
    }
}

.b2m-card-routes {
    padding: 0 0 25px 0;
}

.rs-product2-02 .b2m-info .item-description {
    color: #0008;
    margin: 0 0 5px;
}

.icon-item.back {
    margin-right: 10px;
}

/* ESTILOS PARA ICONO DE AYUDA EN CARDS */

.b2m-info-wrapper{
    display: flex;
    justify-content: space-between;
}

.b2m-info-wrapper div {
    display: flex;
    align-items: center;
}

.help-icon {
    font-size: 1em;
    margin-left: 7px;
}

.panel-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.text-observations {
    height: 140px;
}

.form-item.form-field i {
    color: #0008;
    font-size: 0.9rem;
}

/*Top de editar cliente en administración*/

.client-top .ronin-content {
    display: grid;
    grid-template-columns: 1fr 50px;
    gap: 25px;
}

.client-top .icon-item {
    background-color: #d3d3d3;
}

.b2m-filters .filters-group.visible .filters-group-content {
    transition: all 0.5s;
    max-height: unset;
    padding: 2px;
}
.ronin-section.b2m-5col .ronin-content { display: grid; gap: 25px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.padding-top-disbled{ padding-top: 0 !important;}
.padding-bottom-disbled{ padding-bottom: 0 !important;}
.gap-2col-content-statistics{ gap: 12px !important;}

.export-modal-box {
    position: fixed; /* Fijo en la pantalla */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centramos el cuadro en la pantalla */
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    width: 500px;
    max-width: 90%;
    text-align: center; /* Centra el contenido del contenedor */
}

.export-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #555f78;
}

#close-export-modal-box {
    background-color: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.export-modal-body label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    color: #555f78;
    font-size: 14px;
}

.export-modal-body input,
.export-modal-body textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

.export-modal-body.cancel {
    margin-bottom: 18px;
}

.export-modal-footer {
    display: flex;
    justify-content: flex-end;
}

#export-to-pdf {
    padding: 12px 15px;
    font-size: 14px;
    margin-right: 10px;
}

#export-to-word {
    padding: 12px 15px;
    font-size: 14px;
}

.item-sc-order {
    display: grid;
    grid-template-columns: 1fr 70px;
    gap: 12px;
}

.item-sc-order .item-block-status {
    text-align: center;
    align-content: space-evenly;
}

.item-block-status .confirmed {
    color: #68be7c;
}

.item-block-status .draft {
    color: #999ea3;
}

.item-block-status .canceled {
    color: #e46c88;
}

.item-block-status .onhold {
    color: #52a4e7;
}

.item-block-status .processed {
    color: #f08742; /* Naranja para Processed */
}

.item-block-status .sent {
    color: #a37cf0; /* Naranja para Processed */
}

.item-block-status .delivered {
    color: #f55bc9; /* Naranja para Processed */
}

/*Box para envíar el email de las acciones*/
.floating-catalog-box {
    position: fixed; /* Fijo en la pantalla */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centramos el cuadro en la pantalla */
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    width: 500px;
    max-width: 90%;
    text-align: center; /* Centra el contenido del contenedor */
}

.floating-catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #555f78;
}

#close-floating-catalog-box {
    background-color: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.b2m-order-by-label {
    text-align: left;
    color: var(--color-06);
    font-size: 1.0rem;
    font-weight: 500;
}

.catalog-order-card {
    padding: 1em;
    margin-bottom: 1em;
    text-align: left;
}

/*.floating-catalog-body label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    color: #555f78;
    font-size: 14px;
}

.floating-email-body input,
.floating-email-body textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}*/

.floating-catalog-body {
    margin-bottom: 18px;
}

.floating-catalog-footer {
    display: grid;
    justify-content: center;
}

.catalog-collection-btn {
    padding: 8px 22px;
    background-color: #0052cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 10px;
}

.zoom-icon {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    padding: 4px;
    font-size: 18px;
    cursor: pointer;
    display: none;
}

.image-wrapper:hover .zoom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 30, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
}

.zoom-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    padding: 40px 20px; /* padding superior e inferior */
    box-sizing: border-box;
}

.zoom-container img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

.zoom-close {
    position: absolute;
    top: -24px;
    right: -24px;
    background-color: white;
    border-radius: 50%;
    font-size: 24px;
    padding: 6px;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.zoom-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(30, 30, 30, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
    box-sizing: border-box;
    overflow: hidden;
}

.zoom-container {
    padding: 30px 20px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.zoom-container img {
    max-height: 85vh;
    height: auto;
    max-width: 100%;
    border-radius: 10px;
    object-fit: contain;
    margin: 0 auto;
}

.zoom-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 11;
    background: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.zoom-close:hover {
    background: #f2f2f2;
}

.b2m-filters {
    padding: 15px 0 15px 15px;
}
@media (max-width: 991.98px) {
    .b2m-filters {
        padding: 0 !important;
    }
}

.b2m-catalog.filters-content.b2m-card {
    overflow-y: scroll;
    max-height: 90vh;
    -ms-overflow-style: none;
}

.b2m-catalog.filters-content.b2m-card .b2m-card-header {
    padding: 1em;
}

.b2m-catalog.filters-content.b2m-card::-webkit-scrollbar {
    display: none;
}

:root {
    --padding: 15px !important;
}

.b2m-cart-card .b2m-cc-body .bcb-item {
    grid-template-columns: 75px 1fr 24px !important;
    margin: 0 0 15px !important;
    padding: 0 15px 15px !important;
}
.b2m-cart-card .bcf-block:nth-child(2) { grid-template-columns: 1fr 150px; }

.b2m-flags .flag.red {
    background-color: #ebc8ce;
    color: var(--color-07);
}

.b2m-flags .flag.blue {
    background-color: #cee2f9;
    color: var(--color-05);
}

.b2m-cart-bar .cart-icon-total {
    border: 0 !important;
    background-color: #ff0000;
    color: white;
}


/* PALETA DE COLORES */
.palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: sans-serif;
    margin-bottom: 10px;
    align-items: center;
}

.color-swatch {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    cursor: pointer;
}

.color-swatch:hover {
    transform: scale(1.1); /* Opcional: un pequeño zoom adicional para mejor efecto */
}

.number-colors {
    width: 16px;
    height: 16px;
    font-size: 0.75rem;
    cursor: pointer;
}

.price-discount-catalog {
    background-color: #D1D3DB;
    margin-bottom: auto;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 400;
    border-radius: 100px;
    min-width: 65px;
    text-align: center;
}

.palete-discount {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilos para los filtros del catálogo */

.b2m-filters .filters-group {
    padding: 10px 0 10px 15px !important;
}

.b2m-filters .filters-group .filters-sub-group {
    padding: 0 10px 0 10px;
}

.b2m-filters .filters-group.visible .filters-sub-group {
    padding: 10px 10px 0 10px;
}

.filter-child {
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-05);
}

.b2m-filters .filters-group ul li label {
    font-size: 0.8rem;
}

.b2m-filters .filters-sub-group ul {
    padding: 10px 10px 0 10px;
}

.b2m-filters .filters-group .filters-sub-group {
    transition: all 0.5s;
    max-height: 0;
    overflow: hidden;
}

.b2m-filters .filters-group.visible .filters-sub-group {
    transition: all 0.5s;
    max-height: 1000px;
}

.b2m-filters .filters-group .filters-sub-group .filters-group-content {
    transition: all 0.5s;
    max-height: 0;
    overflow: hidden;
}

.b2m-filters .filters-group .filters-sub-group.visible .filters-group-content {
    transition: all 0.5s;
    max-height: 1000px;
}

.b2m-filters .filters-group .sub-icono {
    transition: all 0.5s;
    position: absolute;
    top: 6px;
    right: -4px;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    color: var(--color-05);
}

.b2m-filters .filters-sub-group.visible .sub-icono {
    transition: all 0.5s;
    transform: rotate(180deg);
}

/* ESTILOS PARA ETIQUETAS */

.filter-badge {
    display: flex;
    align-items: center;
    font-size: 13px;
    white-space: nowrap;
    min-width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 5px;
    color: var(--color-05);
}
.filter-badge.filter-badge-bpartner {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 10px;
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 999px;
    color: var(--color-05);
    max-width: 100%;
}
.filter-badge.filter-badge-promo {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 10px;
    background-color: #f2e8ea;
    border: 1px solid #ff7597;
    border-radius: 999px;
    color: var(--color-07);
    max-width: 100%;
    vertical-align: bottom;
}

.filter-badge .filter-label {
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 5px;
}

.filter-badge .filter-value {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-badge .remove-filter {
    background: none;
    border: none;
    color: var(--color-05);
    font-size: 14px;
    margin-left: 8px;
    cursor: pointer;
    font-weight: normal;
    padding: 0 5px;
}

.filter-badge .remove-filter.remove-user {
    height: 20px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
    margin-bottom: auto;
}

.filter-badge .remove-filter:hover {
    color: red;
}

.b2m-search-card .b2m-sc-item { grid-template-columns: 70px 1fr; }
.b2m-search-card .b2m-sc-item .item-image {aspect-ratio: 1;}

.product-item > .pi-block:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
    word-wrap: break-word;
}

.stock-bubble {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: pre-line;
    display: none;
    z-index: 9999;
    pointer-events: none;
    max-width: 220px;
}

/* Elemento stock se pueden borrar cuando se haga lo nuevo */
.b2m-order-detail-main .item-variant-stock {
    background-color: #ccc;
    padding: 5px;
    border-radius: 4px;
    max-width: 72px;
    margin: 5px 0 0;
}

.b2m-order-detail-main .item-variant-stock > span:nth-child(1) {
    font-size: 0.7rem;
    font-weight: 400;
}

.b2m-order-detail-main .item-variant-stock > span:nth-child(2) {
    font-size: 0.9rem;
    font-weight: 600;
}

.b2m-order-detail-main .item-variant-stock > span {
    display: block;
    color: #333;
    text-align: center;
    line-height: 120%;
}

.b2m-order-detail-main .item-variant-stock.unique-variant {
    margin: 0 0 0;
    padding: 5px 20px;
}

.add-client-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px; /* espacio entre input y botón */
}

.add-client-wrapper input {
    width: auto;       /* sobreescribe el width:100% global */
    flex: 1;           /* ocupa todo el espacio disponible */
    font-size: 0.8rem !important;
    padding: 7px;
}

.add-client-input-container {
    flex: 1;
    position: relative;
}

#clientSearchInput {
    width: 100%;
}

.modify-catalog-input {
    font-size: 0.8rem !important;
    padding: 7px;
}

.add-client-wrapper button {
    flex-shrink: 0;    /* botón mantiene su tamaño natural */
    white-space: nowrap;
}

.b2m-steps .b2m-step.pending .step-title,
.b2m-steps .b2m-step.active .step-title,
.b2m-steps .b2m-step.processed .step-title {
    text-align: center !important;
}

.sc-block {
    padding-bottom: 1em;
}

.sc-block-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 1em;
    align-items: center;
}

.sc-block-title h2 {
    color: var(--color-05)
}

.b2m-cb-item.icon.editing {
    border: 2px solid var(--color-05);
    background-color: rgba(0, 82, 204, 0.22);
}


/* Media query para pantallas pequeñas (dispositivos móviles) */

@media (max-width: 1700px) {
    .ronin-section.b2m-2col .ronin-content.admin {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1395px) {
    .responsive-ul-2-grid {
        grid-template-columns: 1fr;
        margin: 8px 8px;
    }
}

@media (max-width: 1200px) {
    .responsive-ul-2-grid {
        grid-template-columns: 1fr 1fr;
        margin: 8px 8px;
    }
}

@media (max-width: 1100px) {
    .ronin-section.b2m-2col .ronin-content.address {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1025px) {
    .b2m-selector-product-image {
        width: 80px;
        height: 80px;
    }

    .b2m-selector-product-text {
        font-size: 1.1rem;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .b2m-selector-product-image {
        width: 80px;
        height: 80px;
    }

    .b2m-selector-product-text {
        font-size: 0.95rem;
    }
}

@media screen and (min-width:768px) and (max-width:991.98px){
    .ronin-section.b2m-5col .ronin-content { grid-template-columns: 1fr 1fr; }
}

@media screen and (min-width:576px) and (max-width:767.98px){
    .ronin-section.b2m-5col .ronin-content { grid-template-columns: 1fr; }
}

@media screen and (max-width:575.98px){
    .ronin-section.b2m-5col .ronin-content { grid-template-columns: 1fr; }
    .ronin-section.b2m-2col .ronin-content { gap: 12px; }
}

/* 📱 Estilos para Móviles */
@media (max-width: 600px) {
    .context-menu.mobile {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        background-color: white;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.2);
        transition: bottom 0.3s ease-in-out;
        padding: 15px 0;
        min-width: unset;
        text-align: center;
        display: flex;
        flex-direction: column;
        z-index: 9999;
    }

    .context-menu.show {
        bottom: 0;
    }

    .context-menu-header {
        font-size: 16px;
        font-weight: bold;
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .context-menu-item {
        padding: 14px;
        font-size: 16px;
        text-align: center;
        border-bottom: 1px solid #eee;
    }

    .context-menu-item:last-child {
        border-bottom: none;
    }

    .responsive-ul-2-grid {
        grid-template-columns: 1fr;
        margin: 8px 8px;
    }

    .b2m-selector-product-image {
        width: 80px;
        height: 80px;
    }

    .b2m-selector-product-text {
        font-size: 0.8rem;
    }

    .b2m-selector-product-details {
        gap: 3px;
    }

    .b2m-pivt-tabs::before {
        display: none;
    }

    .b2m-pivt-tabs .tab.active::after {
        display: none;
    }

    .b2m-pivt-tabs .tab::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        z-index: 2;
        opacity: 0.7;
        background-image: linear-gradient(0deg, rgba(27, 30, 37, 0.12) 0%, transparent 100%);
    }
}

@media (max-width: 576px) {
    .pagination-footer .b2m-pagination-nav {
        display: block;
    }

    /* Primer bloque: a la izquierda en la línea superior */
    .pagination-footer .b2m-pagination-nav-block.left-content {
        display: inline-block;
        width: 25%;
        justify-items: right;

    }
    .pagination-footer .left-content .b2m-pagination {
        width: 60px;
    }

    .pagination-footer #pageSizeSelector {
        margin-right: 0;
    }

    /* Segundo bloque: a la derecha en la línea superior */
    .pagination-footer .b2m-pagination-nav-block:nth-child(2) {
        display: inline-block;
        width: 65%;
        justify-items: center;
        margin-left: 10px;
    }

    /* Tercer bloque: centrado en la línea inferior */
    .pagination-footer .b2m-pagination-nav-block.right-content {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 15px;
        justify-items: center;
    }

    .ronin-view .ronin-section:first-child {
        padding: 12.5px 0;
    }

    .ronin-content {
        padding: 0;
    }
}

@media screen and (max-width: 575.98px) {
    .b2m-card .b2m-card-body {
        padding: 10px;
    }
    .rs-product2-02 .b2m-card-body {
        padding: 0 0 100px !important;
    }
}

@media (max-width: 576px) and (min-width: 416px) {
    /* Segundo bloque: a la derecha en la línea superior */
    .pagination-footer .b2m-pagination-nav-block:nth-child(2) {
        position: absolute;
        margin-top: 10px;
    }
}

@media (max-width: 550px) {
    .rs-modalbox.modalbox-register .actions {
        display: block;
        text-align: center;
    }

    .rs-modalbox.modalbox-register .actions .b2m-button-link {
        margin-bottom: 10px;
        width: 100%;
    }

    .rs-modalbox.modalbox-register .actions button {
        width: 100%;
    }

    .ronin-section.top.b2m-users-groups-top {
        padding-left: 1em !important;
    }
}

@media screen and (max-width: 412px) {
    .b2m-button-01.responsive-small {
        padding: 8px 10px;
    }
}