/* ============================
   ESTILOS POR FILA Y COLUMNA
   ============================ */

/* ===== FILA 1 ===== */
.fila-1-col-1 { background: #F0F0F0 !important; }
.fila-1-col-2 { background: #FFFFFF !important; }
.fila-1-col-3 { background: #FFFFFF !important; }
.fila-1-col-4 { background: #FFFFFF !important; }

/* ===== FILA 2 ===== */
.fila-2-col-1 { background: #F0F0F0 !important; }
.fila-2-col-2 { background: #F9F9F9 !important; }
.fila-2-col-3 { background: #F9F9F9 !important; }
.fila-2-col-4 { background: #F9F9F9 !important; }

/* ===== FILA 3 ===== */
.fila-3-col-1 { background: #F0F0F0 !important; }
.fila-3-col-2 { background: #FFFFFF !important; }
.fila-3-col-3 { background: #FFFFFF !important; }
.fila-3-col-4 { background: #FFFFFF !important; }

/* ===== FILA 4 ===== */
.fila-4-col-1 { background: #F0F0F0 !important; }
.fila-4-col-2 { background: #F9F9F9 !important; }
.fila-4-col-3 { background: #F9F9F9 !important; }
.fila-4-col-4 { background: #F9F9F9 !important; }

/* ===== FILA 5 ===== */
.fila-5-col-1 { background: #F0F0F0 !important; }
.fila-5-col-2 { background: #FFFFFF !important; }
.fila-5-col-3 { background: #FFFFFF !important; }
.fila-5-col-4 { background: #FFFFFF !important; }

/* ============================
   MEDIDAS FIJAS TABLA ESCRITORIO
   ============================ */

.fila-1-col-1, .fila-1-col-2,
.fila-2-col-1, .fila-2-col-2,
.fila-3-col-1, .fila-3-col-2,
.fila-4-col-1, .fila-4-col-2,
.fila-5-col-1, .fila-5-col-2 {
    width: 200px !important;
    height: 142px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.fila-1-col-3,
.fila-2-col-3,
.fila-3-col-3,
.fila-4-col-3,
.fila-5-col-3 {
    width: 338px !important;
    height: 142px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.fila-1-col-4,
.fila-2-col-4,
.fila-3-col-4,
.fila-4-col-4,
.fila-5-col-4 {
    width: 259px !important;
    height: 142px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.fila-head-col-1 { width: 200px !important; height: 56px !important; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.fila-head-col-2 { width: 200px !important; height: 56px !important; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.fila-head-col-3 { width: 338px !important; height: 56px !important; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.fila-head-col-4 { width: 259px !important; height: 56px !important; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }

/* ============================
   UNIFICAR COLOR DE TODAS LAS LÍNEAS
   ============================ */

.tabla-no-carrusel__field,
.tabla-no-carrusel__field--first,
.tabla-no-carrusel__field--last,
.tabla-no-carrusel__body {
    border-color: #C8D9D0 !important;
}

.tabla-no-carrusel__body { border-bottom: 1px solid #C8D9D0 !important; }
.tabla-no-carrusel__body--last-row { border-bottom: 1px solid #C8D9D0 !important; }
.tabla-no-carrusel__field-head { min-height: 56px; }

/* ============================
   CARRUSEL BASE (visible de 0px a 991px)
   ============================ */

.carrusel-tabla__container {
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    padding-top: 32px;
    padding-bottom: 24px;
    padding-left: 16px;   /* añadido */
    padding-right: 16px;  /* añadido */
    box-sizing: border-box; /* añadido, para que el padding no rompa el ancho */
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.carrusel-tabla__container.carrusel-tabla--dragging { cursor: grabbing; }

.tabla-no-carrusel__container {
    display: none; /* oculto hasta 992px */
    margin: 0 auto;
}

.carrusel-tabla__h2 {
    text-align: center;
    padding: 0 16px;
    margin-bottom: 32px;
    margin-top: 80px;
}

.carrusel-tabla__wrapper {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    transition: transform 0.3s ease;
    will-change: transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.carrusel-tabla__slide { flex: 0 0 auto; }

.carrusel-tabla__field { padding: var(--size-space-16, 16px); position: relative; }

.carrusel-tabla__field--radius-top {
    border-radius: var(--border-radius-l, 16px) var(--border-radius-l, 16px) 0 0;
    border-right: var(--border-width-s, 1px) solid var(--Color-Border-General-Inverse, #699282);
    border-left: var(--border-width-s, 1px) solid var(--Color-Border-General-Inverse, #699282);
    background: var(--Color-Surface-General-Inverse, #00402A);
}

.carrusel-tabla__field--green { position: relative; background: var(--Color-Surface-General-Inverse, #00402A); }

.carrusel-tabla__field--gray {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
    border-bottom: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
    border-left: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
    background: var(--Color-Category-General-3, #F0F0F0);
}

.carrusel-tabla__field--white {
    border-right: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
    border-bottom: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
    border-left: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
    background: var(--Color-Form-Surface-General, #FFF);
}

.carrusel-tabla__field--radius-bottom { border-radius: 0 0 var(--border-radius-l, 16px) var(--border-radius-l, 16px); }

.carrusel-tabla__heading {
    color: var(--Color-Content-General-Inverse, #FFF);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.carrusel-tabla__body { margin-bottom: 0; }
.carrusel-tabla__strong { font-weight: 600; }

.carrusel-tabla__icon-wrapper {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carrusel-tabla__icon { width: 24px; height: 24px; display: block; object-fit: contain; }

.carrusel-tabla__card { min-width: 328px; max-width: 328px; }

/* ============================
   NAVEGACIÓN DEL CARRUSEL
   ============================ */

.carrusel-tabla__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 32px;
}

.carrusel-tabla__button {
    background-color: #FFFFFF;
    border: 1px solid var(--Color-Border-General-1, #C8D9D0);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0;
    transition: all 0.3s ease;
}

.carrusel-tabla__button .carrusel-tabla__icon { width: 14px; height: 14px; }
.carrusel-tabla__button:disabled { opacity: 0.4; cursor: not-allowed; }
.carrusel-tabla__button:disabled path { cursor: not-allowed; fill: var(--Color-Content-Interactive-Disabled, #BFBFBF); }

.carrusel-tabla__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 32px;
    gap: 6px;
    margin: 0 8px;
    padding: 0;
    background-color: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.carrusel-tabla__bullet {
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0;
    border: 1.5px solid var(--Color-Semantic-Success-1, #007F33);
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    flex: 0 0 auto;
    transition: all 0.3s ease;
}

.carrusel-tabla__bullet.active { background-color: var(--Color-Semantic-Success-1, #007F33); }
.carrusel-tabla__bullet--dim { opacity: 0.5; transform: scale(0.8); }

/* ============================
   TOGGLE DE TEXTO
   (por defecto, <576px: texto corto)
   ============================ */
.texto-precio--especifico { display: none; }
.texto-precio--default { display: block; }

.swiper-articulos-3 .swiper-slide {
  width: 304px !important; /* antes 304px */
}
.contenedorTarjetaConParteGris {
  width: 285px !important;
}
/* ============================
   576px – 991px: sigue el carrusel, pero con cards más anchas (304px)
   y ya con el texto largo
   ============================ */
@media (min-width: 576px) {
    .carrusel-tabla__container {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .texto-precio--especifico { display: block; }
    .texto-precio--default { display: none; }
    
    
    .carrusel-tabla__card {
        display: flex;
        width: 304px;
        min-width: 304px;
        max-width: 304px;
        height: 474px;
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        border-radius: 16px;
        border-top: 1px solid var(--Color-Border-General-1, #C8D9D0);
        border-right: 1px solid var(--Color-Border-General-1, #C8D9D0);
        border-bottom: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
        border-left: 1px solid var(--Color-Border-General-1, #C8D9D0);
        overflow: hidden;
        box-sizing: border-box;
    }

    .carrusel-tabla__field--radius-top.carrusel-tabla__field--green {
        display: flex;
        width: 304px;
        min-height: 56px;
        padding: var(--size-space-16, 16px);
        justify-content: center;
        align-items: center;
        gap: 0;
        align-self: stretch;
        border-top: var(--border-width-none, 0) solid var(--Color-Border-General-Inverse, #699282);
        border-right: var(--border-width-s, 1px) solid var(--Color-Border-General-Inverse, #699282);
        border-bottom: var(--border-width-none, 0) solid var(--Color-Border-General-Inverse, #699282);
        border-left: var(--border-width-s, 1px) solid var(--Color-Border-General-Inverse, #699282);
        background: var(--Color-Surface-General-Inverse, #00402A);
        box-sizing: border-box;
    }

    .carrusel-tabla__field--gray {
        display: flex;
        width: 304px;
        min-height: 56px;
        padding: var(--size-space-16, 16px);
        justify-content: center;
        align-items: center;
        gap: var(--size-space-8, 8px);
        align-self: stretch;
        border-top: var(--border-width-none, 0) solid var(--Color-Border-General-1, #C8D9D0);
        border-right: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
        border-bottom: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
        border-left: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
        background: var(--Color-Category-General-3, #F0F0F0);
        box-sizing: border-box;
    }

    .carrusel-tabla__field--white {
        display: flex;
        width: 304px;
        min-height: 56px;
        padding: var(--size-space-16, 16px);
        justify-content: center;
        align-items: center;
        gap: 0;
        align-self: stretch;
        border-top: var(--border-width-none, 0) solid var(--Color-Border-General-1, #C8D9D0);
        border-right: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
        border-bottom: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
        border-left: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
        background: var(--Color-Form-Surface-General, #FFF);
        box-sizing: border-box;
    }
    .carrusel-tabla__h2 {
    text-align: center;
    padding: 0 16px;
    margin-bottom: 32px;
    margin-top: 80px;
}
}

/* ============================
   BREAKPOINT PRINCIPAL: 992px+
   Aquí se oculta el carrusel y se muestra la tabla de escritorio
   ============================ */
@media (min-width: 992px) {

    .carrusel-tabla__container { display: none; }

    .carrusel-tabla {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tabla-no-carrusel__container {
        display: block;
        min-width: 900px;
        max-width: 1200px;
        padding-bottom: 40px;
        border-radius: var(--border-radius-l, 16px);
        overflow: hidden;
    }

    .carrusel-tabla__h2 {
        margin-top: 20px; }

    .tabla-no-carrusel__heading { display: flex; }

    .tabla-no-carrusel__field-head {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25%;
        padding: 16px 18.8px;
        background: var(--Color-Surface-General-Inverse, #00402A);
        border-top: var(--border-width-none, 0) solid var(--Color-Border-General-Inverse, #699282);
        border-right: var(--border-width-s, 1px) solid var(--Color-Border-General-Inverse, #699282);
        border-bottom: var(--border-width-none, 0) solid var(--Color-Border-General-Inverse, #699282);
    }

    .tabla-no-carrusel__field-head-first {
        border-radius: var(--border-radius-l, 16px) 0 0 0;
        border-left: var(--border-width-s, 1px) solid var(--Color-Border-General-Inverse, #699282);
    }

    .tabla-no-carrusel__field-head-last { border-radius: 0 var(--border-radius-l, 16px) 0 0; }

    .tabla-no-carrusel__field {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 16px 18.8px;
        width: 25%;
        text-align: center;
    }

    .tabla-no-carrusel__field--first { border-left: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0); }
    .tabla-no-carrusel__field--last { border-right: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0); }
    .tabla-no-carrusel__field--radius-bottom-left { border-radius: 0 0 0 var(--border-radius-l, 16px); }
    .tabla-no-carrusel__field--radius-bottom-right { border-radius: 0 0 var(--border-radius-l, 16px) 0; }

    .tabla-no-carrusel__text--white {
        margin-bottom: 0;
        color: var(--Color-Content-General-Inverse, #FFF);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .tabla-no-carrusel__text--black { color: var(--Color-Content-General-1, #2C2C2C); margin-bottom: 0; text-align: center; }
    .tabla-no-carrusel__text--strong { font-weight: 600; }

    .tabla-no-carrusel__icon-wrapper {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tabla-no-carrusel__icon { width: 24px; height: 24px; display: block; object-fit: contain; }

    .tabla-no-carrusel__body {
        display: flex;
        border-bottom: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
    }

    .tabla-no-carrusel__body--gray .tabla-no-carrusel__field { background: var(--Color-Category-General-3, #F0F0F0); }
    .tabla-no-carrusel__body--white .tabla-no-carrusel__field { background: var(--Color-Surface-General-1, #FFF); }
    .tabla-no-carrusel__body--last-row { border-bottom: none; }
}

@media (min-width: 1200px) {
    .tabla-no-carrusel__container { min-width: 997px !important; }
}

@media (min-width: 1920px) {
    .tabla-no-carrusel__container { min-width: 1272px; }
}

/* ============================
   ANCHO REAL DE LA TABLA (siempre, a partir de 992px)
   ============================ */

.tabla-no-carrusel__container {
    width: 997px !important;
    min-width: 997px !important;
    max-width: 997px !important;
    margin: 0 auto;
}

.tabla-no-carrusel__field,
.tabla-no-carrusel__field-head {
    border-left: none !important;
    border-right: none !important;
}

.tabla-no-carrusel__body { border-bottom: 1px solid #C8D9D0 !important; }
/* ============================
   COLOR DE TEXTO SUBTÍTULO CARRUSEL
   (fuerza #2C2C2C, ya que Bootstrap
   estaba aplicando #212529 heredado)
   ============================ */

.carrusel-tabla__subtitle,
.carrusel-tabla__subtitle.body_regular_m {
    color: #2C2C2C !important;
}
/* ============================
   COLOR DE TEXTO CABECERA TABLA
   (fuerza blanco, ya que estaba
   heredando #212529 del body)
   ============================ */

.tabla-no-carrusel__field-head,
.tabla-no-carrusel__field-head * {
    color: #FFFFFF !important;
}