/* mdx-catalog v0.27 */

.tw-bs .mdx-catalog {
    --mdx-card-min-height: 390px;
}

.tw-bs .mdx-catalog,
.mdx-mis-canjes-container {
    font-family: 'Exo', sans-serif;
}

/* ---------------------------------------------------------------
   Skeleton loading
   --------------------------------------------------------------- */
@keyframes mdx-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.tw-bs .mdx-sk {
    background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
    background-size: 1200px 100%;
    animation: mdx-shimmer 1.4s infinite linear;
    border-radius: 3px;
    margin-bottom: 10px;
}
.tw-bs .mdx-sk-img   { padding-top: 44.79%; height: 0; margin-bottom: 0; }
.tw-bs .mdx-sk-title { height: 20px; width: 75%; }
.tw-bs .mdx-sk-brand { height: 14px; width: 45%; }
.tw-bs .mdx-sk-labels { height: 18px; width: 60%; }
.tw-bs .mdx-sk-line  { height: 13px; width: 90%; }
.tw-bs .mdx-sk-line--short { width: 55%; }

/* ---------------------------------------------------------------
   Barra de filtros: cada select ocupa su col de Bootstrap
   --------------------------------------------------------------- */
.tw-bs .mdx-catalog-filters .selectize-control {
    width: 100%;
}

/* Opciones del dropdown: altura uniforme con o sin bandera */
.tw-bs .mdx-catalog-filters .selectize-dropdown [data-selectable],
.tw-bs .mdx-catalog-filters .selectize-dropdown .optgroup-header {
    padding: 6px 12px;
    line-height: 1.6;
}


/* ---------------------------------------------------------------
   Card: imagen fija 96:43
   --------------------------------------------------------------- */
.tw-bs .mdx-card-img-wrap {
    width: 100%;
    padding-top: 44.79%;    /* 43/96 = ratio 96:43 */
    position: relative;
    background: #f5f5f5;
    overflow: hidden;
}
.tw-bs .mdx-card-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

/* ---------------------------------------------------------------
   Card: columna y panel
   --------------------------------------------------------------- */
.tw-bs .mdx-catalog-col {
    margin-bottom: 20px;
}
.tw-bs .mdx-catalog-card {
    border-radius: 0;       /* HP brand: sin border-radius */
    box-shadow: none;       /* HP brand: sin sombra */
    overflow: hidden;
    min-height: var(--mdx-card-min-height);
}
.tw-bs .mdx-catalog-card > .panel-heading {
    border-radius: 0;
}

/* Badge "Sin stock" — esquina superior izquierda, sin opacidad del panel locked */
.tw-bs .mdx-ribbon-stock {
    position: absolute;
    top: 0;
    left: 0;
    background: #FF5050;    /* Orange Bloom */
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 10px;
    pointer-events: none;
    z-index: 10;
}

/* ---------------------------------------------------------------
   Card link: sin subrayado ni cambio de color
   --------------------------------------------------------------- */
.tw-bs .mdx-card-link,
.tw-bs .mdx-card-link:hover,
.tw-bs .mdx-card-link:focus {
    text-decoration: none;
    color: inherit;
    display: block;
    outline: unset;
    outline-offset: unset;
}
.tw-bs .mdx-catalog-card:hover {
    border-color: #aaa;
    box-shadow: none;
}

/* ---------------------------------------------------------------
   Detalle: galería de imágenes
   --------------------------------------------------------------- */
.tw-bs .mdx-detail-gallery {
    margin-bottom: 20px;
}
.tw-bs .mdx-detail-main-img {
    text-align: center;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 10px;
    background: #fff;
}
.tw-bs .mdx-detail-main-img img {
    max-height: 320px;
    width: auto;
    max-width: 100%;
}
.tw-bs .mdx-detail-thumbs {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px 0;
}
.tw-bs .mdx-detail-thumb {
    display: table-cell;
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 2px solid #ddd;
    border-radius: 0;
    padding: 3px;
    cursor: pointer;
    background: #fff;
}
.tw-bs .mdx-detail-thumb.active {
    border-color: var(--v3-color-button);
}

/* ---------------------------------------------------------------
   Detalle: secciones de descripcion / T&C
   --------------------------------------------------------------- */
.tw-bs .mdx-detail-section {
    margin-bottom: 24px;
}
.tw-bs .mdx-detail-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}

/* ---------------------------------------------------------------
   Detalle: panel derecho
   --------------------------------------------------------------- */
.tw-bs .mdx-detail-panel {
    position: sticky;
    top: 80px;
}
.tw-bs .mdx-detail-brand {
    display: table;
    width: 100%;
    margin-bottom: 14px;
}
.tw-bs .mdx-detail-brand-logo {
    display: table-cell;
    width: 60px;
    max-height: 40px;
    object-fit: contain;
    vertical-align: middle;
    padding-right: 10px;
}
.tw-bs .mdx-detail-brand > div {
    display: table-cell;
    vertical-align: middle;
}

/* ---------------------------------------------------------------
   Detalle: total HP
   --------------------------------------------------------------- */
.tw-bs .mdx-detail-total {
    margin: 14px 0;
    padding: 10px 14px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
}
.tw-bs .mdx-detail-pts {
    font-size: 28px;
    font-weight: 700;
    color: #337ab7;
    line-height: 1.2;
}
/* ---------------------------------------------------------------
   Card: estado según puntos del usuario
   --------------------------------------------------------------- */
.tw-bs .mdx-catalog-card.mdx-card--locked {
    opacity: 0.55;
    filter: grayscale(60%);
    transition: opacity 0.2s, filter 0.2s;
}
.tw-bs .mdx-card-link:hover .mdx-catalog-card.mdx-card--locked {
    opacity: 0.8;
    filter: grayscale(20%);
}
.tw-bs .mdx-card--locked-badge {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 1;
}
.tw-bs .mdx-card--locked-badge .label {
    display: block;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 10px;
    border-radius: 0;
    opacity: 1;
}
.tw-bs .mdx-card-link {
    position: relative;
}


.tw-bs .mdx-hp-icon {
    font-size: 20px;
    margin-right: 4px;
    vertical-align: middle;
    color: #337ab7;
}

/* Anchos de columna: width:100% para ocupar el contenedor */
.tw-bs .mdx-mis-canjes-table {
    width: 100%;
}

/* Celdas: truncar texto largo */
.tw-bs .mdx-mis-canjes-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hover: mostrar texto completo en varias líneas */
.tw-bs .mdx-mis-canjes-table td:hover {
    white-space: normal;
    overflow: visible;
}


.tw-bs .mdx-mis-canjes-table .mdx-col-merchant-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    padding: 2px;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -2px;
}

/* Columna puntos: alineación icono + texto */
.tw-bs .mdx-col-puntos {
    line-height: 20px;
    vertical-align: middle;
}
.tw-bs .mdx-pts-icon {
    height: 16px;
    width: auto;
    vertical-align: middle;
    margin-right: 3px;
    margin-top: -2px;
}

/* Header y sort arrows: cubiertos globalmente por hp-bootcamp-v1-skin.css */

/* ---------------------------------------------------------------
   Popup detalle del canje
   --------------------------------------------------------------- */
.mdx-canjes-mfp .mfp-content {
    max-width: 480px;
}
.mdx-canje-popup {
    background: #fff;
    font-family: 'Exo', sans-serif;
}
.base-v3 .mdx-canje-popup  button.mfp-close{
    color: #fff !important;
    position: absolute;
}


/* Header negro */
.mdx-cp-header {
    background: #000;
    color: #fff;
    padding: 18px 22px 14px;
}
.mdx-cp-ref {
    display: block;
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mdx-cp-header-brand {
    display: table;
    width: 100%;
}
.mdx-cp-merchant-logo {
    display: table-cell;
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: #fff;
    border-radius: 2px;
    padding: 4px;
    vertical-align: middle;
}
.mdx-cp-header-brand > div {
    display: table-cell;
    vertical-align: middle;
    padding-left: 14px;
}
.mdx-cp-title,
.tw-bs h3.mdx-cp-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.3;
}
.mdx-cp-variacion {
    font-size: 13px;
    color: #ccc;
    line-height: 1.4;
}

/* Logo merchant en la grilla */
.mdx-col-merchant-logo {
    height: 20px;
    width: auto;
    max-width: 32px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -2px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    padding: 1px;
}

/* Body */
.mdx-cp-body {
    padding: 18px 22px 10px;
}
.mdx-cp-row {
    display: table;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 9px 0;
}
.mdx-cp-row:last-child {
    border-bottom: 0;
}
.mdx-cp-label {
    display: table-cell;
    width: 90px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a5a5a;
    vertical-align: middle;
    padding-right: 12px;
}
.mdx-cp-val {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    color: #000;
    word-break: break-word;
}
.mdx-cp-badge {
    font-size: 12px;
}
.mdx-cp-puntos {
    font-size: 20px;
    font-weight: 700;
    color: var(--v3-color-button, #024AD8);
    line-height: 1.2;
}
.mdx-cp-puntos .mdx-pts-icon {
    height: 18px;
    margin-top: -3px;
}
.mdx-cp-codigo {
    font-size: 15px;
    color: #000;
    background: #f5f5f5;
    padding: 2px 6px;
    border: 1px solid #ddd;
    border-radius: 2px;
    letter-spacing: 0.05em;
}
.mdx-cp-code-exp {
    font-size: 11px;
    color: #5a5a5a;
    display: block;
    margin-top: 3px;
}

/* Footer con link Maslow */
.mdx-cp-footer {
    padding: 14px 0 6px;
}

/* Ícono en el link de la columna variación */
.mdx-canje-detail-link {
    text-decoration: none;
    color: inherit;
}
.mdx-canje-detail-link:hover,
.mdx-canje-detail-link:focus {
    color: var(--v3-color-button, #024AD8);
    text-decoration: none;
}
.mdx-canje-detail-ico {
    font-size: 11px;
    color: var(--v3-color-primario, #0071CE);
    margin-left: 4px;
    opacity: 0.7;
}
.mdx-canje-detail-link:hover .mdx-canje-detail-ico {
    opacity: 1;
}

/* Iconos FA 4.7 por estado en labels del catálogo */
.base-v3.skin-v1 .label::before {
    font-family: 'FontAwesome';
    margin-right: 4px;
    font-style: normal;
}
.base-v3.skin-v1 .label-success::before { content: '\f00c'; } /* fa-check        */
.base-v3.skin-v1 .label-info::before    { content: '\f252'; } /* fa-hourglass-half */
.base-v3.skin-v1 .label-danger::before  { content: '\f00d'; } /* fa-times        */
.base-v3.skin-v1 .label-warning::before { content: '\f0e2'; } /* fa-undo (refund)*/

/* Paginación: ver hp-bootcamp-v1-skin.css § 5 */