/* =========================================
   LOGIN - Diseño adaptado al mockup de Figma (versión compacta)
   Paleta:
     - Fondo:        #F2F2F2
     - Marrón:       #69310F
     - Dorado solid: #A58E0E
     - Dorado soft:  rgba(165, 142, 14, 0.36)
     - Texto:        #000000
   Tipografía: Helvetica Neue
   ========================================= */

/*body {
    padding-top: 15px;
    padding-bottom: 15px;
}
*/
html body:has(input[type="password"]),
html body:has(input[placeholder*="correo@ejemplo.com"]) {
    background: #F2F2F2 !important;
    background-image: none !important;
    min-height: 100vh !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: #000000;
}

.points-tabs>li>a .fa {}

i.fa.fa-bullseye,
i.fa.fa-history {
    color: #a58e0e !important;
}


/* ---------- Card principal ---------- */
.login-card {
    background: #FFFFFF;
    border-radius: 22px !important;
    width: 420px;
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    margin: 0 auto !important;
}

/* ---------- Header marrón con logo ---------- */
.login-card>.text-center:first-child {
    background-color: #69310F !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 22px 30px !important;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.login-card>.text-center:first-child img {
    max-height: 50px;
    max-width: 80%;
    display: block;
}

.login-card>.text-center:first-child .fa-gift {
    font-size: 40px !important;
    color: #FFFFFF !important;
}

/* ---------- Cuerpo del formulario ---------- */
.login-card>div:nth-child(2) {
    padding: 22px 32px 26px 32px !important;
}

/* Título "Iniciar Sesión" */
.login-card h3 {
    text-align: center;
    margin: 0 0 4px 0 !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Subtítulo */
.login-card .text-muted {
    text-align: center;
    margin: 0 0 18px 0 !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: #000000 !important;
}

/* Alert info */
.login-card .alert-info {
    background-color: rgba(165, 142, 14, 0.15);
    border: 1px solid rgba(165, 142, 14, 0.36);
    color: #69310F;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 16px;
}

.login-card .alert-info .fa {}

/* ---------- Labels ---------- */
.login-card .form-group {
    margin-bottom: 14px !important;
}

.login-card .form-group>label {
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    margin-bottom: 6px;
}

/* ---------- Inputs con icono cuadrado dorado a la izquierda ---------- */
.login-card .input-group {
    width: 100%;
    display: flex;
    align-items: stretch;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(165, 142, 14, 0.36);
    height: 44px;
}

.login-card .input-group-addon {
    background: #A58E0E !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0 !important;
}

.login-card .input-group .form-control {
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: #000000;
    border-radius: 0 !important;
}

.login-card .input-group .form-control:focus {}

.login-card .input-group .form-control::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 300;
}

/* Eliminar el fondo azul de Chrome autofill */
.login-card .input-group .form-control:-webkit-autofill,
.login-card .input-group .form-control:-webkit-autofill:hover,
.login-card .input-group .form-control:-webkit-autofill:focus,
.login-card .input-group .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(245, 237, 200, 1) inset !important;
    box-shadow: 0 0 0 1000px rgba(245, 237, 200, 1) inset !important;
    -webkit-text-fill-color: #000000 !important;
    caret-color: #000000;
    transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Checkbox "Recordarme" ---------- */
.login-card .checkbox {
    margin: 2px 0 16px 0 !important;
    padding: 0;
}

.login-card .checkbox label {
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    padding-left: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.login-card .checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #000000;
    border-radius: 3px;
    margin: 0 8px 0 0 !important;
    background: #FFFFFF;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}

.login-card .checkbox input[type="checkbox"]:checked {
    background: #69310F;
    border-color: #69310F;
}

.login-card .checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---------- Boton principal "Ingresar" (marron) ---------- */
.login-card .btn-primary {
    background-color: #a58e0e !important;
}

.btn-primary {
    background-color: #a58e0e !important;
}

.login-card .btn-primary:hover,
.login-card .btn-primary:focus,
.login-card .btn-primary:active {}

.login-card .btn-primary .fa {
    font-size: 16px;
}

/* ---------- Separador "o" ---------- */
.login-card form+.text-center {
    position: relative;
    margin: 14px 0 14px 0 !important;
    text-align: center;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card form+.text-center::before,
.login-card form+.text-center::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.5);
}

.login-card form+.text-center span {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.5) !important;
    padding: 0 12px !important;
    background: #FFFFFF;
    position: static !important;
    z-index: auto !important;
}

.login-card form+.text-center hr {
    display: none;
}

/* ---------- Boton OTP (dorado claro, texto marron) ---------- */
.login-card .btn-default {
    background: rgba(165, 142, 14, 0.35) !important;
    border: none !important;
    border-radius: 5px !important;
    height: 44px;
    width: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #69310F !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.login-card .btn-default:hover,
.login-card .btn-default:focus,
.login-card .btn-default:active {
    background: rgba(165, 142, 14, 0.55) !important;
    color: #69310F !important;
    text-decoration: none !important;
    outline: none !important;
}

.login-card .btn-default .fa {
    font-size: 15px;
}

/* ---------- Linea divisoria ---------- */
.login-card hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    margin: 18px 0 14px 0 !important;
}

/* ---------- Enlaces inferiores ---------- */
.login-card>div:nth-child(2)>.text-center:last-child {
    text-align: center;
}

.login-card>div:nth-child(2)>.text-center:last-child p {
    margin: 0 0 8px 0 !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.login-card>div:nth-child(2)>.text-center:last-child p:last-child {
    margin-bottom: 0 !important;
}

.login-card>div:nth-child(2)>.text-center:last-child a {
    color: #000000;
    text-decoration: none;
    font-weight: 300;
}

.login-card>div:nth-child(2)>.text-center:last-child a:hover {}

.login-card>div:nth-child(2)>.text-center:last-child a strong {
    font-weight: 700;
}

/* ---------- Modal de contenido ---------- */
#contentModal .modal-header {}

#contentModal .modal-footer .btn-primary {
    background-color: #69310F;
    border-color: #69310F;
}

#contentModal .modal-footer .btn-primary:hover {}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    body {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .login-card {
        width: calc(100% - 24px);
        margin: 0 12px !important;
    }

    .login-card>div:nth-child(2) {
        padding: 20px 20px 22px 20px !important;
    }

    .login-card>.text-center:first-child {
        padding: 20px !important;
        height: 90px;
    }

    .login-card>.text-center:first-child img {
        max-height: 42px;
    }
}

.navbar-top {
    background: #A58E0E;
}

.navbar-tshop {
    background: #69310F;
}

.cartMenu i.fa-star {
    color: #ffffff !important;
}

.cartMenu i.fa-shopping-cart {
    color: #ffffff !important;
}

.badge {
    background-color: #a58e0e !important;
}

.btn-carro {
    background-color: #69310F;
    color: #FFFFFF;
}

.glyphicon.glyphicon-shopping-cart {
    color: #A58E0E;
}

.btn-carro:hover {
    background-color: #A58E0E !important;
    color: white;
}

.nav>li.active,
.nav>li>a:hover,
.nav>li>a:focus,
.nav>li:hover>a {
    background: #A58E0E;
}

/* =========================================================================
   FOOTER - Diseño adaptado al mockup de Figma
   ========================================================================= */
/* =========================================================================
   FOOTER - Diseño adaptado al mockup de Figma
   ========================================================================= */

footer {
    background: #69310F;
}

footer .footer {}

footer .footer .container {
    padding-left: 30px;
    padding-right: 30px;
}

/* Títulos de columna (SOPORTE, MI CUENTA, INFORMACIÓN) */
footer .footer h3 {}

/* Línea dorada larga debajo de cada título - ancho fijo de 140px */
footer .footer h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 140px;
    height: 2px;
    background: #A58E0E;
    display: block;
}

/* Listas dentro del footer */
footer .footer ul {}

footer .footer ul li {
    margin: 0 0 10px 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 20px;
    color: #FFFFFF;
    background: transparent !important;
    border: none !important;
}

footer .footer ul li a,
footer .footer ul li span,
footer .footer ul li p {
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 20px;
    display: inline;
    margin: 0;
    padding: 0;
}

footer .footer ul li a:hover {
    opacity: 0.8;
    text-decoration: none !important;
    color: #FFFFFF !important;
}

/* ---------- Columna SOPORTE ---------- */
footer .footer .supportLi {
    margin: 0;
}

/* "Ayuda" o "¿Necesitás ayuda? Contactanos" */
footer .footer .supportLi p {
    color: #FFFFFF !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 13px !important;
    line-height: 20px;
    margin: 0 0 14px 0;
    display: block;
}

footer .footer .supportLi p strong {
    font-weight: 700;
}

/* h4 con teléfono y correo */
footer .footer .supportLi h4 {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 22px;
    color: #FFFFFF;
}

footer .footer .supportLi h4 a {}

footer .footer .supportLi h4 a:hover {}

footer .footer .supportLi h4 strong {
    font-weight: 700;
    font-size: 13px;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Íconos WhatsApp y Email - SIN crear círculo adicional (el ícono ya viene así) */
footer .footer .supportLi h4 .fa {
    color: #FFFFFF !important;
    font-size: 14px;
    background: transparent;
    border: none;
    border-radius: 0;
    width: auto;
    height: auto;
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* ---------- Footer bottom (copyright) ---------- */
footer .footer-bottom {}

footer .footer-bottom .container {
    padding-left: 30px;
    padding-right: 30px;
}

footer .footer-bottom p {
    margin: 0;
    color: #FFFFFF;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 13px !important;
    text-align: center;
    letter-spacing: 0.3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    footer .footer {
        padding: 30px 0 20px 0;
    }

    footer .footer .col-lg-3,
    footer .footer .col-md-3,
    footer .footer .col-sm-4,
    footer .footer .col-xs-6 {
        margin-bottom: 24px;
    }

    footer .footer h3 {
        font-size: 15px !important;
    }

    footer .footer h3::after {
        width: 100px;
    }
}

/* =========================================================================
   MIS PUNTOS - Diseño adaptado al mockup de Figma
   Paleta:
     - Marrón:       #69310F
     - Dorado:       #A58E0E
     - Gris card:    #A0A0A0
     - Borde gris:   #E0E0E0
     - Texto:        #000000
   ========================================================================= */

/* =========================================================================
   FIX: Espaciado del contenedor principal
   El navbar es fixed-top, hay que compensar su altura + la barra superior
   del teléfono para que el contenido NO quede tapado ni pegado arriba.
   ========================================================================= */
.container.page-content-offset {
    padding-top: 140px;
    /* antes: 30px - ahora compensa navbar fixed + barra teléfono */
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

/* Asegurar que el main no tenga margen negativo o solapamiento */
main {
    padding-top: 0;
    margin-top: 0;
}

/* =========================================================================
   BREADCRUMB
   ========================================================================= */
.container.page-content-offset .breadcrumb {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    padding: 16px 20px !important;
    margin: 0 0 30px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    list-style: none;
}

.container.page-content-offset .breadcrumb li {
    display: inline-block;
    color: #000000;
}

.container.page-content-offset .breadcrumb li+li::before {
    content: "/";
    padding: 0 8px;
    color: #000000;
}

.container.page-content-offset .breadcrumb li a {
    color: #000000 !important;
    text-decoration: none;
    font-weight: 300;
}

.container.page-content-offset .breadcrumb li a:hover {
    color: #69310F !important;
    text-decoration: underline;
}

.container.page-content-offset .breadcrumb li.active {
    color: #000000;
    font-weight: 300;
}

/* =========================================================================
   TÍTULO H2 "MIS PUNTOS"
   ========================================================================= */
.container.page-content-offset>h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 34px;
    color: #000000 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 28px 0 !important;
    display: flex;
    align-items: center;
    gap: 14px;
}

.container.page-content-offset>h2 .fa {
    color: #A58E0E !important;
    font-size: 28px;
}

/* =========================================================================
   STATS CARDS (Saldo actual / Total ganados / Total canjeados)
   FIX: Forzar los colores correctos con mayor especificidad
   ========================================================================= */
.stats-row {
    display: flex;
    gap: 24px;
    margin: 0 0 30px 0;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 250px;
    border-radius: 8px;
    padding: 28px 24px;
    text-align: center;
    color: #FFFFFF !important;
    background: #69310F !important;
    background-image: none !important;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none !important;
}

/* Saldo actual - DORADO */
.stat-card.bg-primary-grad,
.container.page-content-offset .stat-card.bg-primary-grad {
    background: #A58E0E !important;
    background-image: none !important;
    background-color: #A58E0E !important;
}

/* Total ganados - MARRÓN */
.stat-card.bg-success-grad,
.container.page-content-offset .stat-card.bg-success-grad {
    background: #69310F !important;
    background-image: none !important;
    background-color: #69310F !important;
}

/* Total canjeados - GRIS */
.stat-card.bg-info-grad,
.container.page-content-offset .stat-card.bg-info-grad {
    background: #A0A0A0 !important;
    background-image: none !important;
    background-color: #A0A0A0 !important;
}

/* Ícono arriba de cada card */
.stat-card>.fa,
.stat-card i.fa {
    font-size: 32px;
    color: #FFFFFF !important;
    margin-bottom: 14px;
    opacity: 0.95;
}

/* Label de cada card */
.stat-card .stat-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 20px;
    color: #FFFFFF !important;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

/* Valor grande de cada card */
.stat-card .stat-value {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 36px !important;
    line-height: 42px;
    color: #FFFFFF !important;
    letter-spacing: 0.5px;
}

/* La card "Saldo actual" no tiene ícono arriba, solo label y valor */
.stat-card.bg-primary-grad>.fa,
.stat-card.bg-primary-grad i.fa-wallet {
    display: none !important;
}

/* =========================================================================
   CARD DE MOVIMIENTOS (tabla con tabs)
   ========================================================================= */
.card-custom {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 30px 0;
}

/* Header con tabs */
.card-header-custom {
    background: #F5F5F5 !important;
    padding: 0 !important;
    border-bottom: 1px solid #E0E0E0 !important;
}

/* Tabs Todos / Ganados / Canjeados */
.points-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    background: #F5F5F5;
}

.points-tabs>li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.points-tabs>li>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 26px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    color: #000000;
    text-decoration: none !important;
    background: transparent;
    border: none;
    position: relative;
    transition: color 0.15s ease;
}

.points-tabs>li>a:hover {
    color: #69310F;
    background: transparent;
}

/* Tab activo - subrayado dorado */
.points-tabs>li>a.active {
    color: #000000 !important;
    font-weight: 700 !important;
    background: transparent !important;
}

.points-tabs>li>a.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 26px;
    right: 26px;
    height: 2px;
    background: #A58E0E;
}

/* Íconos de cada tab */
.points-tabs>li>a .fa {
    font-size: 16px;
}

.points-tabs>li>a .fa.text-success-custom,
.points-tabs>li>a .fa-plus-circle {
    color: #A58E0E !important;
}

.points-tabs>li>a .fa.text-danger-custom,
.points-tabs>li>a .fa-minus-circle {
    color: #A58E0E !important;
}

/* =========================================================================
   CARD BODY - Contenido (tabla o estado vacío)
   ========================================================================= */
.card-body-custom {
    padding: 0 !important;
    background: #FFFFFF;
}

/* Tabla de movimientos */
.card-body-custom table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.card-body-custom table thead th {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #000000 !important;
    padding: 18px 24px;
    text-align: left;
    background: #FFFFFF;
    border-bottom: 1px solid #E0E0E0;
    text-transform: none;
    letter-spacing: 0;
}

.card-body-custom table thead th.text-right,
.card-body-custom table thead th:nth-last-child(-n+2) {
    text-align: right;
}

.card-body-custom table tbody td {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    color: #000000 !important;
    padding: 18px 24px;
    border-bottom: 1px solid #E0E0E0;
    line-height: 20px;
    vertical-align: middle;
}

.card-body-custom table tbody tr:last-child td {
    border-bottom: none;
}

.card-body-custom table tbody tr:hover {
    background: #FAFAFA;
}

/* Fecha (con hora pequeña debajo) */
.card-body-custom table tbody td.fecha-cell,
.card-body-custom table tbody td:first-child {
    color: #000000;
    line-height: 18px;
}

.card-body-custom table tbody td .hora,
.card-body-custom table tbody td small {
    display: block;
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    margin-top: 2px;
}

/* Descripción */
.card-body-custom table tbody td.descripcion-cell,
.card-body-custom table tbody td:nth-child(2) {
    font-weight: 700 !important;
    color: #000000;
}

/* Puntos (valor con signo, en dorado) */
.card-body-custom table tbody td.puntos-cell,
.card-body-custom table tbody td:nth-last-child(2) {
    text-align: right;
    color: #A58E0E !important;
    font-weight: 700 !important;
}

/* Saldo (valor en gris) */
.card-body-custom table tbody td.saldo-cell,
.card-body-custom table tbody td:last-child {
    text-align: right;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
}

/* =========================================================================
   ESTADO VACÍO "No hay movimientos"
   ========================================================================= */
.card-body-custom .text-center {
    padding: 80px 20px !important;
    background: #FFFFFF;
}

.icon-circle.icon-lg {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #F0F0F0 !important;
    color: #CCCCCC !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
}

.icon-circle.icon-lg .fa {
    color: #CCCCCC !important;
    font-size: 40px;
}

.card-body-custom .text-center h4 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #000000;
    margin: 0 0 12px 0;
}

.card-body-custom .text-center p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    color: rgba(0, 0, 0, 0.6) !important;
    margin: 0;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991px) {
    .container.page-content-offset {
        padding-top: 130px;
    }

    .stats-row {
        gap: 16px;
    }

    .stat-card {
        min-width: 200px;
        padding: 22px 18px;
    }

    .stat-card .stat-value {
        font-size: 30px !important;
        line-height: 36px;
    }
}

@media (max-width: 767px) {
    .container.page-content-offset {
        padding-top: 120px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .stats-row {
        flex-direction: column;
        gap: 14px;
    }

    .stat-card {
        min-width: 100%;
        padding: 22px 18px;
    }

    .points-tabs>li>a {
        padding: 14px 16px;
        font-size: 14px !important;
    }

    .points-tabs>li>a.active::after {
        left: 16px;
        right: 16px;
    }

    .card-body-custom table thead th,
    .card-body-custom table tbody td {
        padding: 12px 14px;
        font-size: 13px !important;
    }

    .container.page-content-offset>h2 {
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    .points-tabs {
        flex-wrap: wrap;
    }

    .points-tabs>li {
        flex: 1;
        text-align: center;
    }

    .points-tabs>li>a {
        justify-content: center;
        padding: 12px 8px;
    }
}

.fa.fa-user {
    color: #ffffff !important;
}


/* =========================================================================
   MI CARRITO - Diseño adaptado al mockup de Figma "Mis Canjes"
   Paleta:
     - Marrón:       #69310F
     - Dorado:       #A58E0E
     - Gris card:    #A0A0A0
     - Borde gris:   #E0E0E0
     - Gris fondo:   #F5F5F5
     - Texto:        #000000
   ========================================================================= */

/* =========================================================================
   FIX espaciado superior (mismo problema que Mis Puntos)
   ========================================================================= */
.container.page-content-offset {
    padding-top: 140px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
}

/* =========================================================================
   BREADCRUMB
   ========================================================================= */
.container.page-content-offset .breadcrumb {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    padding: 16px 20px !important;
    margin: 0 0 30px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    list-style: none;
}

.container.page-content-offset .breadcrumb li {
    display: inline-block;
    color: #000000;
}

.container.page-content-offset .breadcrumb li+li::before {
    content: "/";
    padding: 0 8px;
    color: #000000;
}

.container.page-content-offset .breadcrumb li a {
    color: #000000 !important;
    text-decoration: none;
    font-weight: 300;
}

.container.page-content-offset .breadcrumb li a:hover {
    color: #69310F !important;
    text-decoration: underline;
}

.container.page-content-offset .breadcrumb li.active {
    color: #000000;
    font-weight: 300;
}

/* =========================================================================
   TÍTULO H2 "MI CARRITO"
   ========================================================================= */
.container.page-content-offset h2.page-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 34px;
    color: #000000 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 28px 0 !important;
    display: flex;
    align-items: center;
    gap: 14px;
}

.container.page-content-offset h2.page-title .fa {
    color: #A58E0E !important;
    font-size: 28px;
}

/* =========================================================================
   CARD GENERAL (productos y resumen)
   ========================================================================= */
.card-custom {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 20px 0;
}

/* =========================================================================
   HEADER DE PRODUCTOS (gris claro) - "Productos (1)"
   ========================================================================= */
.card-header-custom {
    background: #F5F5F5 !important;
    padding: 18px 24px !important;
    border-bottom: 1px solid #E0E0E0 !important;
    margin: 0 !important;
}

.card-header-custom h4 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    color: #000000 !important;
    margin: 0 !important;
    line-height: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header-custom h4 .fa {
    color: #A58E0E !important;
    font-size: 18px;
}

/* =========================================================================
   HEADER DE RESUMEN (DORADO)
   ========================================================================= */
.card-header-custom.bg-primary-custom {
    background: #A58E0E !important;
    background-color: #A58E0E !important;
    border-bottom: none !important;
}

.card-header-custom.bg-primary-custom h4,
.card-header-custom.bg-primary-custom h4 .fa {
    color: #FFFFFF !important;
}

/* =========================================================================
   FIX CRÍTICO: TABLA DEL CARRITO
   Resetear todos los estilos heredados de Bootstrap/template
   que están metiendo padding/height enorme en el thead
   ========================================================================= */
.card-body-custom {
    padding: 0 !important;
    background: #FFFFFF;
}

/* Reset total de la tabla */
.cart-table-improved,
.cart-table-improved.table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    border: none !important;
}

/* THEAD - encabezados compactos, fondo gris claro, sin alturas raras */
.cart-table-improved thead,
.cart-table-improved.table thead {
    background: #F5F5F5 !important;
    display: table-header-group !important;
    height: auto !important;
}

.cart-table-improved thead tr,
.cart-table-improved.table thead tr {
    background: #F5F5F5 !important;
    height: auto !important;
    border: none !important;
}

.cart-table-improved thead th,
.cart-table-improved.table thead>tr>th {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #000000 !important;
    padding: 14px 20px !important;
    background: #F5F5F5 !important;
    background-color: #F5F5F5 !important;
    border: none !important;
    border-bottom: 1px solid #E0E0E0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
    line-height: 20px !important;
    height: auto !important;
    min-height: 0 !important;
}

.cart-table-improved thead th:first-child {
    text-align: left !important;
}

.cart-table-improved thead th.text-center {
    text-align: center !important;
}

.cart-table-improved thead th.text-right {
    text-align: right !important;
}

/* TBODY - filas de productos */
.cart-table-improved tbody,
.cart-table-improved.table tbody {
    background: #FFFFFF !important;
}

.cart-table-improved tbody tr,
.cart-table-improved.table tbody>tr {
    background: #FFFFFF !important;
    border: none !important;
}

.cart-table-improved tbody td,
.cart-table-improved.table tbody>tr>td {
    padding: 20px !important;
    border: none !important;
    border-bottom: 1px solid #E0E0E0 !important;
    border-top: none !important;
    vertical-align: middle !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    height: auto !important;
}

.cart-table-improved tbody tr:last-child td {
    border-bottom: none !important;
}

/* =========================================================================
   PRODUCTO (imagen + info)
   ========================================================================= */
.cart-product-improved {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.cart-product-image-improved {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    background: #F0F0F0 !important;
    border: 1px solid #E0E0E0 !important;
    flex-shrink: 0 !important;
    max-width: 80px !important;
    max-height: 80px !important;
}

.cart-product-info-improved {
    flex: 1;
    min-width: 0;
}

.cart-product-info-improved h5 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #000000 !important;
    margin: 0 0 6px 0 !important;
    line-height: 20px !important;
}

.cart-product-info-improved p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 13px !important;
    color: rgba(0, 0, 0, 0.6) !important;
    margin: 0 0 4px 0 !important;
    line-height: 18px !important;
}

.cart-product-info-improved p .fa {
    margin-right: 4px;
    color: rgba(0, 0, 0, 0.5);
}

.cart-product-info-improved p.unit-price {
    color: #A58E0E !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    margin-top: 4px !important;
}

.cart-product-info-improved p.unit-price .fa {
    color: #A58E0E !important;
}

/* =========================================================================
   CONTROL DE CANTIDAD (- 1 +)
   ========================================================================= */
.quantity-control-improved {
    display: inline-flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 24px !important;
    padding: 4px !important;
    gap: 0 !important;
}

.qty-btn-improved {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #000000 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease;
    padding: 0 !important;
    line-height: 1 !important;
}

.qty-btn-improved:hover:not(:disabled) {
    background: #F5F5F5 !important;
}

.qty-btn-improved:disabled {
    color: #CCCCCC !important;
    cursor: not-allowed;
}

.qty-input-improved {
    width: 36px !important;
    height: 32px !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #000000 !important;
    outline: none !important;
    padding: 0 !important;
}

/* =========================================================================
   SUBTOTAL (★ 100 en dorado)
   ========================================================================= */
.cart-subtotal-improved {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #A58E0E !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap;
}

.cart-subtotal-improved .fa {
    color: #A58E0E !important;
}

.order-date i {
    color: #a58e0e;
    margin-right: 5px;
}

.order-points-total {
    font-weight: 600;
    color: #a58e0e;
}

/* =========================================================================
   BOTÓN ELIMINAR (papelera)
   ========================================================================= */
.btn-remove-improved {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    color: #999999 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease;
    padding: 0 !important;
}

.btn-remove-improved:hover {
    background: #FEE !important;
    color: #C0392B !important;
}

.btn-remove-improved .fa {
    font-size: 16px !important;
}

/* =========================================================================
   RESUMEN (panel derecho)
   ========================================================================= */
.cart-summary-improved {
    padding: 0;
    background: #FFFFFF;
}

.summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #E0E0E0 !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    color: #000000 !important;
    line-height: 20px !important;
}

.summary-row:last-child {
    border-bottom: none !important;
}

.summary-row>span:first-child {
    color: #000000 !important;
    font-weight: 400 !important;
}

.summary-row>span:last-child {
    color: #000000 !important;
    font-weight: 400 !important;
    text-align: right !important;
}

/* Fila TOTAL destacada en dorado */
.summary-row.summary-total>span:first-child {
    font-weight: 700 !important;
    color: #A58E0E !important;
    font-size: 16px !important;
}

.order-entry-branch {
    margin: 0 0 4px;
    font-size: 13px;
    color: #a58e0e;
}

.summary-row.summary-total>span:last-child {
    font-weight: 700 !important;
    color: #A58E0E !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.summary-row.summary-total>span:last-child .fa {
    color: #A58E0E !important;
}

/* Estrella de "Tu saldo" en dorado */
#userBalanceDisplay {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #000000 !important;
    font-weight: 400 !important;
}

#userBalanceDisplay .fa {
    color: #A58E0E !important;
}

#userBalanceDisplay.balance-low {
    color: #C0392B !important;
}

#userBalanceDisplay.balance-low .fa {
    color: #C0392B !important;
}

#userBalanceDisplay.balance-ok {
    color: #000000 !important;
}

/* =========================================================================
   ALERTA DE PUNTOS INSUFICIENTES
   ========================================================================= */
.alert.alert-warning {
    background: #FFF8E1 !important;
    border: 1px solid #FFE082 !important;
    border-radius: 6px !important;
    color: #6D4C00 !important;
    padding: 14px 18px !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-bottom: 15px !important;
}

.alert.alert-warning .fa {
    color: #B8860B !important;
    margin-right: 8px;
}

/* =========================================================================
   BOTÓN "CANJEAR X PUNTOS" (marrón cuando está activo)
   ========================================================================= */
.btn-redeem-improved {
    display: block !important;
    width: 100% !important;
    padding: 16px 24px !important;
    background: #69310F !important;
    background-color: #69310F !important;
    border: none !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    text-align: center !important;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none !important;
    letter-spacing: 0.3px !important;
}

.btn-redeem-improved:hover:not(:disabled) {
    background: #5A2A0D !important;
    background-color: #5A2A0D !important;
    color: #FFFFFF !important;
}

.btn-redeem-improved:disabled {
    background: #A0A0A0 !important;
    background-color: #A0A0A0 !important;
    color: #FFFFFF !important;
    cursor: not-allowed;
    opacity: 1;
}

.btn-redeem-improved .fa {
    margin-right: 8px;
    color: #FFFFFF !important;
}

/* =========================================================================
   BOTÓN "SEGUIR COMPRANDO" (gris)
   ========================================================================= */
.btn.btn-default.btn-block {
    display: block !important;
    width: 100% !important;
    padding: 16px 24px !important;
    background: #A0A0A0 !important;
    background-color: rgba(165, 142, 14, 0.35) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #69310F !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 20px !important;
    text-align: center !important;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none !important;
    letter-spacing: 0.3px !important;
    margin-top: 12px !important;
}

.btn.btn-default.btn-block:hover {
    background: #909090 !important;
    background-color: #909090 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.btn.btn-default.btn-block .fa {
    margin-right: 8px;
    color: #69310F !important;
}

span.add2cart {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;
}

.voucher-pending {
    background: #a58e0e;
    color: #ffffff;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991px) {
    .container.page-content-offset {
        padding-top: 130px;
    }

    .cart-product-image-improved {
        width: 64px !important;
        height: 64px !important;
    }
}

@media (max-width: 767px) {
    .container.page-content-offset {
        padding-top: 120px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .cart-table-improved thead th,
    .cart-table-improved tbody td {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .cart-product-improved {
        gap: 10px !important;
    }

    .cart-product-image-improved {
        width: 56px !important;
        height: 56px !important;
    }

    .cart-product-info-improved h5 {
        font-size: 14px !important;
    }

    .container.page-content-offset h2.page-title {
        font-size: 22px !important;
    }

    .summary-row {
        padding: 14px 18px !important;
        font-size: 14px !important;
    }
}

/* Cierra el @media (max-width: 767px) anterior */

/* =========================================================================
   CARRUSEL MOBILE 1:1 — UNA IMAGEN POR VEZ
   ========================================================================= */

@media screen and (max-width: 768px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    html body .banner.banner-boxes,
    html body .banner.banner-boxes .slider-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .banner.banner-boxes .swiper-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    html body .banner.banner-boxes .swiper-container::-webkit-scrollbar {
        display: none;
    }

    html body .banner.banner-boxes .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        height: auto !important;
        transform: none !important;
        transition: none !important;
    }

    html body .banner.banner-boxes .swiper-slide {
        display: contents !important;
    }

    html body .banner.banner-boxes .box-slider-content {
        position: relative !important;
        float: none !important;

        flex: 0 0 100vw !important;
        width: 100vw !important;
        max-width: 100vw !important;

        height: 100vw !important;
        min-height: 100vw !important;
        max-height: 100vw !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    html body .banner.banner-boxes .box-img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .banner.banner-boxes .box-img img,
    html body .banner.banner-boxes .swiper-slide img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    html body .banner.banner-boxes .sliderControl {
        display: none !important;
    }

    /* Mantiene la zona clickeable sobre el arte del banner. */
    html body .banner.banner-boxes .box-text {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 80px !important;
        transform: translateX(-50%) !important;

        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        z-index: 20 !important;
        visibility: visible !important;
    }
}

/* Fondo únicamente para páginas de login y recuperación */
body:has(form[action*="Login"]),
body:has(form[action*="ForgotPassword"]),
body:has(form[action*="ResetPassword"]),
body:has(form[action*="RecoverPassword"]),
body:has(form[action*="Verify"]) {
    min-height: 100vh !important;
    background-color: #F2F2F2 !important;
    background-image: none !important;
}

/* Fondo del catálogo */
body:not(:has(form[action*="Login"])) :not(:has(form[action*="ForgotPassword"])) :not(:has(form[action*="ResetPassword"])) :not(:has(form[action*="RecoverPassword"])) :not(:has(form[action*="Verify"])) {
    /* No definir fondo acá */
}

/* Espacio superior únicamente en el inicio */
@media screen and (max-width: 768px) {
    main:has(.banner.banner-boxes) {
        padding-top: 110px !important;
    }
}

/* =========================================================================
   BOTÓN CARGAR — HOTSPOT INVISIBLE Y CLICKEABLE
   No tiene fondo, borde, texto ni efecto activo.
   ========================================================================= */

.box-slider-content .box-text>a.btn.btn-stroke-light[href*="Plugins/Invoices"],
.box-slider-content .box-text>a.btn.btn-stroke-light[href*="Plugins/Invoices"]:hover,
.box-slider-content .box-text>a.btn.btn-stroke-light[href*="Plugins/Invoices"]:focus,
.box-slider-content .box-text>a.btn.btn-stroke-light[href*="Plugins/Invoices"]:active {
    display: block !important;

    width: 170px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: none !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    text-indent: -9999px !important;

    font-size: 0 !important;
    line-height: 0 !important;

    opacity: 0 !important;
    visibility: visible !important;

    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
    transition: none !important;

    overflow: hidden !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.box-slider-content .box-text>a.btn.btn-stroke-light[href*="Plugins/Invoices"]::before,
.box-slider-content .box-text>a.btn.btn-stroke-light[href*="Plugins/Invoices"]::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* =========================================================================
   MIS FACTURAS — DISEÑO FIGMA
   Se aplica únicamente a la página que contiene #invoiceFileInput
   ========================================================================= */

body:has(#invoiceFileInput) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #FFFFFF !important;
}

main:has(#invoiceFileInput) {
    min-height: 100vh;
    background: #FFFFFF !important;
}

/* Contenedor principal */
main:has(#invoiceFileInput) .container.page-content-offset {
    width: 100%;
    max-width: 760px;
    margin: 0 auto !important;
    padding: 140px 24px 60px !important;
    background: #FFFFFF !important;
}

/* Breadcrumb generado con CSS */
main:has(#invoiceFileInput) .container.page-content-offset::before {
    content: "Inicio / Facturas";
    display: block;
    width: 100%;
    margin: 0 0 34px 0;
    padding: 12px 14px;

    background: #FFFFFF;
    border: 1px solid #BDBDBD;
    border-radius: 5px;

    color: #555555;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;

    box-sizing: border-box;
}

/* Encabezado de la sección */
main:has(#invoiceFileInput) .container.page-content-offset>.d-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 100%;
    margin: 0 0 20px 0 !important;
}

/* Contenedor del título y descripción */
main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>div {
    width: 100%;
}

/* Título MIS FACTURAS */
main:has(#invoiceFileInput) .container.page-content-offset h2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px;

    margin: 0 0 10px 0 !important;

    color: #000000 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    text-transform: uppercase !important;
}

/* Ícono dorado del título */
main:has(#invoiceFileInput) .container.page-content-offset h2::before {
    content: "\f0f6";
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #A58E0E;
    font-family: FontAwesome;
    font-size: 26px;
    font-weight: normal;

    flex-shrink: 0;
}

/* Descripción */
main:has(#invoiceFileInput) .container.page-content-offset>.d-flex .text-muted {
    max-width: 360px;
    margin: 0 !important;

    color: #333333 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* Botón Subir factura */
main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>button.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;

    width: auto !important;
    min-width: 160px;
    height: 42px;

    margin: 16px 0 0 0 !important;
    padding: 0 18px !important;

    background: #782D03 !important;
    background-color: #782D03 !important;
    background-image: none !important;

    border: 1px solid #782D03 !important;
    border-radius: 9px !important;

    color: #FFFFFF !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 42px !important;

    box-shadow: none !important;
    text-transform: none !important;
}

main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>button.btn-primary:hover,
main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>button.btn-primary:focus,
main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>button.btn-primary:active {
    background: #782D03 !important;
    background-color: #782D03 !important;
    border-color: #782D03 !important;
    color: #FFFFFF !important;
}

/* Ícono del botón */
main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>button.btn-primary .fa {
    color: #FFFFFF !important;
    font-size: 17px !important;
}

/* =========================================================================
   TARJETAS DE FACTURAS
   ========================================================================= */

main:has(#invoiceFileInput) .invoice-list-item {
    width: 100%;
    margin: 0 0 16px 0 !important;
    padding: 14px 12px !important;

    background: #FFFFFF !important;
    border: 1px solid #9E9E9E !important;
    border-radius: 5px !important;

    box-shadow: none !important;
    box-sizing: border-box;
}

/* Distribución imagen + información */
main:has(#invoiceFileInput) .invoice-list-item-row {
    display: grid !important;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 12px;
    align-items: start !important;
}

/* Miniatura */
main:has(#invoiceFileInput) .invoice-list-thumb {
    position: relative;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 98px !important;
    height: 98px !important;

    background: #F0F0F0 !important;
    border: none !important;
    border-radius: 5px !important;

    overflow: hidden !important;
}

/* Ícono cuando la imagen no carga */
main:has(#invoiceFileInput) .invoice-list-thumb::before {
    content: "\f03e";
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #B5B5B5;
    font-family: FontAwesome;
    font-size: 42px;
}

/* Imagen real */
main:has(#invoiceFileInput) .invoice-list-thumb img {
    position: relative;
    z-index: 1;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    background: #F0F0F0;
}

/* Información */
main:has(#invoiceFileInput) .invoice-list-body {
    min-width: 0;
    padding: 0 !important;
}

/* Etiquetas de estado */
main:has(#invoiceFileInput) .invoice-badge {
    display: inline-block !important;

    margin: 0 0 6px 0;
    padding: 5px 12px !important;

    border-radius: 12px !important;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 13px !important;
    white-space: nowrap;
}

/* Estado rechazado */
main:has(#invoiceFileInput) .invoice-badge-danger {
    background: #E3B2B4 !important;
    color: #A52A2A !important;
}

/* Estado aprobado */
main:has(#invoiceFileInput) .invoice-badge-success {
    background: #B9DDB8 !important;
    color: #3D743A !important;
}

/* Estado pendiente */
main:has(#invoiceFileInput) .invoice-badge-secondary {
    background: #D6D6D6 !important;
    color: #555555 !important;
}

/* Estado informativo */
main:has(#invoiceFileInput) .invoice-badge-info {
    background: #B7DDEA !important;
    color: #39758A !important;
}

/* Timbrado y número de factura */
main:has(#invoiceFileInput) .invoice-list-body>p.small:first-of-type {
    margin: 0 0 7px 0 !important;
    padding: 0 0 6px 0 !important;

    border-bottom: 1px solid #A0A0A0;

    color: #444444 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
}

/* Fecha y hora */
main:has(#invoiceFileInput) .invoice-list-body p.text-muted {
    display: flex;
    align-items: flex-start;
    gap: 5px;

    margin: 0 0 5px 0 !important;

    color: #777777 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 15px !important;
}

main:has(#invoiceFileInput) .invoice-list-body p.text-muted .fa {
    width: 14px;
    margin-top: 1px;

    color: #858585 !important;
    font-size: 14px !important;
    text-align: center;
    flex-shrink: 0;
}

/* Motivo de rechazo */
main:has(#invoiceFileInput) .invoice-list-body p.text-danger {
    display: -webkit-box !important;

    max-width: 100%;
    max-height: 32px;

    margin: 7px 0 0 0 !important;
    padding: 4px 7px !important;

    background: #D9A8AB !important;
    border-radius: 5px;

    color: #9C2228 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 12px !important;

    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Ícono del motivo */
main:has(#invoiceFileInput) .invoice-list-body p.text-danger .fa {
    color: #9C2228 !important;
}

/* Productos acreditados */
main:has(#invoiceFileInput) .invoice-product-chip {
    display: inline-block !important;

    margin: 3px 4px 0 0 !important;
    padding: 4px 8px !important;

    background: #B9DDEA !important;
    border-radius: 5px !important;

    color: #39758A !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 12px !important;
}



/* =========================================================================
   MOBILE
   ========================================================================= */

@media screen and (max-width: 768px) {

    main:has(#invoiceFileInput) .container.page-content-offset {
        max-width: none !important;
        padding: 75px 22px 60px !important;
    }

    main:has(#invoiceFileInput) .container.page-content-offset::before {
        margin-bottom: 34px;
        padding: 11px 13px;
        font-size: 13px;
    }

    main:has(#invoiceFileInput) .container.page-content-offset h2 {
        font-size: 23px !important;
        line-height: 28px !important;
    }

    main:has(#invoiceFileInput) .container.page-content-offset>.d-flex .text-muted {
        max-width: 310px;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>button.btn-primary {
        min-width: 160px;
        height: 42px;
        font-size: 15px !important;
    }

    main:has(#invoiceFileInput) .invoice-list-item-row {
        grid-template-columns: 98px minmax(0, 1fr);
        gap: 12px;
    }
}

/* Pantallas muy pequeñas */
@media screen and (max-width: 380px) {

    main:has(#invoiceFileInput) .container.page-content-offset {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    main:has(#invoiceFileInput) .invoice-list-item {
        padding: 11px 10px !important;
    }

    main:has(#invoiceFileInput) .invoice-list-item-row {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 10px;
    }

    main:has(#invoiceFileInput) .invoice-list-thumb {
        width: 86px !important;
        height: 96px !important;
    }

    main:has(#invoiceFileInput) .invoice-badge {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
}

/* =========================================================================
   MIS FACTURAS — AJUSTES FINOS DE ESPACIADO
   Pegalo DEBAJO del bloque anterior
   ========================================================================= */

body:has(#invoiceFileInput) {
    background: #F5F5F5 !important;
}

main:has(#invoiceFileInput) {
    min-height: auto !important;
    background: #F5F5F5 !important;
}

/* Contenedor principal */
@media screen and (max-width: 768px) {
    main:has(#invoiceFileInput) .container.page-content-offset {
        padding: 66px 20px 24px !important;
        margin: 0 !important;
    }

    /* Breadcrumb */
    main:has(#invoiceFileInput) .container.page-content-offset::before {
        margin: 0 0 18px 0 !important;
        padding: 10px 14px !important;
    }

    /* Bloque encabezado */
    main:has(#invoiceFileInput) .container.page-content-offset>.d-flex {
        margin: 0 0 18px 0 !important;
    }

    /* Título */
    main:has(#invoiceFileInput) .container.page-content-offset h2 {
        margin: 0 0 10px 0 !important;
        font-size: 22px !important;
        line-height: 26px !important;
    }

    /* Descripción */
    main:has(#invoiceFileInput) .container.page-content-offset>.d-flex .text-muted {
        margin: 0 0 0 0 !important;
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 19px !important;
    }

    /* Botón */
    main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>button.btn-primary {
        margin: 14px 0 0 0 !important;
        height: 40px !important;
        min-width: 155px !important;
        padding: 0 16px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
    }

    /* Card */
    main:has(#invoiceFileInput) .invoice-list-item {
        margin: 0 0 12px 0 !important;
        padding: 12px !important;
        border-radius: 6px !important;
    }

    /* Layout interno de la card */
    main:has(#invoiceFileInput) .invoice-list-item-row {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
    }

    /* Imagen */
    main:has(#invoiceFileInput) .invoice-list-thumb {
        width: 92px !important;
        height: 110px !important;
        border-radius: 4px !important;
    }

    /* Cuerpo */
    main:has(#invoiceFileInput) .invoice-list-body {
        padding: 0 !important;
    }

    /* Badge */
    main:has(#invoiceFileInput) .invoice-badge {
        margin: 0 0 8px 0 !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
        line-height: 12px !important;
    }

    /* Título de la factura */
    main:has(#invoiceFileInput) .invoice-list-body>p.small:first-of-type {
        margin: 0 0 8px 0 !important;
        padding: 0 0 8px 0 !important;
        font-size: 12px !important;
        line-height: 16px !important;
    }

    /* Fecha y subida */
    main:has(#invoiceFileInput) .invoice-list-body p.text-muted {
        margin: 0 0 4px 0 !important;
        font-size: 12px !important;
        line-height: 15px !important;
    }

    /* Motivo */
    main:has(#invoiceFileInput) .invoice-list-body p.text-danger {
        margin: 8px 0 0 0 !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
        line-height: 12px !important;
        max-height: none !important;
    }
}

/* Extra pequeño */
@media screen and (max-width: 380px) {
    main:has(#invoiceFileInput) .container.page-content-offset {
        padding: 64px 16px 20px !important;
    }

    main:has(#invoiceFileInput) .invoice-list-item-row {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    main:has(#invoiceFileInput) .invoice-list-thumb {
        width: 82px !important;
        height: 102px !important;
    }

    main:has(#invoiceFileInput) .invoice-list-body>p.small:first-of-type {
        font-size: 11px !important;
    }
}

/* =========================================================================
   MIS FACTURAS MOBILE — AJUSTE FINAL DE ESPACIOS
   ========================================================================= */

@media screen and (max-width: 768px) {

    /* Contenedor general: baja el breadcrumb debajo del menú fijo */
    main:has(#invoiceFileInput) .container.page-content-offset {
        padding-top: 125px !important;
        padding-right: 20px !important;
        padding-bottom: 14px !important;
        padding-left: 20px !important;
    }

    /* Breadcrumb */
    main:has(#invoiceFileInput) .container.page-content-offset::before {
        margin: 0 0 20px 0 !important;
        padding: 10px 14px !important;
        min-height: 42px !important;
        box-sizing: border-box !important;
    }

    /* Encabezado completo */
    main:has(#invoiceFileInput) .container.page-content-offset>.d-flex {
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }

    /* Bloque que contiene título y descripción */
    main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>div {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Título */
    main:has(#invoiceFileInput) .container.page-content-offset h2 {
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        font-size: 22px !important;
        line-height: 28px !important;
    }

    /* Descripción */
    main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>div>p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 19px !important;
    }

    /* Botón */
    main:has(#invoiceFileInput) .container.page-content-offset>.d-flex>button.btn-primary {
        margin: 16px 0 0 0 !important;
        padding: 0 18px !important;
        min-width: 0 !important;
        width: auto !important;
        height: 44px !important;
        line-height: 44px !important;
    }

    /* Tarjeta */
    main:has(#invoiceFileInput) .invoice-list-item {
        margin: 0 0 14px 0 !important;
        padding: 14px !important;
        min-height: 0 !important;
    }

    /* Interior de la tarjeta */
    main:has(#invoiceFileInput) .invoice-list-item-row {
        grid-template-columns: 104px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
    }

    /* Imagen */
    main:has(#invoiceFileInput) .invoice-list-thumb {
        width: 104px !important;
        height: 128px !important;
        margin: 0 !important;
    }

    /* Información */
    main:has(#invoiceFileInput) .invoice-list-body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Estado */
    main:has(#invoiceFileInput) .invoice-badge {
        margin: 0 0 7px 0 !important;
    }

    /* Número de factura */
    main:has(#invoiceFileInput) .invoice-list-body>p.small:first-of-type {
        margin: 0 0 7px 0 !important;
        padding: 0 0 7px 0 !important;
    }

    /* Fecha y subida */
    main:has(#invoiceFileInput) .invoice-list-body p.text-muted {
        margin: 0 0 4px 0 !important;
    }

    /* Motivo */
    main:has(#invoiceFileInput) .invoice-list-body p.text-danger {
        margin: 7px 0 0 0 !important;
        padding: 5px 7px !important;
        max-height: 38px !important;
        line-height: 12px !important;
        -webkit-line-clamp: 2 !important;
    }

    /* Evita espacio extra antes del footer */
    body:has(#invoiceFileInput) footer,
    body:has(#invoiceFileInput) footer .footer {
        margin-top: 0 !important;
    }
}

/* OBJETIVOS SOLO EN CELULAR */
@media screen and (max-width: 767px) {

    main:has(.stats-row) .stats-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        margin: 0 0 22px 0 !important;
        width: 100% !important;
    }

    main:has(.stats-row) .stat-card {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) auto !important;
        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 47px !important;
        min-height: 47px !important;

        padding: 0 13px !important;
        margin: 0 !important;

        border-radius: 9px !important;
        box-shadow: none !important;
        text-align: left !important;
    }

    main:has(.stats-row) .stat-card>.fa,
    main:has(.stats-row) .stat-card>i.fa {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        margin: 0 !important;
        color: #FFFFFF !important;
        font-size: 19px !important;
    }

    main:has(.stats-row) .stat-card.bg-primary-grad>.fa,
    main:has(.stats-row) .stat-card.bg-primary-grad i.fa {
        display: inline-flex !important;
    }

    main:has(.stats-row) .stat-card .stat-label {
        margin: 0 !important;
        padding-left: 7px !important;
        color: #FFFFFF !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-align: left !important;
    }

    main:has(.stats-row) .stat-card .stat-value {
        margin: 0 !important;
        color: #FFFFFF !important;
        font-size: 23px !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    main:has(.stats-row) .stat-card.bg-primary-grad {
        background: #A58E0E !important;
    }

    main:has(.stats-row) .stat-card.bg-info-grad {
        background: #69310F !important;
    }

    main:has(.stats-row) .stat-card.bg-success-grad {
        background: #AFAFAF !important;
    }
}

/* =========================================================
   MI CUENTA / PERFIL — DISEÑO GENERAL
   Página: /Account/Profile
   PEGAR AL FINAL DEL CSS
   ========================================================= */

/* Fondo de la página de perfil */
body:has(.sidebar-card .user-name) {
    background: #FFFFFF !important;
    background-image: none !important;
}

/* Contenedor general de Mi Cuenta */
body:has(.sidebar-card .user-name) main .container.page-content-offset {
    padding-top: 140px !important;
    padding-bottom: 50px !important;
}

/* Tarjeta lateral completa */
body:has(.sidebar-card .user-name) .sidebar-card {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 30px !important;
}

/* Cabecera con avatar, nombre, correo y puntos */
body:has(.sidebar-card .user-name) .sidebar-header {
    background: #FFFFFF !important;
    padding: 25px 20px 28px !important;
    text-align: center !important;
    border: none !important;
}

/* Avatar */
body:has(.sidebar-card .avatar-circle) .avatar-circle {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
    background: #ECECEC !important;
    background-image: none !important;

    color: #AFAFAF !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 0 !important;
    font-weight: 700 !important;

    box-shadow: none !important;
    overflow: hidden !important;
}

/* Ícono de imagen dentro del avatar */
body:has(.sidebar-card .avatar-circle) .avatar-circle::before {
    content: "\f03e";
    font-family: FontAwesome;
    font-size: 62px;
    font-weight: normal;
    color: #B0B0B0;
}

/* Si dentro del avatar existe una imagen */
body:has(.sidebar-card .avatar-circle) .avatar-circle img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* Nombre del usuario */
body:has(.sidebar-card .user-name) .user-name {
    margin: 0 0 4px 0 !important;

    color: #000000 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

/* Correo */
body:has(.sidebar-card .user-email) .user-email {
    margin: 0 0 18px 0 !important;

    color: #222222 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 21px !important;

    word-break: break-word;
}

/* Badge de puntos */
body:has(.sidebar-card .points-badge-large) .points-badge-large {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    width: auto !important;
    min-width: 140px !important;
    height: 46px !important;

    margin: 0 auto !important;
    padding: 0 18px !important;

    background: #69310F !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px !important;

    color: #FFFFFF !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 46px !important;
}

/* Estrella del badge */
body:has(.sidebar-card .points-badge-large) .points-badge-large .fa {
    color: #FFFFFF !important;
    font-size: 21px !important;
}

/* Menú lateral */
body:has(.sidebar-card .nav-menu) .nav-menu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
    background: #FFFFFF !important;
}

/* Cada opción */
body:has(.sidebar-card .nav-menu) .nav-menu>li {
    width: 100% !important;
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
}

/* Enlaces del menú */
body:has(.sidebar-card .nav-menu) .nav-menu>li>a {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;

    width: 100% !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    background: #FFFFFF !important;
    background-image: none !important;

    border: 1px solid #969696 !important;
    border-radius: 5px !important;

    color: #555555 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 22px !important;

    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* Íconos del menú */
body:has(.sidebar-card .nav-menu) .nav-menu>li>a .fa,
body:has(.sidebar-card .nav-menu) .nav-menu>li>a .glyphicon {
    width: 28px !important;

    color: #A0A0A0 !important;
    font-size: 22px !important;
    text-align: center !important;
}

/* Opción activa: Mi perfil */
body:has(.sidebar-card .nav-menu) .nav-menu>li.active>a,
body:has(.sidebar-card .nav-menu) .nav-menu>li>a.active {
    background: #A58E0E !important;
    background-color: #A58E0E !important;
    border-color: #A58E0E !important;

    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* Ícono blanco en la opción activa */
body:has(.sidebar-card .nav-menu) .nav-menu>li.active>a .fa,
body:has(.sidebar-card .nav-menu) .nav-menu>li.active>a .glyphicon,
body:has(.sidebar-card .nav-menu) .nav-menu>li>a.active .fa,
body:has(.sidebar-card .nav-menu) .nav-menu>li>a.active .glyphicon {
    color: #FFFFFF !important;
}

/* Hover */
body:has(.sidebar-card .nav-menu) .nav-menu>li>a:hover {
    background: rgba(165, 142, 14, 0.15) !important;
    color: #69310F !important;
}

/* Título Mi Cuenta */
body:has(.sidebar-card .user-name) main h2 {
    color: #000000 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

/* Ícono del título */
body:has(.sidebar-card .user-name) main h2 .fa {
    color: #A58E0E !important;
}


/* =========================================================
   MI CUENTA — VISTA MÓVIL
   ========================================================= */

@media screen and (max-width: 767px) {

    /* Contenedor principal */
    body:has(.sidebar-card .user-name) main .container.page-content-offset {
        padding-top: 125px !important;
        padding-right: 20px !important;
        padding-bottom: 35px !important;
        padding-left: 20px !important;
    }

    /* El contenido ocupa todo el ancho */
    body:has(.sidebar-card .user-name) main .row>[class*="col-"] {
        width: 100% !important;
        float: none !important;
    }

    /* Tarjeta completa */
    body:has(.sidebar-card .user-name) .sidebar-card {
        width: 100% !important;
        margin: 0 0 22px 0 !important;
    }

    /* Cabecera */
    body:has(.sidebar-card .user-name) .sidebar-header {
        padding: 22px 10px 27px !important;
    }

    /* Avatar móvil */
    body:has(.sidebar-card .avatar-circle) .avatar-circle {
        width: 210px !important;
        height: 210px !important;
        margin-bottom: 17px !important;
    }

    body:has(.sidebar-card .avatar-circle) .avatar-circle::before {
        font-size: 70px !important;
    }

    /* Nombre */
    body:has(.sidebar-card .user-name) .user-name {
        font-size: 27px !important;
        line-height: 32px !important;
    }

    /* Correo */
    body:has(.sidebar-card .user-email) .user-email {
        font-size: 18px !important;
        line-height: 23px !important;
        margin-bottom: 17px !important;
    }

    /* Badge */
    body:has(.sidebar-card .points-badge-large) .points-badge-large {
        min-width: 140px !important;
        height: 46px !important;
        font-size: 21px !important;
    }

    /* Menú */
    body:has(.sidebar-card .nav-menu) .nav-menu>li {
        margin-bottom: 7px !important;
    }

    body:has(.sidebar-card .nav-menu) .nav-menu>li>a {
        min-height: 55px !important;
        padding: 0 19px !important;

        font-size: 19px !important;
        line-height: 23px !important;
    }

    /* Título debajo de la tarjeta */
    body:has(.sidebar-card .user-name) main h2 {
        margin-top: 25px !important;
        font-size: 26px !important;
        line-height: 32px !important;
    }
}


/* Celulares angostos */
@media screen and (max-width: 380px) {

    body:has(.sidebar-card .user-name) main .container.page-content-offset {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body:has(.sidebar-card .avatar-circle) .avatar-circle {
        width: 190px !important;
        height: 190px !important;
    }

    body:has(.sidebar-card .user-name) .user-name {
        font-size: 24px !important;
    }

    body:has(.sidebar-card .user-email) .user-email {
        font-size: 16px !important;
    }

    body:has(.sidebar-card .nav-menu) .nav-menu>li>a {
        font-size: 17px !important;
    }
}

/* =========================================================
   CATÁLOGO — BANNER, PAGINACIÓN Y RESPONSIVE
   Se aplica únicamente a la página que contiene #category-intro
   ========================================================= */

/* ---------- Banner del catálogo: desktop y tablet ---------- */
body:has(#category-intro) #category-intro.section-intro {
    position: relative !important;
    width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #69310F !important;
}

body:has(#category-intro) #category-intro .cat-intro {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #69310F !important;
}

body:has(#category-intro) #category-intro .cat-intro-banner {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.62 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(0.8) contrast(0.95) !important;
}

body:has(#category-intro) #category-intro .cat-intro-text {
    position: absolute !important;
    top: 130px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 24px !important;
    background: linear-gradient(180deg,
            rgba(105, 49, 15, 0.54) 0%,
            rgba(105, 49, 15, 0.78) 100%) !important;
    text-align: center !important;
}

body:has(#category-intro) #category-intro .cat-intro-text:hover {
    background: linear-gradient(180deg,
            rgba(105, 49, 15, 0.58) 0%,
            rgba(105, 49, 15, 0.82) 100%) !important;
}

body:has(#category-intro) #category-intro .cat-intro-text h1 {
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
}

body:has(#category-intro) #category-intro .cat-intro-text p {
    display: none !important;
}

/* ---------- Área principal del catálogo ---------- */
body:has(#category-intro) #main-container-wrapper {
    padding-top: 34px !important;
    padding-bottom: 50px !important;
    background: #FFFFFF !important;
}

body:has(#category-intro) .catTopBar {
    margin-bottom: 24px !important;
}

body:has(#category-intro) .shrtByP,
body:has(#category-intro) .shrtByP span {
    color: #333333 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
}

/* ---------- Paginación institucional ---------- */
body:has(#category-intro) .pagination {
    margin: 34px 0 0 !important;
}

body:has(#category-intro) .pagination>li>a,
body:has(#category-intro) .pagination>li>span {
    min-width: 40px !important;
    height: 40px !important;
    padding: 9px 12px !important;
    border-color: #D7D7D7 !important;
    background: #FFFFFF !important;
    color: #69310F !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-align: center !important;
    box-shadow: none !important;
}

body:has(#category-intro) .pagination>li>a:hover,
body:has(#category-intro) .pagination>li>a:focus {
    border-color: #A58E0E !important;
    background: #A58E0E !important;
    color: #FFFFFF !important;
}

body:has(#category-intro) .pagination>.active>a,
body:has(#category-intro) .pagination>.active>a:hover,
body:has(#category-intro) .pagination>.active>a:focus,
body:has(#category-intro) .pagination>.active>span {
    border-color: #69310F !important;
    background: #69310F !important;
    color: #FFFFFF !important;
}

body:has(#category-intro) .pagination>.disabled>a,
body:has(#category-intro) .pagination>.disabled>a:hover,
body:has(#category-intro) .pagination>.disabled>a:focus,
body:has(#category-intro) .pagination>.disabled>span {
    border-color: #E3E3E3 !important;
    background: #F5F5F5 !important;
    color: #A8A8A8 !important;
}

/* ---------- Botones de producto ---------- */
body:has(#category-intro) .product .action-control .btn-primary {
    background: #A58E0E !important;
    background-color: #A58E0E !important;
    border-color: #A58E0E !important;
    color: #FFFFFF !important;
}

body:has(#category-intro) .product .action-control .btn-primary:hover,
body:has(#category-intro) .product .action-control .btn-primary:focus,
body:has(#category-intro) .product .action-control .btn-primary:active {
    background: #69310F !important;
    background-color: #69310F !important;
    border-color: #69310F !important;
    color: #FFFFFF !important;
}

/* =========================================================
   CATÁLOGO — MOBILE
   ========================================================= */
@media screen and (max-width: 767px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    /* Banner sin el espacio blanco extra debajo del menú */
    body:has(#category-intro) #category-intro.section-intro {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
        margin: 0 0 0 calc(50% - 50vw) !important;
        padding: 0 !important;
        background: #69310F !important;
    }

    body:has(#category-intro) #category-intro .cat-intro {
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
    }

    body:has(#category-intro) #category-intro .cat-intro-banner {
        display: block !important;
        visibility: visible !important;
        opacity: 0.5 !important;
        object-position: center !important;
    }

    body:has(#category-intro) #category-intro .cat-intro-text {
        top: 110px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: auto !important;
        min-height: 220px !important;
        padding: 22px 18px !important;
        background: linear-gradient(180deg,
                rgba(105, 49, 15, 0.56) 0%,
                rgba(105, 49, 15, 0.86) 100%) !important;
    }

    body:has(#category-intro) #category-intro .cat-intro-text h1 {
        font-size: 34px !important;
        line-height: 40px !important;
        letter-spacing: 1px !important;
    }

    /* Contenedor general */
    body:has(#category-intro) #main-container-wrapper {
        padding: 22px 0 36px !important;
    }

    body:has(#category-intro) #main-container-wrapper>.container.main-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
    }

    body:has(#category-intro) .main-container>.row {
        margin: 0 !important;
    }

    /* Cantidad de productos */
    body:has(#category-intro) .catTopBar,
    body:has(#category-intro) .catTopBarInner {
        width: 100% !important;
        margin: 0 0 18px 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    body:has(#category-intro) .catTopBar [class*="col-"] {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(#category-intro) .catTopBar .f-right,
    body:has(#category-intro) .catTopBar .w100,
    body:has(#category-intro) .catTopBar .shrtByP {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    body:has(#category-intro) .catTopBar .shrtByP span {
        display: block !important;
        padding: 14px 0 17px !important;
        border-bottom: 1px solid #D9D9D9 !important;
        color: #333333 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
    }

    /* Columnas */
    body:has(#category-intro) .catColumnWrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(#category-intro) .filterColumn,
    body:has(#category-intro) .productColumn {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Filtros compactos */
    body:has(#category-intro) .filterColumn {
        margin-bottom: 22px !important;
    }

    body:has(#category-intro) .filterColumn .panel-group {
        margin: 0 !important;
        border-top: 1px solid #E2E2E2 !important;
    }

    body:has(#category-intro) .filterColumn .panel.panel-flat {
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid #E2E2E2 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #FFFFFF !important;
    }

    body:has(#category-intro) .filterColumn .panel-heading {
        padding: 0 !important;
        background: #FFFFFF !important;
    }

    body:has(#category-intro) .filterColumn .panel-title>a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 52px !important;
        padding: 0 2px !important;
        color: #69310F !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    body:has(#category-intro) .filterColumn .panel-title .pull-right,
    body:has(#category-intro) .filterColumn .panel-title .hasMinus {
        color: #A58E0E !important;
    }

    body:has(#category-intro) .filterColumn .panel-body {
        padding: 4px 0 14px !important;
        border: none !important;
    }

    body:has(#category-intro) .filterColumn .panel-body li a,
    body:has(#category-intro) .filterColumn .maxlist-more a {
        color: #555555 !important;
        font-size: 14px !important;
    }

    /* Grilla de productos: elimina las alturas y espacios heredados */
    body:has(#category-intro) .productWrapper {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 12px !important;
        row-gap: 16px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(#category-intro) .productWrapper::before,
    body:has(#category-intro) .productWrapper::after {
        display: none !important;
        content: none !important;
    }

    body:has(#category-intro) .productWrapper>.item {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(#category-intro) .productWrapper>.col-lg-12,
    body:has(#category-intro) .productWrapper>.col-md-12,
    body:has(#category-intro) .productWrapper>.col-sm-12,
    body:has(#category-intro) .productWrapper>.col-xs-12 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Tarjeta */
    body:has(#category-intro) .productWrapper .product {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #D9D9D9 !important;
        border-radius: 4px !important;
        background: #FFFFFF !important;
        box-shadow: none !important;
    }

    /* Imagen */
    body:has(#category-intro) .productWrapper .product .image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #F5F5F5 !important;
    }

    body:has(#category-intro) .productWrapper .product .image>a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    body:has(#category-intro) .productWrapper .product .image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Descripción */
    body:has(#category-intro) .productWrapper .product .description {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 112px !important;
        margin: 0 !important;
        padding: 14px 9px 8px !important;
        text-align: center !important;
    }

    body:has(#category-intro) .productWrapper .product .description h4 {
        display: -webkit-box !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        color: #222222 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        text-transform: uppercase !important;
    }

    body:has(#category-intro) .productWrapper .product .description h4 a {
        color: #222222 !important;
        text-decoration: none !important;
    }

    body:has(#category-intro) .productWrapper .product .grid-description {
        margin-top: auto !important;
    }

    body:has(#category-intro) .productWrapper .product .grid-description p {
        display: -webkit-box !important;
        min-height: 36px !important;
        max-height: 36px !important;
        margin: 0 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        color: #777777 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 18px !important;
    }

    body:has(#category-intro) .productWrapper .product .list-description {
        display: none !important;
    }

    /* Puntos */
    body:has(#category-intro) .productWrapper .product .price {
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 3px 8px 8px !important;
        color: #333333 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 23px !important;
        text-align: center !important;
    }

    body:has(#category-intro) .productWrapper .product .price span {
        color: #333333 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    /* Botón */
    body:has(#category-intro) .productWrapper .product .action-control {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 8px 10px !important;
    }

    body:has(#category-intro) .productWrapper .product .action-control .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 8px 5px !important;
        border-radius: 4px !important;
        color: #FFFFFF !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 16px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    body:has(#category-intro) .productWrapper .product .action-control .glyphicon {
        margin-right: 4px !important;
        color: #FFFFFF !important;
        font-size: 11px !important;
    }

    /* Paginación móvil */
    body:has(#category-intro) .pagination {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        margin: 26px 0 0 !important;
    }

    body:has(#category-intro) .pagination>li>a,
    body:has(#category-intro) .pagination>li>span {
        min-width: 38px !important;
        height: 38px !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}

/* Celulares muy angostos */
@media screen and (max-width: 360px) {
    body:has(#category-intro) #main-container-wrapper>.container.main-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:has(#category-intro) .productWrapper {
        column-gap: 9px !important;
        row-gap: 13px !important;
    }

    body:has(#category-intro) .productWrapper .product .description {
        min-height: 106px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    body:has(#category-intro) .productWrapper .product .description h4 {
        font-size: 13px !important;
        line-height: 18px !important;
    }

    body:has(#category-intro) .productWrapper .product .grid-description p {
        font-size: 13px !important;
    }

    body:has(#category-intro) .productWrapper .product .action-control {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body:has(#category-intro) .productWrapper .product .action-control .btn {
        font-size: 11px !important;
    }
}

/* =========================================================
   Cambio de texto en mis facturas
   Solo afecta a la página que contiene #invoiceFileInput
   ========================================================= */

main:has(#invoiceFileInput) .container.page-content-offset>.d-flex .text-muted {
    font-size: 0 !important;
    line-height: 0 !important;
    max-width: 100% !important;
}

main:has(#invoiceFileInput) .container.page-content-offset>.d-flex .text-muted::after {
    content: "Subí fotos de tus facturas de venta para obtener puntos. Te acreditaremos entre las 24 a 72hs hábiles posterior a la carga.";
    display: block !important;
    color: #333333 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

/* ==================================================
   INICIO - FOOTER E ÍCONO FLOTANTE
   ================================================== */

/* Footer marrón únicamente en la página de inicio */
body:has(main .banner.banner-boxes) footer .footer,
body:has(main .banner.banner-boxes) footer .footer-bottom {
    background: #71320d !important;
    color: #ffffff !important;
}

/* Mantener los textos y enlaces del footer en blanco */
body:has(main .banner.banner-boxes) footer .footer h3,
body:has(main .banner.banner-boxes) footer .footer p,
body:has(main .banner.banner-boxes) footer .footer a,
body:has(main .banner.banner-boxes) footer .footer li,
body:has(main .banner.banner-boxes) footer .footer-bottom p {
    color: #ffffff !important;
}

/* Separación inferior más sutil */
body:has(main .banner.banner-boxes) footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Botón flotante de facturas en mostaza */
body:has(main .banner.banner-boxes) .invoice-fab {
    background-color: #b49a00 !important;
    color: #ffffff !important;
}

/* Hover del botón flotante */
body:has(main .banner.banner-boxes) .invoice-fab:hover,
body:has(main .banner.banner-boxes) .invoice-fab:focus {
    background-color: #967f00 !important;
    color: #ffffff !important;
}
/* =========================================================
   CATÁLOGO — FOOTER MARRÓN
   ========================================================= */

body:has(#category-intro) footer,
body:has(#category-intro) footer .footer,
body:has(#category-intro) footer .footer-bottom {
    background: #69310F !important;
    background-color: #69310F !important;
    background-image: none !important;
}

/* Evita que los contenedores internos mantengan el azul */
body:has(#category-intro) footer .footer>.container,
body:has(#category-intro) footer .footer-bottom>.container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Línea divisoria del copyright */
body:has(#category-intro) footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* Textos blancos */
body:has(#category-intro) footer h3,
body:has(#category-intro) footer p,
body:has(#category-intro) footer li,
body:has(#category-intro) footer a,
body:has(#category-intro) footer strong,
body:has(#category-intro) footer .fa {
    color: #FFFFFF !important;
}
/* =========================================================
   FOOTER GLOBAL — MARRÓN EN TODAS LAS PÁGINAS
   ========================================================= */

footer,
footer .footer,
footer .footer-bottom {
    background: #69310F !important;
    background-color: #69310F !important;
    background-image: none !important;
}

/* Evita que algún contenedor interno mantenga otro color */
footer .footer>.container,
footer .footer-bottom>.container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Línea superior de la franja inferior */
footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* Textos e íconos en blanco */
footer h3,
footer p,
footer li,
footer a,
footer span,
footer strong,
footer .fa,
footer .glyphicon {
    color: #FFFFFF !important;
}

/* Hover de enlaces */
footer a:hover,
footer a:focus {
    color: #FFFFFF !important;
    opacity: 0.85;
    text-decoration: none !important;
}

/* Líneas decorativas debajo de títulos */
footer .footer h3::after {
    background: #A58E0E !important;
}
/* =========================================================
   MENÚ FINAL — SIN COUPONS Y POSICIÓN ESTÁTICA
   ========================================================= */

/* Quitar el botón de Coupons */
.navbar.navbar-tshop .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(1) {
    display: none !important;
}

/* El menú deja de ser fijo */
.navbar.navbar-tshop.navbar-fixed-top,
.navbar.navbar-tshop.navbar-fixed-top.stuck,
.navbar.navbar-tshop.navbar-fixed-top.megamenu,
.navbar.navbar-tshop.navbar-fixed-top.megamenu.stuck {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;

    width: 100% !important;
    margin: 0 !important;
    z-index: auto !important;

    transform: none !important;
}
/* =========================================================
   HEADER / MENÚ INDUPUNTOS — VERSIÓN FINAL
   Asset correcto del logo:
   9e0b3e71da1547c8bb0042a442987102
   PEGAR AL FINAL ABSOLUTO DEL CSS
   ========================================================= */

/* ---------- Contenedor general ---------- */
.navbar.navbar-tshop.navbar-fixed-top.megamenu,
.navbar.navbar-tshop.navbar-fixed-top.megamenu.stuck {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 8px 0 !important;
}

/* ---------- Barra superior mostaza ---------- */
.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top {
    background: #A58E0E !important;
    background-image: none !important;
    border: none !important;
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
}

.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .container {
    width: 100% !important;
}

.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .userMenu {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .userMenu li {
    display: inline-block !important;
}

.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .userMenu li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    color: #FFFFFF !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .userMenu li a:hover,
.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .userMenu li a:focus {
    color: #FFFFFF !important;
    opacity: 0.9 !important;
}

.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .userMenu li a i,
.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .userMenu li a .glyphicon {
    color: #FFFFFF !important;
    font-size: 14px !important;
}

/* ---------- Barra principal marrón ---------- */
.navbar.navbar-tshop.navbar-fixed-top.megamenu>.container {
    width: 100% !important;
    background: linear-gradient(90deg, #6B2F0F 0%, #7A350F 50%, #6B2F0F 100%) !important;
    background-color: #6B2F0F !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important;
    min-height: 86px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* =========================================================
   LOGO
   ========================================================= */
.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-brand {
    display: block !important;
    width: 210px !important;
    height: 62px !important;
    padding: 0 !important;
    margin: 0 !important;

    background-image: url("/dynamic/assets/9e0b3e71da1547c8bb0042a442987102") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}

.navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-brand img {
    display: none !important;
}

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width: 768px) {

    .navbar.navbar-tshop.navbar-fixed-top.megamenu>.container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-header {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        margin-right: 28px !important;
        flex: 0 0 auto !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-toggle {
        display: none !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse.collapse {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 1 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Menú principal */
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .nav.navbar-nav {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .nav.navbar-nav>li {
        float: none !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .nav.navbar-nav>li>a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        min-width: 92px !important;
        min-height: 70px !important;
        padding: 10px 14px !important;
        margin: 0 !important;

        background: transparent !important;
        border-radius: 14px !important;
        border: none !important;

        color: #FFFFFF !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
        text-align: center !important;
        text-decoration: none !important;

        transition: all 0.25s ease !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .nav.navbar-nav>li>a i.fa {
        margin: 0 !important;
        font-size: 19px !important;
        color: #FFFFFF !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .nav.navbar-nav>li.active>a,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .nav.navbar-nav>li>a:hover,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .nav.navbar-nav>li>a:focus {
        background: rgba(165, 142, 14, 0.95) !important;
        color: #FFFFFF !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    }

    /* Panel derecho */
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 0 0 20px !important;
        padding-left: 20px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu {
        float: none !important;
        margin: 0 !important;
    }

    /* Cupones y puntos */
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(1) a,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(2) a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 92px !important;
        min-height: 54px !important;
        padding: 8px 12px !important;

        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 14px !important;

        color: #FFFFFF !important;
        text-decoration: none !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(1) a i,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(2) a i {
        font-size: 18px !important;
        color: #FFFFFF !important;
        margin: 0 0 2px 0 !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(1) a span,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(2) a span {
        color: #FFFFFF !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    /* Carrito */
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(3) a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;

        min-height: 54px !important;
        padding: 0 18px !important;

        background: #A58E0E !important;
        border: none !important;
        border-radius: 14px !important;

        color: #FFFFFF !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(3) a i,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(3) a span {
        color: #FFFFFF !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(3) a .badge {
        background: #FFFFFF !important;
        color: #7A350F !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        line-height: 24px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        text-align: center !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {

    .navbar.navbar-tshop.navbar-fixed-top.megamenu,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu.stuck {
        padding: 4px 4px 0 !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .col-xs-6 {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-top .userMenu li a {
        min-height: 36px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu>.container {
        padding: 10px 12px !important;
        min-height: 72px !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-brand {
        width: 150px !important;
        height: 44px !important;
        flex: 0 0 auto !important;
        order: 1 !important;
    }

    /* Carrito mobile */
    .navbar.navbar-tshop.navbar-fixed-top.megamenu a.navbar-toggle[href="/Cart"] {
        float: none !important;
        order: 2 !important;

        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;

        min-height: 42px !important;
        margin: 0 8px 0 auto !important;
        padding: 0 14px !important;

        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu a.navbar-toggle[href="/Cart"] i,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu a.navbar-toggle[href="/Cart"] .cartRespons {
        color: #FFFFFF !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu a.navbar-toggle[href="/Cart"] .badge {
        background: #A58E0E !important;
        color: #FFFFFF !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        line-height: 22px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        text-align: center !important;
    }

    /* Botón hamburguesa */
    .navbar.navbar-tshop.navbar-fixed-top.megamenu button.navbar-toggle[data-target=".navbar-collapse"] {
        float: none !important;
        order: 3 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu button.navbar-toggle[data-target=".navbar-collapse"] .icon-bar {
        background: #FFFFFF !important;
        width: 24px !important;
        height: 3px !important;
        border-radius: 4px !important;
    }

    /* Panel desplegable */
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse {
        border: none !important;
        box-shadow: none !important;
        margin-top: 10px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse.in,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse.collapsing {
        background: linear-gradient(180deg, #76320F 0%, #6B2F0F 100%) !important;
        border-radius: 16px !important;
        padding: 12px !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse .nav.navbar-nav {
        margin: 0 !important;
        float: none !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse .nav.navbar-nav>li {
        float: none !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse .nav.navbar-nav>li>a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;

        min-height: 48px !important;
        padding: 0 14px !important;
        margin: 0 0 8px 0 !important;

        background: transparent !important;
        border-radius: 12px !important;
        color: #FFFFFF !important;

        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse .nav.navbar-nav>li>a i.fa {
        width: 18px !important;
        text-align: center !important;
        font-size: 17px !important;
        color: #FFFFFF !important;
        margin: 0 !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse .nav.navbar-nav>li.active>a,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse .nav.navbar-nav>li>a:hover,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu .navbar-collapse .nav.navbar-nav>li>a:focus {
        background: rgba(165, 142, 14, 0.95) !important;
        color: #FFFFFF !important;
    }
}
/* =========================================================
   MENÚ FINAL — SIN COUPONS Y POSICIÓN ESTÁTICA
   ========================================================= */

/* Quitar el botón de Coupons */
.navbar.navbar-tshop .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(1) {
    display: none !important;
}

/* El menú deja de ser fijo */
.navbar.navbar-tshop.navbar-fixed-top,
.navbar.navbar-tshop.navbar-fixed-top.stuck,
.navbar.navbar-tshop.navbar-fixed-top.megamenu,
.navbar.navbar-tshop.navbar-fixed-top.megamenu.stuck {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;

    width: 100% !important;
    margin: 0 !important;
    z-index: auto !important;

    transform: none !important;
}

/* Evita que el script vuelva a fijar el menú */
.navbar.stuck,
.navbar.is-sticky,
.navbar.affix,
.navbar.affix-top {
    position: static !important;
    top: auto !important;
    transform: none !important;
}

/* Quitar espacios que compensaban el menú fijo */
body {
    padding-top: 0 !important;
}

main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Inicio mobile: quitar compensación anterior */
@media screen and (max-width: 768px) {
    main:has(.banner.banner-boxes) {
        padding-top: 0 !important;
    }
}

/* Páginas internas */
.container.page-content-offset {
    padding-top: 35px !important;
}

/* Catálogo */
body:has(#category-intro) #category-intro {
    margin-top: 0 !important;
}

/* Mis Facturas */
main:has(#invoiceFileInput) .container.page-content-offset {
    padding-top: 35px !important;
}

/* Mi Cuenta */
body:has(.sidebar-card .user-name) main .container.page-content-offset {
    padding-top: 35px !important;
}

/* Mobile páginas internas */
@media screen and (max-width: 767px) {

    .container.page-content-offset,
    main:has(#invoiceFileInput) .container.page-content-offset,
    body:has(.sidebar-card .user-name) main .container.page-content-offset {
        padding-top: 24px !important;
    }
}
/* =========================================================
   MOBILE — CORRECCIÓN BOTÓN HAMBURGUESA
   ========================================================= */

@media screen and (max-width: 767px) {

    .navbar.navbar-tshop.navbar-fixed-top.megamenu button.navbar-toggle[data-target=".navbar-collapse"] {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 10px !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu button.navbar-toggle[data-target=".navbar-collapse"] .icon-bar {
        display: block !important;

        width: 25px !important;
        height: 3px !important;

        margin: 0 !important;

        background: #FFFFFF !important;
        border: none !important;
        border-radius: 4px !important;
    }

    .navbar.navbar-tshop.navbar-fixed-top.megamenu button.navbar-toggle[data-target=".navbar-collapse"]:hover,
    .navbar.navbar-tshop.navbar-fixed-top.megamenu button.navbar-toggle[data-target=".navbar-collapse"]:focus {
        background: rgba(255, 255, 255, 0.08) !important;
        outline: none !important;
    }
}
/* =========================================================
   MOBILE — INDICADOR DE PUNTOS EN EL HEADER
   ========================================================= */

@media screen and (max-width: 767px) {

    .mobile-points-indicator {
        order: 2 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        min-width: 58px !important;
        height: 42px !important;

        margin: 0 6px 0 auto !important;
        padding: 0 10px !important;

        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 12px !important;

        color: #FFFFFF !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    .mobile-points-indicator:hover,
    .mobile-points-indicator:focus,
    .mobile-points-indicator:active {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #FFFFFF !important;
        text-decoration: none !important;
    }

    .mobile-points-indicator .fa-star {
        margin: 0 !important;
        color: #FFFFFF !important;
        font-size: 17px !important;
    }

    .mobile-points-indicator .mobile-points-value {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 23px !important;
        height: 23px !important;
        padding: 0 6px !important;

        background: #A58E0E !important;
        border-radius: 20px !important;

        color: #FFFFFF !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 23px !important;
    }

    /* Orden del encabezado */
    .navbar.navbar-tshop .navbar-header .navbar-brand {
        order: 1 !important;
    }

    .navbar.navbar-tshop .navbar-header a.navbar-toggle[href="/Cart"] {
        order: 3 !important;
        margin-left: 0 !important;
        margin-right: 6px !important;
    }

    .navbar.navbar-tshop .navbar-header button.navbar-toggle[data-target=".navbar-collapse"] {
        order: 4 !important;
    }
}
/* =========================================================
   MOBILE — MOSTRAR CONTADOR REAL DE PUNTOS EN EL HEADER
   Solución únicamente con CSS
   ========================================================= */

@media screen and (max-width: 767px) {

    /* El contenedor marrón será la referencia de posición */
    .navbar.navbar-tshop>.container {
        position: relative !important;
        overflow: visible !important;
    }

    /*
       Mantiene disponible el bloque que contiene los puntos,
       aunque el menú principal esté cerrado.
    */
    .navbar.navbar-tshop .navbar-collapse.collapse {
        display: block !important;
        position: static !important;

        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* Cuando se abre la hamburguesa */
    .navbar.navbar-tshop .navbar-collapse.collapse.in {
        height: auto !important;
        min-height: 1px !important;
        overflow: visible !important;
    }

    /* Oculta el menú principal mientras la hamburguesa esté cerrada */
    .navbar.navbar-tshop .navbar-collapse.collapse:not(.in)>.nav.navbar-nav:not(.navbar-right) {
        display: none !important;
    }

    /* Fuerza la aparición del bloque derecho oculto por hidden-xs */
    .navbar.navbar-tshop .navbar-collapse .navbar-nav.navbar-right.hidden-xs {
        display: flex !important;
        position: absolute !important;

        top: 15px !important;
        right: 128px !important;
        z-index: 1100 !important;

        width: auto !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
        background: transparent !important;
        float: none !important;
    }

    /* Oculta Coupons */
    .navbar.navbar-tshop .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(1) {
        display: none !important;
    }

    /* Muestra solamente Puntos */
    .navbar.navbar-tshop .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(2) {
        display: block !important;
        float: none !important;
        margin: 0 !important;
    }

    /* Oculta el carrito duplicado de escritorio */
    .navbar.navbar-tshop .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(3) {
        display: none !important;
    }

    /* Botón mobile de puntos */
    .navbar.navbar-tshop .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(2)>a {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        min-width: 58px !important;
        height: 42px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 12px !important;

        color: #FFFFFF !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    /* Estrella */
    .navbar.navbar-tshop .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(2)>a .fa-star {
        display: inline-block !important;
        margin: 0 !important;

        color: #FFFFFF !important;
        font-size: 17px !important;
    }

    /* Cantidad real de puntos */
    .navbar.navbar-tshop .navbar-nav.navbar-right.hidden-xs .cartMenu:nth-child(2)>a>span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;

        background: #A58E0E !important;
        border-radius: 20px !important;

        color: #FFFFFF !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 22px !important;
    }
}
/* =========================================================
   CARRITO MOBILE — FILA COMPLETA CON BASURERITO
   PEGAR AL FINAL ABSOLUTO DEL CSS
   ========================================================= */

@media screen and (max-width: 767px) {

    /* Permitir que la tarjeta muestre todos sus elementos */
    .card-custom,
    .card-body-custom {
        overflow: visible !important;
    }

    .cart-table-improved {
        display: block !important;
        width: 100% !important;
        table-layout: auto !important;
        overflow: visible !important;
    }

    .cart-table-improved tbody {
        display: block !important;
        width: 100% !important;
    }

    /*
       Cada producto se convierte en una grilla:
       - Producto arriba
       - Cantidad, subtotal y eliminar abajo
    */
    .cart-table-improved tbody>tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        grid-template-areas:
            "producto producto producto"
            "cantidad subtotal eliminar" !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 14px !important;

        width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 18px 16px !important;

        background: #FFFFFF !important;
        border-bottom: 1px solid #E0E0E0 !important;
        overflow: visible !important;
    }

    /* Restablecer todos los TD que alguna regla anterior ocultó */
    .cart-table-improved tbody>tr>td {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
        background: transparent !important;

        transform: none !important;
        overflow: visible !important;
    }

    /* Producto */
    .cart-table-improved tbody>tr>td:nth-child(1) {
        grid-area: producto !important;
    }

    /* Cantidad */
    .cart-table-improved tbody>tr>td:nth-child(2) {
        grid-area: cantidad !important;
        text-align: left !important;
        padding-right: 0 !important;
    }

    /* Subtotal */
    .cart-table-improved tbody>tr>td:nth-child(3) {
        grid-area: subtotal !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        padding-right: 0 !important;
        text-align: right !important;
    }

    /* Columna eliminar */
    .cart-table-improved tbody>tr>td:nth-child(4),
    .cart-table-improved tbody>tr>td:last-child {
        grid-area: eliminar !important;

        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: 40px !important;
        min-width: 40px !important;

        padding: 0 !important;
        text-align: right !important;

        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Producto: imagen e información */
    .cart-product-improved {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 14px !important;

        width: 100% !important;
    }

    .cart-product-image-improved {
        width: 92px !important;
        height: 92px !important;
        max-width: 92px !important;
        max-height: 92px !important;

        object-fit: contain !important;
        background: #FFFFFF !important;
    }

    .cart-product-info-improved {
        min-width: 0 !important;
        text-align: left !important;
    }

    .cart-product-info-improved h5 {
        margin: 0 0 8px !important;
        font-size: 15px !important;
        line-height: 19px !important;
    }

    /* Cantidad más compacta */
    .quantity-control-improved {
        display: inline-flex !important;
        width: auto !important;
        min-width: 118px !important;
        margin: 0 !important;
    }

    /* Subtotal visible */
    .cart-subtotal-improved {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        color: #A58E0E !important;
        font-size: 15px !important;
        white-space: nowrap !important;
    }

    /* Basurerito */
    .btn-remove-improved {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 38px !important;
        height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #FFFFFF !important;
        border: 1px solid #D8D8D8 !important;
        border-radius: 50% !important;

        color: #999999 !important;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08) !important;

        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }

    .btn-remove-improved .fa,
    .btn-remove-improved .fa-trash {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;

        margin: 0 !important;
        color: #999999 !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    .btn-remove-improved:hover,
    .btn-remove-improved:focus,
    .btn-remove-improved:active {
        background: #FFF3F3 !important;
        border-color: #C0392B !important;
        color: #C0392B !important;
    }

    .btn-remove-improved:hover .fa,
    .btn-remove-improved:focus .fa,
    .btn-remove-improved:active .fa {
        color: #C0392B !important;
    }

    /* Encabezado mobile: mostrar solo Producto */
    .cart-table-improved thead {
        display: table !important;
        width: 100% !important;
    }

    .cart-table-improved thead tr {
        display: block !important;
    }

    .cart-table-improved thead th {
        display: none !important;
    }

    .cart-table-improved thead th:first-child {
        display: block !important;
        width: 100% !important;
        padding: 14px 16px !important;
    }
}
/* =========================================================
   CARRITO — QUITAR CONTADOR DEL TÍTULO
   ========================================================= */

/*
   Oculta el texto original:
   Productos ( 1 )
   y lo reemplaza solamente por "Productos".
*/
.card-header-custom h4 {
    font-size: 0 !important;
}

/* Mantener visible el ícono */
.card-header-custom h4>.fa {
    font-size: 18px !important;
    margin-right: 10px !important;
}

/* Nuevo título sin contador */
.card-header-custom h4::after {
    content: "Productos" !important;

    color: #000000 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
}

/* Ocultar completamente el contador */
.card-header-custom #itemCount {
    display: none !important;
}


/* =========================================================
   MOBILE — QUITAR ENCABEZADO "PRODUCTO"
   ========================================================= */

@media screen and (max-width: 767px) {

    /*
       Oculta toda la fila de encabezados:
       Producto / Cantidad / Subtotal.
       La información del producto sigue visible.
    */
    .cart-table-improved thead,
    .cart-table-improved thead tr,
    .cart-table-improved thead th,
    .cart-table-improved thead th:first-child {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Evita espacio vacío debajo del título Productos */
    .cart-table-improved tbody {
        margin-top: 0 !important;
    }

    .card-body-custom {
        padding-top: 0 !important;
    }
}

/*MI CARRITO MÓVIL — MOSTRAR PAPELERA - Oculta subtotal por producto para liberar espacio*/

@media screen and (max-width: 767px) {

    /* La tabla debe ajustarse al ancho del celular */
    .cart-table-improved,
    .cart-table-improved.table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    /* Ocultar la columna Subtotal en móvil */
    .cart-table-improved thead th:nth-child(3),
    .cart-table-improved tbody td:nth-child(3) {
        display: none !important;
    }

    /* Ancho de Producto */
    .cart-table-improved thead th:first-child,
    .cart-table-improved tbody td:first-child {
        width: 56% !important;
        padding: 12px 8px !important;
    }

    /* Ancho de Cantidad */
    .cart-table-improved thead th:nth-child(2),
    .cart-table-improved tbody td:nth-child(2) {
        width: 30% !important;
        padding: 12px 4px !important;
        text-align: center !important;
    }

    /* Mostrar última columna: papelera */
    .cart-table-improved thead th:last-child,
    .cart-table-improved tbody td:last-child {
        display: table-cell !important;
        width: 14% !important;
        padding: 12px 4px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* Oculta el título de la columna de acciones */
    .cart-table-improved thead th:last-child {
        font-size: 0 !important;
    }

    /* Mostrar el botón de eliminar */
    .cart-table-improved .btn-remove-improved {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: static !important;

        width: 34px !important;
        height: 34px !important;
        margin: 0 auto !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        color: #C0392B !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }

    .cart-table-improved .btn-remove-improved .fa {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;

        color: #C0392B !important;
        font-size: 17px !important;
    }

    /* Producto más compacto */
    .cart-product-improved {
        gap: 8px !important;
    }

    .cart-product-image-improved {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }

    /* Control de cantidad más compacto */
    .quantity-control-improved {
        transform: scale(0.9) !important;
        transform-origin: center !important;
    }
}