:root {
  --brand-purple: #780aab;
  --brand-orange: #ffae3d;
  --brand-orange-light: #ffc96b;
  --brand-yellow: #f7da72;
}

.list-group-item-link-vencido {
    background-color: #838385 !important;
    padding-left: 10px;
    border-radius: 5px !important;
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0.1, 0.1) !important;
    margin-bottom: 10px;
}
.list-group-item-link-vencido > li {
    background-color: #d8d9dc !important;
    padding-left: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.list-group-item-info-custom {
    background-color: #bdd9f4 !important;
    padding-left: 10px;
    border-radius: 5px !important;
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0.1, 0.1) !important;
    margin-bottom: 10px;
}
.list-group-item-info-custom > li {
    background-color: #f0f0f0 !important;
    padding-left: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.field-card-title {
    font-weight: bold;
    background-color: #fffbff; /* Light gray background */
    padding: 2px;
    border-radius: 4px;
    display: inline; /* Changed from inline-block to inline */
    margin-right: 5px; /* Add spacing between elements */
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.list-group-item-dark-client {
    background-color: #15a452ff !important;
    padding-left: 10px;
    border-radius: 5px !important;
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0.1, 0.1) !important;
    margin-bottom: 10px;
}
.list-group-item-dark-client > li {
    background-color: #fffbff !important;
    padding-left: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.list-group-item-action-custom {
    padding: 0px !important;
}

.btn-tiny {
    transform: scale(0.6);
    padding: 0.5rem;
}
.card-field-title {
    font-weight: bold; /* Hace el texto en negrita */
    font-size: 1.05rem; /* Incrementa ligeramente el tamaño de la fuente */
    display: inline; /* Asegura que las etiquetas <p> permanezcan en línea */
    margin: 0; /* Elimina el margen predeterminado de la etiqueta <p> */
}

.row.onhover-highlight:hover {
    background-color: #e8f5f9;
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    line-height: 1 !important;
}

.row.onhover-highlight {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    line-height: 1;
}

.mh-6m {
    max-height: 6em;
}
.card-header.collapsed::after {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
}

.card-header:not(.collapsed)::after {
    content: "\f068";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
}

.accordion .card-header:not(.card-header-selectall):after {
    font-family: "FontAwesome";
    content: "\f068";
    float: right;
}
.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f067";
}

.rowarticle {
    margin-left: 0rem !important;
    margin-right: 0rem !important;
    background-color: white;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0.15, 0.15) !important;
}

.col-row-article {
    /*margin-left: 0rem !important;*/
    /*margin-right: 0rem !important;*/
    /*background-color: white;*/
    box-shadow: 0 0.25rem 0.1rem rgba(0, 0, 0.1, 0.1) !important;
}

.contarticle {
    background-color: rgb(247 247 247);
    margin-top: 1px;
}

.rowarticlered {
    background-color: #ffd5ca;
}

.sticky-top {
    z-index: 99;
}

.card-columns {
    @media (max-width: 576px) {
        column-count: 3;
    }
    @media (min-width: 576px) {
        column-count: 4;
    }
    @media (min-width: 768px) {
        column-count: 5;
    }
    @media (min-width: 992px) {
        column-count: 6;
    }
    @media (min-width: 1200px) {
        column-count: 7;
    }
}

.catalog-category {
    @media (max-width: 576px) {
        padding-left: 0px;
        padding-right: 0px;
    }
    padding-left: 0px;
    padding-right: 0px;
}

.card-header-main-catalog {
    /*background-color: #17a2b8 !important;*/
    border-radius: 5px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0.15, 0.15) !important;
    margin-top: 3px;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.card-header-custom {
    background-color: #17a2b8 !important;
    border-radius: 5px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0.15, 0.15) !important;
    margin-top: 3px;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.card-header-farma {
    /*verde oscuro #1d643b*/
    background-color: #15a452 !important;
    border-radius: 5px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0.15, 0.15) !important;
    margin-top: 3px;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.catalog-banner {
    z-index: 99;
}

.catalog-article {
    aspect-ratio: 1 / 1;
}

.catalog-article-price {
    vertical-align: middle;
    color: white;
    font-weight: bold;
    padding-top: 0.5vh;
}

.catalog-article-desc {
    vertical-align: middle;
    color: white;
    font-weight: bold;
    padding-top: 0.5vh;
    text-align: center;
}

.catalog-article-code {
    vertical-align: middle;
    color: white;
    padding-top: 0.5vh;
    text-align: center;
}

.catalog-article.card {
    background-color: unset;
    background-clip: unset;
    border: unset;
    border-radius: unset;
    border-radius: 5px !important;
    box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0.1, 0.1) !important;
}

.form-control-plaintext {
    font-weight: bold;
}

.catalog-form {
    padding-bottom: 50px;
}

.catalog-article-svg {
    width: 100%;
}
.floating-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1040;
    background-color: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

/* Ocultar floating-bottom cuando hay un modal abierto */
body.modal-open .floating-bottom {
    z-index: 0;
    visibility: hidden;
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/6) {
    .catalog-form {
        max-width: calc(100vh);
    }
}

/* Estilos para el navbar en la parte superior */
#linesnavbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 10px 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: none;
    transition: all 0.3s ease;
}

/* Estilos para el contenedor del campo de búsqueda */
.linesnavbar-search {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Estilos para el botón de toggle */
.toggle-lines-btn {
    border-radius: 0 4px 4px 0;
}

/* Estilos para el contenedor de líneas */
.lineas-container {
    position: fixed;
    top: 60px; /* Ajusta según la altura del buscador */
    left: 0;
    width: 250px;
    max-height: calc(100vh - 60px);
    background-color: whitesmoke;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    z-index: 999;
    padding: 10px 0;
    border-radius: 0 0 4px 0;
}

/* Estilos para las opciones en el contenedor de líneas */
.leftnav-option {
    margin: 5px 0;
}

.leftnav-a {
    padding: 8px 15px;
    text-decoration: none;
    color: #212529;
    display: block;
    transition: all 0.2s ease;
}

.leftnav-a:hover {
    background-color: #e9ecef;
    color: #007bff;
}

/* Ajustar el formulario principal para dar espacio al navbar */
.catalog-form {
    margin-top: 60px; /* Debe ser igual o mayor a la altura del navbar */
    width: 100%;
    padding-bottom: 120px; /* Mantener el espacio para floating-bottom */
}
/* Estilos específicos para el layout de watch-web */
.watch-web-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px); /* Altura total menos altura de navbar */
    overflow: hidden;
    position: relative;
}
/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
    #linesnavbar {
        width: 80%;
        max-width: 300px;
    }
    .linesnavbar-search {
        max-width: 100%;
    }

    .lineas-container {
        width: 80%;
        max-width: 300px;
    }
}
#linesnavbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Ancho completo para la barra */
    height: auto; /* Altura automática */
    background-color: whitesmoke;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Asegurar que esté por encima de otros elementos */
    transform: none; /* Eliminar la transformación que lo oculta */
    transition: height 0.3s ease-in-out;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* Estilos para el contenido dentro del navbar */
#linesnavbar .form-leftnav {
    width: 30%;
    margin: 0 10px;
}

#linesnavbar .leftnav-option {
    display: inline-block;
    margin: 5px;
}

#linesnavbar .leftnav-a {
    padding: 5px 10px;
    text-decoration: none;
    color: black;
    display: inline-block;
    transition: 0.3s;
    border-radius: 4px;
    background-color: #f0f0f0;
}

#linesnavbar .leftnav-a:hover {
    background-color: lightblue;
    color: blue;
}

/* Ajuste para el botón de cerrar */
#linesnavbar .banner-helper-close {
    position: relative;
    margin-left: auto;
    order: 2;
}

/* Estilos para el contenido principal para ajustar el espacio superior */
.catalog-form {
    margin-top: 70px; /* Ajustar según la altura del navbar */
    width: 100%;
}

/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
    #linesnavbar {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 10px 5px;
    }

    #linesnavbar .form-leftnav {
        width: 90%;
        margin: 10px auto;
    }

    #linesnavbar .banner-helper-close {
        margin: 5px;
        order: 0;
    }

    .catalog-form {
        margin-top: 150px; /* Ajustar para móviles si el navbar es más alto */
    }
}
.leftnav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 999;
    top: 0px;
    left: 0px;
    background-color: rgb(17, 17, 17);
    overflow-x: hidden;
    transition: all 0.5s ease 0s;
    padding-top: 60px;
    margin-bottom: 10px;
}

.leftnav a {
    padding: 2px 2px 2px 10%;
    text-decoration: none;
    color: black;
    display: block;
    transition: 0.3s;
    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.3);
}

.leftnav a:hover {
    background-color: lightblue;
    color: blue;
}

.leftnav .form-leftnav {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    margin-bottom: 15px;
}

@media (max-width: 576px) {
    #linesnavbar {
        width: 160px; /* Cambiar el ancho a 180px en móviles */
    }

    /* Ajustar tamaño de fuente en el menú lateral */
    #linesnavbar a {
        font-size: 0.85rem; /* Tamaño de fuente más pequeño */
        padding-left: 5%; /* Ajustar padding */
    }

    /* Ajustar estilo del cuadro de texto de búsqueda */
    #linesnavbar .form-leftnav {
        font-size: 0.75rem; /* Tamaño de fuente más pequeño en input */
        width: 90%; /* Ajustar ancho del input */
        margin-left: 5%; /* Centrar dentro del nuevo ancho menor */
        margin-right: 5%;
    }

    /* Reducir botones dentro de #linesnavbar */
    #linesnavbar .btn {
        font-size: 0.8rem; /* Reducción de tamaño */
    }

    .content-scrollable .catalog-form {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.btn-qty {
    font-size: 0.75rem;
    font-weight: 750;
    border-radius: 15px !important;
    background-color: #dedee4;
}
.btn-article-color {
    background-color: #dedee4;
    border-radius: 5px !important;
}

.btn-group-2025 {
    display: flex;
    gap: 4px;
}

.btn-rounded {
    height: 100%;
}

.inputarticle-style.bg-nonzero,
.inputarticle.bg-nonzero {
    background-color: #99f8b0;
    transition: background-color 0.3s ease;
}

.inputarticle-style {
    border-radius: 5px !important;
    font-size: 0.75rem;
    background-color: #dedee4;
    transition: background-color 0.3s ease;
}
.inputarticle-select {
    font-size: 0.75rem;
    background-color: #dedee4;
    border-radius: 5px !important;
}

.modal-body.order-detail {
    padding: 0.2rem;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    text-wrap: nowrap;
}

.order-detail .col {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.order-detail .col:nth-child(1) {
    text-align: right;
    padding-right: 0px;
}

.order-detail .col:nth-child(2) {
    text-align: right;
}

.order-detail .col:nth-child(3) {
    padding-right: 0px;
}

.order-detail .col:nth-child(4) {
    text-align: right;
    padding-left: 0px;
}

.order-detail .col:nth-child(5) {
    text-align: right;
    padding-left: 0px;
}

.row-spreadsheet {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding-top: 0px;
    padding-bottom: 0px;
}
.row-spreadsheet[style*="display: none"] {
    display: none !important;
}

.col-spreadsheet {
    border-left: 0.5px solid #000;
    border-right: 0.5px solid #000;
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    padding-left: 3px;
    padding-right: 3px;
    text-overflow: ellipsis;
}

@media (max-width: 576px) {
    /* Ajuste general */
    body,
    html {
        margin: 0;
        padding: 0;
        width: 100%; /* Eliminar restricciones */
    }
    /* Ocultar las cabeceras */
    .spsh-table-header-row {
        display: none;
    }

    .catalog-form {
        margin: 0; /* Eliminar márgenes */
        padding: 0; /* Eliminar relleno */
        width: 100%; /* Configurar ancho completo */
    }

    .catalog-category.container {
        max-width: 100% !important; /* Sobrescribir ancho fijo */
        padding: 0 !important; /* Eliminar relleno */
    }

    .row-spreadsheet {
        flex-direction: column;
        margin: 0 !important; /* Evitar márgenes laterales */
        padding: 0 !important; /* Eliminar relleno extra */
        width: 100% !important; /* Asegurar ancho completo */
        border-bottom: 1px solid #ddd; /* Línea fina para separar filas */
    }

    .col-spreadsheet {
        width: 100% !important; /* Configurar ancho total */
        border: none !important; /* Eliminar bordes verticales */
        padding: 0.5rem; /* Agregar espacio interno */
        display: flex;
        justify-content: center; /* Centrar horizontalmente */
        align-items: center; /* Centrar verticalmente */
        text-align: center; /* Centrar el texto */
        border-bottom: 1px solid #ddd; /* Línea fina para separar columnas en móvil */
    }
    .col-desc-article {
        font-weight: bold !important; /* Aplicar negrita en móviles */
    }
    /* Ajustar elementos problemáticos */
    .container,
    .sticky-top,
    .catalog-banner {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .sticky-top {
        position: static !important; /* Asegurar que no ocupe espacio innecesario */
    }
}
.disabled-anchor {
    pointer-events: none; /* Evita que sea clickeable */
    opacity: 0.4; /* Apariencia visual más clara */
    cursor: default;
}

.colh-spreadsheet {
    border-top: 1px solid #000;
    text-align: center;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    padding-left: 4px;
    padding-right: 4px;
}

.rowh-spreadsheet {
    border-bottom: 1px solid #000;
    padding-top: 0px;
    padding-bottom: 0px;
}

.col-spreadsheet:nth-child(1) {
    text-align: center;
}
.col-spreadsheet:nth-child(3) {
    text-align: right;
    padding-right: 5px;
}

.news-title-container {
    position: relative;
    width: 100%;
    padding-top: 15px;
}

.news-title-container.float-style > i {
    float: right;
    line-height: 26px;
}
.news-title-container.absolute-style > i {
    position: absolute;
    top: 50%;
    right: 30px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

.spsh-table-description-row {
    padding-top: 23px;
    background-color: #f8fafc;
}

.spsh-table-description {
    text-align: center;
    font-size: large;
    font-weight: bold;
}

.spsh-table-header-row {
    background-color: #dbe9f6;
}

.banner-helper {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #18187f;
    padding: 0px 40px;
    border-radius: 0 0 16px;
    color: white;
    cursor: pointer;
}
.banner-helper-farma {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #1d643b;
    padding: 0px 40px;
    border-radius: 0 0 16px;
    color: white;
    cursor: pointer;
}

.banner-reload {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #18187f;
    padding: 0px 40px;
    border-radius: 0 0 0 16px;
    color: white;
    cursor: pointer;
}

.banner-reload-farma {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #1d643b;
    padding: 0px 40px;
    border-radius: 0 0 0 16px;
    color: white;
    cursor: pointer;
}

.banner-helper-close {
    position: absolute;
    top: 5px;
    right: 5px;
    color: black;
    cursor: pointer;
}

.banner-download {
    position: absolute;
    top: 0;
    left: calc(50% - 5vh);
    background-color: #18187f;
    padding: 0px 20px;
    border-radius: 0 0 16px 16px;
    color: white;
    cursor: pointer;
}
.banner-download-farma {
    position: absolute;
    top: 0;
    left: calc(50% - 5vh);
    background-color: #1d643b;
    padding: 0px 20px;
    border-radius: 0 0 16px 16px;
    color: white;
    cursor: pointer;
}

.banner-download i {
    padding: 0 0 0 10px;
}

/* Nuevo contenedor para la barra de búsqueda */
.linesnavbar-container {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos para el contenedor del campo de búsqueda */
.linesnavbar-search {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Estilos para el botón de toggle */
.toggle-lines-btn {
    border-radius: 0 4px 4px 0;
}

/* Mantener el estilo original de leftnav pero ajustarlo */
#linesnavbar {
    position: fixed;
    top: auto; /* No fijarlo al top de la ventana */
    left: 0;
    width: 250px;
    height: 100%;
    overflow-y: auto;
    background-color: whitesmoke;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    z-index: 1001; /* Mayor que el contenedor principal */
    transform: translateX(-100%); /* Oculto por defecto */
    transition: transform 0.3s ease-in-out;
}

#linesnavbar.open {
    transform: translateX(0); /* Mostrar cuando tiene la clase open */
}

/* Estilos para las opciones en el contenedor de líneas */
.leftnav-option {
    margin: 5px 0;
}

.leftnav-a {
    padding: 8px 15px;
    text-decoration: none;
    color: #212529;
    display: block;
    transition: all 0.2s ease;
}

.leftnav-a:hover {
    background-color: #e9ecef;
    color: #007bff;
}

/* Asegurarse de que el contenido principal tenga espacio para la barra fija */
.catalog-form {
    padding-top: 10px;
    width: 100%;
    padding-bottom: 120px; /* Mantener el espacio para floating-bottom */
}

/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
    .linesnavbar-search {
        max-width: 100%;
    }

    #linesnavbar {
        width: 80%;
        max-width: 300px;
    }
}

/* Estilos para el contenedor de búsqueda fijo en la parte superior */
.search-container {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1050;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Contenedor scrolleable para el contenido principal */
.content-scrollable {
    width: 100%;
    overflow-y: auto;
    padding-bottom: 50px; /* Espacio para el footer flotante */
}
.content-scrollable .catalog-form {
    max-width: 1200px; /* Un ancho máximo para pantallas grandes */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Ajustes para el menú lateral */
#linesnavbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background-color: #f8f9fa;
    z-index: 1060;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    padding-top: 60px; /* Espacio para que no se superponga con la navbar */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

#linesnavbar.open {
    transform: translateX(0);
}

/* Estilos para el botón de cierre */
.banner-helper-close {
    position: sticky;
    top: 10px;
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    #linesnavbar {
        width: 80%;
        max-width: 300px;
    }

    .content-scrollable {
        margin-top: 60px;
        height: calc(100vh - 130px);
    }
    .content-scrollable .catalog-form {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Modificar el div flex principal para mostrar los componentes en columna */
.d-flex.justify-content-center {
    flex-direction: column;
    align-items: center;
}

/* Estilos específicos para la vista de hoja de cálculo */
.catalog-category.container-fluid {
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.catalog-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1050;
}

.catalog-banner {
    /*position: sticky;*/
    top: 10px;
    z-index: 1040;
    padding: 0;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    height: 50px;
    display: flex;
    align-items: stretch;
    position: relative;
    border-top-right-radius: 35px;
    scroll-margin-top: 160px;
}

@media (max-width: 768px) {
    .catalog-banner {
        scroll-margin-top: 115px;
    }
}

/* watchCatalog: el header no es sticky, vive fuera de .content-scrollable (que es
   el contenedor con scroll propio), así que el borde superior de ese scrollport
   ya arranca justo debajo del header. Alcanza un margen chico para que el banner
   de categoría no quede pegado al borde. */
.watch-web-container .catalog-banner {
    scroll-margin-top: 5px;
}

.catalog-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: repeating-linear-gradient(*/
    /*    !*-55deg,*!*/
    /*    transparent,*/
    /*    transparent 8px,*/
    /*    rgba(255,255,255,0.08) 8px,*/
    /*    rgba(255,255,255,0.08) 16px*/
    /*);*/
    pointer-events: none;
}

.banner-content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    border-bottom: 5px solid #1a1a1a;
}

.banner-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.6rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    padding: 0 1.2rem;
    padding-left: 15%;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-shadow:
        1px 1px 0 #5c4033,
        -1px 1px 0 #5c4033,
        1px -1px 0 #5c4033,
        -1px -1px 0 #5c4033;
}

.banner-title-text {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Notas de la línea: texto explicativo junto al título, fondo transparente,
   letra más fina; si no entra se recorta con "…" (el texto completo queda en
   el title/tooltip). */
.banner-notas {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    color: #000;
    font-size: 0.85rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    text-align: center;
}

.banner-promo {
    background-color: #1a1a1a;
    color: #fff;
    padding: 0 2rem 0 2.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    /* transform: skewX(-15deg); */
    margin-left: -15px;
}

.banner-promo-text {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    white-space: nowrap;
    /* transform: skewX(15deg); */
    text-transform: uppercase;
}

.banner-accent {
    width: 100px;
    height: 100%;
    background-color: #7c3aed;
    /* transform: skewX(-15deg); */
    margin-left: -5px;
    margin-right: -10px;
}


@media (max-width: 576px) {
    .banner-title {
        font-size: 1rem;
        letter-spacing: 0.5px;
        padding-left: 0.5rem;
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 576px) {
    .banner-promo {
        display: none;
    }

    .catalog-banner {
        height: auto;
        min-height: 50px;
    }

    .banner-title {
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        padding-left: 0.5rem;
        white-space: normal;
        word-break: break-word;
    }

    .banner-accent {
        background-color: #1a1a1a;
    }

    .banner-content {
        height: unset;
        border-bottom: 2px solid #1a1a1a;
    }
}

.rowh-spreadsheet {
    background-color: #f1f1f1;
    font-weight: bold;
    margin: 0;
}

.spsh-table-description-row {
    border-bottom: 1px solid #dee2e6;
}

.spsh-table-header-row {
    border-bottom: 2px solid #dee2e6;
}

.colh-spreadsheet {
    padding: 0.5rem;
    text-align: center;
}

.row-spreadsheet {
    border-bottom: 1px solid #eee;
    margin: 0;
    transition: background-color 0.2s;
}

.row-spreadsheet:hover {
    background-color: #f9f9f9;
}

.col-spreadsheet {
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.col-desc-article {
    font-weight: 500;
}

/* Ajustes para los botones en la barra de banner */
.banner-helper,
.banner-helper-farma,
.banner-download,
.banner-download-farma,
.banner-reload,
.banner-reload-farma {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
    background-color: #f8f9fa;
    cursor: pointer;
    font-size: 0.875rem;
    border: 1px solid #dee2e6;
    transition: all 0.2s;
}

.banner-helper:hover,
.banner-helper-farma:hover,
.banner-download:hover,
.banner-download-farma:hover,
.banner-reload:hover,
.banner-reload-farma:hover {
    background-color: #e9ecef;
}

/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
    .catalog-banner {
        position: static;
    }

    .colh-spreadsheet {
        font-size: 0.875rem;
    }

    .col-spreadsheet {
        padding: 0.25rem;
        font-size: 0.875rem;
    }
}

/* ===========================================
   CATALOG WEB/WATCH UNIFIED STYLES
   =========================================== */

/* Helvetica Neue LT Std - 55 Roman */
@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('/storage/css/fonts/HelveticaNeueLTStd-Cn.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Neue LT Std - 77 Bold Condensed */
@font-face {
  font-family: 'Helvetica Neue LT Std 77 Bd Cn';
  src: url('/storage/css/fonts/NeueHelveticaCondensedBQ-Roman.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Neue LT Std - 57 Condensed */
@font-face {
  font-family: 'Helvetica Neue LT Std 57 Cn';
  src: url('/storage/css/fonts/HelveticaNeueLTStd-BdCn.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Card Container */
.watch-web-container .product-card,
.catalog-link-web .product-card {
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 240px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 16px;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.watch-web-container .product-card:hover,
.catalog-link-web .product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* Image Section */
.watch-web-container .image-container,
.catalog-link-web .image-container {
  position: relative;
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* recorta la cinta de oferta por bulto */
}

@media (min-width: 768px) {
  .watch-web-container .image-container,
  .catalog-link-web .image-container {
    height: 220px;
  }
}

.watch-web-container .promo-badge,
.catalog-link-web .promo-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: auto;
  z-index: 10;
  display: block;
}

@media (min-width: 768px) {
  .watch-web-container .promo-badge,
  .catalog-link-web .promo-badge {
    width: 80px;
  }
}

.watch-web-container .product-image,
.catalog-link-web .product-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Text Content Section */
.watch-web-container .product-info,
.catalog-link-web .product-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: auto;
}

.watch-web-container .product-title,
.catalog-link-web .product-title {
  font-family: 'Helvetica Neue LT Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #333333;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0px;
}

/* Price Section */
.watch-web-container .product-price,
.catalog-link-web .product-price {
  font-family: 'Helvetica Neue LT Std 77 Bd Cn', 'Helvetica Neue LT Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 880;
  color: #141414;
}

.watch-web-container .product-price-decimals,
.catalog-link-web .product-price-decimals {
  font-size: 0.7em;
  vertical-align: baseline;
  margin-left: 2px;
  position: relative;
  top: -5px;
}

.watch-web-container .tax-info,
.catalog-link-web .tax-info {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

.watch-web-container .tax-info sup,
.catalog-link-web .tax-info sup {
  font-size: 0.8em;
  vertical-align: super;
}

.watch-web-container .unit-price,
.catalog-link-web .unit-price {
  font-family: 'Helvetica Neue LT Std 77 Bd Cn', 'Helvetica Neue LT Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  color: #636363;
}

/* ── Oferta por bulto: cinta ─────────────────────────────────────────── */
.watch-web-container .ribbon-bulto,
.catalog-link-web .ribbon-bulto {
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 104px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.watch-web-container .ribbon-bulto span,
.catalog-link-web .ribbon-bulto span {
  position: absolute;
  top: 18px;
  left: -32px;
  width: 148px;
  transform: rotate(-45deg);
  background: #16a34a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 4px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* ── Oferta por pallet: cinta (debajo de la de bulto, misma esquina) ─── */
.watch-web-container .ribbon-pallet,
.catalog-link-web .ribbon-pallet {
  position: absolute;
  top: 64px;
  left: 0;
  width: 104px;
  height: 104px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.watch-web-container .ribbon-pallet span,
.catalog-link-web .ribbon-pallet span {
  position: absolute;
  top: 18px;
  left: -32px;
  width: 148px;
  transform: rotate(-45deg);
  background: #7c3aed;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 4px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* ── Sin descuento por bulto/pallet: cinta amarilla "Descuento Aplicado" ── */
.watch-web-container .ribbon-descuento,
.catalog-link-web .ribbon-descuento {
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 104px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.watch-web-container .ribbon-descuento span,
.catalog-link-web .ribbon-descuento span {
  position: absolute;
  top: 18px;
  left: -32px;
  width: 148px;
  transform: rotate(-45deg);
  background: #eab308;
  color: #422006;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 4px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* ── Oferta por bulto/pallet: bloque de precios ───────────────────────── */
.watch-web-container .pb,
.catalog-link-web .pb {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 7px;
}

.watch-web-container .pb__row,
.catalog-link-web .pb__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1.4px solid #e9e9ec;
  background: #fff;
}

.watch-web-container .pb__k,
.catalog-link-web .pb__k {
  font-size: 10.5px;
  font-weight: 700;
  color: #18181b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.watch-web-container .pb__k em,
.catalog-link-web .pb__k em {
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  background: #15803d;
  color: #fff;
  padding: 1px 5px;
  border-radius: 20px;
}

.watch-web-container .pb__v,
.catalog-link-web .pb__v {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.watch-web-container .pb__v small,
.catalog-link-web .pb__v small {
  font-size: 9px;
  font-weight: 600;
  color: #6b7280;
}

/* fila unidad */
.watch-web-container .pb__row--unit,
.catalog-link-web .pb__row--unit {
  border-color: #d4d4d8;
  background: #fafafa;
}

/* se atenúa cuando el bulto ya está completo (deja de ser el precio que se paga) */
.watch-web-container .pb__row--muted,
.catalog-link-web .pb__row--muted {
  opacity: 0.45;
}

/* fila bulto: SIEMPRE verde */
.watch-web-container .pb__row--bulk,
.catalog-link-web .pb__row--bulk {
  border-color: #86efac;
  background: #dcfce7;
}

.watch-web-container .pb__row--bulk .pb__v,
.watch-web-container .pb__row--bulk .pb__k,
.catalog-link-web .pb__row--bulk .pb__v,
.catalog-link-web .pb__row--bulk .pb__k {
  color: #15803d;
}

/* fila pallet: SIEMPRE violeta, para diferenciarse del tramo bulto */
.watch-web-container .pb__row--pallet,
.catalog-link-web .pb__row--pallet {
  border-color: #c4b5fd;
  background: #ede9fe;
}

.watch-web-container .pb__row--pallet .pb__v,
.watch-web-container .pb__row--pallet .pb__k,
.catalog-link-web .pb__row--pallet .pb__v,
.catalog-link-web .pb__row--pallet .pb__k {
  color: #6d28d9;
}

.watch-web-container .pb__row--pallet .pb__k em,
.catalog-link-web .pb__row--pallet .pb__k em {
  background: #6d28d9;
}

/* Mobile: apilar label arriba y precio debajo en cada fila */
@media (max-width: 767px) {
  .watch-web-container .pb__row,
  .catalog-link-web .pb__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* mensaje dinámico (faltan N / bulto completo) */
.watch-web-container .pb__hint,
.catalog-link-web .pb__hint {
  font-size: 10.5px;
  font-weight: 700;
  color: #15803d;
  min-height: 13px;
  margin-bottom: 4px;
}

/* Grid Layout */
.watch-web-container .catalog-articles-watch,
.catalog-link-web .catalog-articles-watch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.watch-web-container .catalog-articles-watch > div,
.catalog-link-web .catalog-articles-watch > div {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .watch-web-container .catalog-articles-watch,
  .catalog-link-web .catalog-articles-watch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .watch-web-container .catalog-articles-watch,
  .catalog-link-web .catalog-articles-watch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .watch-web-container .catalog-articles-watch,
  .catalog-link-web .catalog-articles-watch {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .watch-web-container .catalog-articles-watch,
  .catalog-link-web .catalog-articles-watch {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Watch-web specific styles */
.watch-web-container .catalog-category.container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.watch-web-container .content-scrollable .catalog-form {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

.watch-web-container .content-scrollable {
  margin-top: 0 !important;
  padding-top: 0 !important;
  height: calc(100vh - 130px) !important;
  overflow-y: auto !important;
  scrollbar-width: none;
}

.watch-web-container .content-scrollable::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* catalogLink/showCatalog (con cliente ya seleccionado): el header ya es
   position: sticky (regla global .catalog-sticky-header). Acá solo evitamos que
   .content-scrollable herede el margin-top/height fijo pensado para watch-web
   (calc(100vh - 130px) con scroll interno propio); en esta vista el scroll lo
   maneja la página normal y el header sticky se pega solo, sin necesidad de
   calcular su altura por JS. */
@media (max-width: 768px) {
  .catalog-link-web .content-scrollable {
    margin-top: 0;
    height: auto;
    overflow-y: visible;
  }
}

.watch-web-container .catalog-form,
.watch-web-container .catalog-category,
.catalog-link-web .catalog-form,
.catalog-link-web .catalog-category {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===========================================
   CATALOG-LINK-WEB: SEARCH & LINESNAVBAR STYLES
   Mismo esquema visual que el header (negro/blanco)
   =========================================== */

/* Search container: borde inferior limpio, sin sombra */
.catalog-link-web .search-container,
.watch-web-container .search-container {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: none;
    padding: 8px 16px;
}

/* Input de búsqueda */
.catalog-link-web .search-container .form-control,
.watch-web-container .search-container .form-control {
    border-color: #ccc;
    font-size: 14px;
}

/* Botones del search (toggle y excel): estilo oscuro en lugar del teal de Bootstrap */
.catalog-link-web .search-container .btn-outline-info,
.watch-web-container .search-container .btn-outline-info {
    color: #212529;
    border-color: #ccc;
    background-color: #fff;
}
.catalog-link-web .search-container .btn-outline-info:hover,
.watch-web-container .search-container .btn-outline-info:hover {
    color: #000;
    background-color: #f0f0f0;
    border-color: #999;
}

/* Panel lateral del linesnavbar: fondo blanco, borde derecho */
.catalog-link-web #linesnavbar,
.watch-web-container #linesnavbar {
    background-color: #fff;
    border-right: 1px solid #e0e0e0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}

/* Botón cerrar del panel */
.catalog-link-web #linesnavbar .banner-helper-close,
.watch-web-container #linesnavbar .banner-helper-close {
    color: #212529;
    border-color: #ccc;
    background-color: #fff;
}
.catalog-link-web #linesnavbar .banner-helper-close:hover,
.watch-web-container #linesnavbar .banner-helper-close:hover {
    background-color: #f0f0f0;
    color: #000;
}

/* Links de categorías: uppercase, negrita, sin fondo gris */
.catalog-link-web #linesnavbar .leftnav-a,
.watch-web-container #linesnavbar .leftnav-a {
    background-color: transparent;
    color: #212529;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
}
.catalog-link-web #linesnavbar .leftnav-a:hover,
.watch-web-container #linesnavbar .leftnav-a:hover {
    background-color: transparent;
    color: #000;
    border-bottom-color: #000;
    text-decoration: none;
}

/* Dropdown submenú anidado */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
}
.dropdown-submenu:hover .dropdown-menu {
    display: block;
}
.dropdown-submenu > a::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: 0.1em;
    content: "›";
    border: none;
}

/* ── Bloque derecho del header (cliente + carrito) ──────────────────────── */
.catalog-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.catalog-header-client {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    color: #fff;
    max-width: 240px;
}
.catalog-header-client__name {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.catalog-header-client__change {
    font-size: 0.72rem;
    color: var(--brand-yellow, #f7da72);
    text-decoration: underline;
    cursor: pointer;
}
.catalog-header-client__change:hover { color: #fff; }

/* ── Modal "Cambiar cliente" (header violeta) ───────────────────────────── */
.change-client-modal__header {
    background: var(--brand-purple, #780aab);
    color: #fff;
    border-bottom: none;
}
.change-client-modal__header .modal-title { font-weight: 700; }
.change-client-modal__header .close {
    color: #fff;
    opacity: 0.9;
    text-shadow: none;
}
.change-client-modal__header .close:hover { color: var(--brand-yellow, #f7da72); opacity: 1; }

/* ── Carrito en el header (botón + badge amarillo) ──────────────────────── */
.catalog-cart-btn {
    position: relative;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.catalog-cart-btn:hover { color: var(--brand-yellow, #f7da72); }

.catalog-cart-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #f1c40f;
    color: #3a2d00;
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
    /* En mobile el header se apila; el bloque cliente+carrito va a lo ancho. */
    .catalog-header-right {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
    .catalog-header-client { align-items: flex-start; max-width: none; }
    .catalog-header-client__name { max-width: 60vw; }
}

.cart-badge--bump { animation: cartBadgeBump 0.3s ease; }
@keyframes cartBadgeBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ── Slider lateral del pre-pedido ──────────────────────────────────────── */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 1090;
}
.cart-overlay--show { opacity: 1; visibility: visible; }

.cart-slider {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    max-width: 92vw;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 1091;
    display: flex;
    flex-direction: column;
}
.cart-slider--open { transform: translateX(0); }

/* En mobile el slider ocupa todo el ancho de la pantalla. Además se elimina el
   overflow horizontal de la página: si el documento es más ancho que el viewport,
   los elementos `position: fixed` se anclan al layout viewport (el ancho scrolleable)
   y el `right: 0` del slider queda fuera de pantalla → se ve cortado. */
@media (max-width: 768px) {
    /* overflow-x: hidden en html/body rompe position: sticky de los descendientes
       (el navegador convierte implícitamente el otro eje en scroll container).
       overflow-x: clip logra el mismo recorte horizontal sin ese efecto. */
    html, body { overflow-x: clip; }
    .cart-slider {
        width: 100vw;
        max-width: 100vw;
    }
}

.cart-slider__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--brand-purple, #780aab);
    color: #fff;
    flex-shrink: 0;
}
.cart-slider__heading { display: flex; flex-direction: column; min-width: 0; }
.cart-slider__title { font-size: 1.1rem; font-weight: 700; }
.cart-slider__subtitle {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-slider__close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}
.cart-slider__close:hover { color: var(--brand-yellow, #f7da72); }
.cart-slider__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

/* ── Filas tipo "línea de carrito" (orderDetailCard) ────────────────────── */
.cart-lines { display: flex; flex-direction: column; gap: 10px; }
.cart-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
}
.cart-line__img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 6px;
    background: #f6f6f6;
    flex-shrink: 0;
}
.cart-line__info { flex: 1; min-width: 0; }
.cart-line__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.2;
    margin-bottom: 3px;
}
.cart-line__meta {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: #888;
}
.cart-line__qty { color: #555; }
.cart-line__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.cart-line__subtotal {
    font-weight: 800;
    color: var(--brand-purple, #780aab);
    white-space: nowrap;
    font-size: 0.92rem;
}
.cart-line__remove {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: #d9534f;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}
.cart-line__remove:hover,
.cart-line__remove:focus { background: transparent; color: #c9302c; }
.cart-line__remove:disabled { opacity: 0.6; cursor: default; }
.cart-empty {
    text-align: center;
    color: #999;
    padding: 40px 16px;
}

/* ── Selector de entrega en el prepedido ("¿Cómo lo recibís?") ──────────── */
.pickup-picker__title {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
    font-weight: 600;
    color: #888;
    margin-bottom: 8px;
}
.pickup-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 480px) {
    .pickup-picker { grid-template-columns: 1fr; }
}
.pickup-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 2px solid #e3e3e8;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.pickup-card:hover { border-color: #c9b6d6; }
.pickup-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pickup-card--active {
    border-color: var(--brand-purple, #780aab);
    background: #f7f0fb;
    box-shadow: 0 0 0 1px var(--brand-purple, #780aab) inset;
}
.pickup-card__icon {
    font-size: 1.4rem;
    color: var(--brand-purple, #780aab);
}
.pickup-card__name {
    font-weight: 700;
    color: #333;
}
.pickup-card__desc {
    font-size: .82rem;
    color: #777;
    line-height: 1.25;
}
.pickup-card__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #2fb457;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* El modal de mensajes del sistema (#modalMsgBox, ej. "¡Copiado!") debe quedar por
   encima del slider del carrito (.cart-slider z-index 1091), que si no lo tapa. */
#modalMsgBox { z-index: 1100; }
body.modal-open .cart-slider,
body.modal-open .cart-overlay { z-index: 1080; }

/* Botón "Confirmar" del prepedido: mismo tamaño que los demás, color de marca. */
.btn-confirmar-mdc {
    background-color: var(--brand-purple, #780aab);
    border-color: var(--brand-purple, #780aab);
    color: #fff;
}
.btn-confirmar-mdc:hover,
.btn-confirmar-mdc:focus {
    background-color: #5f0888;
    border-color: #5f0888;
    color: #fff;
}
.btn-confirmar-mdc:disabled {
    background-color: var(--brand-purple, #780aab);
    border-color: var(--brand-purple, #780aab);
    opacity: .65;
}