/**
 * Estilos para el Slider de Beneficios
 */

/* Contenedor principal del shortcode */
.fidelizacion-slider-wrapper {
    position: relative;
    padding-bottom: 40px;
    margin: 0 auto;
    width: 100%;
}

.fidelizacion-slider-wrapper .swiper {
    padding: 0 10px;
}

/* Slider (Swiper) */
.fidelizacion-slider {
    overflow: hidden;
}

/* Estilo de la tarjeta de beneficio (slide) */
.beneficio-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

.beneficio-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* --- Imagen Superior --- */
.beneficio-card__image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-top: 4px solid #DD1D21 !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
}

.beneficio-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.beneficio-card__image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
}

/* Tag/Etiqueta sobre la imagen */
.beneficio-card__tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    background-color: #FFFFFF;
    color: #404040;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- Contenido de la Tarjeta --- */
.beneficio-card__content {
    padding: 20px 24px;
    flex-grow: 1;
    margin-top: -5%;
    background-color: #FFF;
    z-index: 2;
    border-radius: 16px 16px 0 0;
}

.beneficio-card__title {
    font-family: "Shell", Sans-serif;
    line-height: 100%;
    margin: 0 0 8px 0;
    color: #404040;
}

.beneficio-card__title a {
    text-decoration: none;
    color: inherit;
}

.beneficio-card__title a:hover {
    color: #D90000;
}

.beneficio-card__excerpt {
    font-family: "Shell", Sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    font-size: 15px;
    color: #404040;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Footer de la Tarjeta (Metadatos) --- */
.beneficio-card__footer {
    display: flex;
    justify-content: space-between;
    padding: 16px 24px 20px 24px;
    border-top: 1px solid #B3B3B3;
    background-color: #FFFFFF;
    gap: 16px;
}

.beneficio-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Espacio entre icono y texto */
    font-size: 14px;
    color: #666;
    /* Evitar que el texto se rompa */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beneficio-card__meta svg {
    flex-shrink: 0;
    /* Evita que el icono se encoja */
    fill: #888;
}

/* --- Botón --- */
.beneficio-card__button_container {
    background-color: #FFFFFF;
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 24px 20px 24px;
}

.beneficio-card__button {
    font-size: 14px !important;
    width: 100%;
    background-color: #DD1D21;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.beneficio-card__button:hover {
    background-color: #F37375;
}

/* * === Estilos de las Flechas de Navegación ===
 */

.fidelizacion-slider-prev,
.fidelizacion-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 20px));
    z-index: 10;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease;
}

.fidelizacion-slider-prev:hover,
.fidelizacion-slider-next:hover {
    background-color: #DD1D21;
}

.fidelizacion-slider-prev {
    left: 16px;
}

.fidelizacion-slider-next {
    right: 16px;
}

/* Estilo del icono (SVG de Swiper) */
.fidelizacion-slider-prev::after,
.fidelizacion-slider-next::after {
    font-family: 'swiper-icons';
    font-size: 18px;
    font-weight: 900;
    color: #FFFFFF;
}

/* --- Paginación (Barra de Progreso) --- */
.fidelizacion-slider-pagination {
    position: absolute;
    bottom: 0 !important;
    top: unset !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: 100%;
    height: 16px !important;
    background-color: #D9D9D9;
    border-radius: 20px;
}

.fidelizacion-slider-pagination .swiper-pagination-progressbar-fill {
    background-color: #757575;
    border-radius: 20px;
}

/* Estado de carga AJAX para el slider */
#fidelizacion-slider-container.fidelizacion-loading {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.fidelizacion-no-results {
    text-align: center;
    padding: 40px;
    font-size: 18px;
    color: #555;
}

/* * === Estilos de los Filtros ===
 */
.fidelizacion-filters-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

/* Buscador */
.fidelizacion-filter-search {
    position: relative;
    display: flex;
    flex-grow: 1;
    min-width: 250px;
    overflow: hidden;
    align-items: center;
}

.fidelizacion-filter-search input {
    font-family: "Shell", Sans-serif;
    color: #49454F;
    border: none;
    border-radius: 28px;
    background-color: #FFF;
    padding: 12px 16px;
    flex-grow: 1;
}

.fidelizacion-filter-search input::placeholder {
    color: #49454F;
}

.fidelizacion-filter-search input:focus {
    outline: none;
    box-shadow: none;
}

.fidelizacion-filter-search button {
    border: none;
    padding: 12px 8px !important;
    cursor: pointer;
    position: absolute;
    right: 2%;
    top: calc(50% - 28px);
    background: transparent !important;
}

.fidelizacion-filter-search button:hover {
    background-color: unset !important;
}

.fidelizacion-filter-search button svg {
    display: block;
}

/* Selects */
.fidelizacion-filter-select-group {
    flex-grow: 1;
    min-width: 150px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: stretch;
    position: relative;
}

.fidelizacion-filter-select-group svg {
    position: absolute;
    left: 5%;
    top: calc(50% - 12px);
}

.fidelizacion-filter-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex-grow: 1;
}

.fidelizacion-filter-selects select {
    border: none;
    border-radius: 28px;
    background-color: #fff;
    color: #49454F;
    font-family: "Shell", Sans-serif;
    width: 100%;
}

#fidelizacion-filter-clear {
    border: none;
    border-radius: 100px;
    background-color: #FBCE07;
    color: #404040;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#fidelizacion-filter-clear:hover {
    background-color: #FFEB94;
}

/* Estilos personalizados carousel */
.fidelizacion-slider-wrapper .swiper-pagination-progressbar {
    left: 0 !important;
}

.fidelizacion-slider-wrapper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: #757575;
}

.fidelizacion-slider-wrapper .swiper-button-prev.fidelizacion-slider-prev,
.fidelizacion-slider-wrapper .swiper-button-prev.fidelizacion-slider-next {
    background-color: #FFFFFF80;
}

.fidelizacion-slider-wrapper .swiper-button-prev.fidelizacion-slider-prev,
.fidelizacion-slider-wrapper .swiper-button-next.fidelizacion-slider-next {
    background-color: #FFFFFF80;
    padding: 12px 18px !important;
}

.fidelizacion-slider-wrapper .swiper-button-prev:after,
.fidelizacion-slider-wrapper .swiper-button-next:after{
    font-size: 24px !important;
    color: #404040;
}

/* * === Estilos del Popup (Modal) ===
 */
#fidelizacion-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

#fidelizacion-popup-modal {
    position: relative;
    background-color: #fff;
    border-radius: 16px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: fidelizacion-popup-fadein 0.3s ease;
}

@keyframes fidelizacion-popup-fadein {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#fidelizacion-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    color: #1D1B20;
    padding: 0;
    background: transparent !important;
}

#fidelizacion-popup-content {
    padding: 40px;
}

/* Loader del popup */
.fidelizacion-popup-loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #D90000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: fidelizacion-popup-spin 1s linear infinite;
    margin: 100px auto;
}

@keyframes fidelizacion-popup-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Estilos del contenido del popup */
.fidelizacion-popup__title {
    font-size: 48px;
    font-weight: 700;
    color: #404040;
    margin: 0 0 12px 0;
    padding-right: 40px;
    line-height: 100%;
}

.fidelizacion-popup__tag {
    display: inline-block;
    padding: 4px 12px;
    background-color: #DD1D21;
    color: #FFF;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 20px;
}

.fidelizacion-popup__image-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.fidelizacion-popup__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    height: 220px !important;
}

.fidelizacion-popup__content-main {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.fidelizacion-popup__content-main p {
    margin-bottom: 1em;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #67656C;
}

.fidelizacion-popup__condiciones {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #eee;
}

.fidelizacion-popup__condiciones .condiciones {
    display: block;
    margin-bottom: 12px;
    color: #67656C;
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
}

.fidelizacion-popup__condiciones ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 12px;
}

.fidelizacion-popup__condiciones li {
    margin-bottom: 8px;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #67656C;
}

.fidelizacion-popup__meta-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid #eee;
    margin-top: 24px;
    flex-wrap: wrap;
}

.fidelizacion-popup__meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #757575;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0%;
}

.fidelizacion-popup__meta-item svg {
    fill: #888;
    flex-shrink: 0;
}

.fidelizacion-popup__meta-item strong {
    color: #1E1E1E;
}

/* Estilos para los días (L M M J V S D) */
.fidelizacion-popup__dias {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.fidelizacion-popup__dia-item {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #FCF8E8;
    color: #757575;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
}

.fidelizacion-popup__dia-item.activo {
    background-color: #FBCE07;
    color: #757575;
}

.fidelizacion-popup__bottom-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.fidelizacion-popup__bases-button {
    display: inline-block;
    width: auto;
    padding: 10px 16px;
    background-color: #DD1D21;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

.fidelizacion-popup__bases-button:hover {
    background-color: #F37375;
}

/* === ESTILOS CUPONES === */

/* Tabs Container */
.fidelizacion-tabs-wrapper {
    display: flex;
    gap: 16px;
    margin-bottom: 30px;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 10px;
}

.fidelizacion-tab-button {
    background: none;
    border: none;
    font-family: "Shell", Sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #DD1D21 !important;
    background-color: #FFFFFF !important;
    padding: 16px 84px !important;
    cursor: pointer;
    border-radius: 100px;
    box-shadow: 0px 4px 4px 0px #00000026;
    transition: all 0.3s ease;
}

.fidelizacion-tab-button:hover {
    color: #DD1D21 !important;
    background-color: #FFFFFF !important;
}

.fidelizacion-tab-button.active {
    background-color: #DD1D21 !important;
    color: #FFFFFF !important;
}

/* Tarjeta de Cupón (Ticket Style) */
.coupon-card {
    display: flex;
    background-color: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 4px 4px 0px #00000040;
    height: 100%;
    min-height: 180px; 
    position: relative;
    transition: transform 0.2s ease;
}

.coupon-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

/* Muesca (Notch) Semicircular izquierda */
.coupon-card__notch {
    position: absolute;
    left: -15%;
    top: 50%;
    transform: translateY(-50%);
    width: 127px;
    height: 127px;
    background-color: #FFFFFF;
    border-radius: 50%;
    z-index: 2;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.05); /* Sombra interna sutil */
}

/* Lado Izquierdo (Texto) */
.coupon-card__left {
    flex: 1;
    padding: 24px 16px 24px 50px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coupon-card__tag {
    display: inline-block;
    background-color: #F2F2F2;
    color: #404040;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 16px;
    margin-bottom: 8px;
    align-self: flex-start;
}

.coupon-card__title {
    font-family: "Shell", Sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #1D1B20;
    margin: 0 0 4px 0;
    line-height: 1.2;
}
/*
.coupon-card__desc {
    font-family: "Shell", Sans-serif;
    font-size: 16px;
    color: #404040;
    margin: 0 0 12px 0;
    font-weight: 600;
}
*/
.coupon-card__meta {
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    color: #757575;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.coupon-card__meta svg {
    fill: #757575;
    width: 14px;
    height: 14px;
}

/* Lado Derecho (Imagen) */
.coupon-card__right {
    width: 40%;
    position: relative;
    overflow: hidden;
}

.coupon-card__right img {
    height: 100% !important;
}

/* Borde curvo de la imagen (Overlay blanco) */
.coupon-card__right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 20px;
    background: radial-gradient(circle at left center, transparent 20px, #fff 21px); 
    background: linear-gradient(to right, #FFFFFF 0%, transparent 100%);
    z-index: 1;
    width: 15%;
}

.coupon-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* === NUEVOS ESTILOS: ÚLTIMOS MOVIMIENTOS === */

.fidelizacion-movements-card {
    font-family: "Shell", Sans-serif;
    max-width: 100%;
}

.fidelizacion-movements-title {
    font-size: 24px;
    font-weight: 700;
    color: #404040;
    margin: 0 0 20px 0;
}

.fidelizacion-movements-list {
    display: flex;
    flex-direction: column;
}

/* Fila individual del movimiento */
.movement-item {
    display: flex;
    align-items: center; /* Alineación vertical centrada */
    padding: 16px 0;
    border-bottom: 1px solid #EBEBEB; /* Línea separadora sutil */
    gap: 16px;
}

/* Icono (Flecha) */
.movement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Textos (Centro) */
.movement-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 4px;
}

.movement-name {
    font-size: 16px;
    font-weight: 600; /* Semi-bold */
    color: #404040;
    line-height: 1.2;
}

.movement-date {
    font-size: 16px;
    color: #404040;
    font-weight: 400;
}

/* Cantidad (Derecha) */
.movement-amount {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.amount-positive {
    color: #569A00; /* Verde Shell */
}

.amount-negative {
    color: #DD1D21; /* Rojo Shell */
}

/* Footer "Ver todo" */
.movement-footer {
    padding-top: 16px;
    text-align: right;
}

.movement-view-all {
    font-size: 14px;
    color: #757575;
    transition: color 0.3s;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;

}

.movement-view-all:hover {
    color: #404040;
}

#movimientos-datatable_paginate a {
    font-size: 16px;
}

#movimientos-datatable th {
    color: var(--e-global-color-text);
}

/* === VISTA COMPLETA DE MOVIMIENTOS === */

.fidelizacion-table-filters {
    display: flex;
    flex-flow: row nowrap; /* Forzar una sola línea en desktop */
    justify-content: space-between; 
    align-items: flex-end; /* Alinear al fondo para que los inputs coincidan */
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EBEBEB;
    width: 100%;
}

/* Grupo Izquierdo (Filtros) */
.filters-left-group {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap; /* Evitar que los filtros se monten */
}

/* Grupo Derecho (Buscador) */
.filters-right-group {
    flex-shrink: 0; /* Evitar que el buscador se encoja demasiado */
    width: 250px;   /* Ancho fijo o max-width para el buscador */
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 700;
    color: #1D1B20;
    line-height: 1;
}

.filter-group select,
.filter-group input {
    padding: 0 16px; /* Padding lateral */
    border: 1px solid #C4C4C4;
    border-radius: 8px;
    font-family: "Shell", Sans-serif;
    font-size: 14px;
    height: 40px; /* Altura fija idéntica para todos */
    line-height: 40px;
    box-sizing: border-box;
    background-color: #fff;
}

.filter-group select {
    min-width: 120px;
    cursor: pointer;
}

/* Input del Buscador Específico */
#mov-custom-search {
    width: 100%;
    border-radius: 8px; 
}

/* === MENÚ DE USUARIO (SHORTCODE) === */

.fidelizacion-user-menu-wrapper {
    position: relative;
    display: inline-block;
    font-family: "Shell", Sans-serif;
}

/* --- Trigger Desktop --- */
.user-trigger-desktop {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.user-name-text {
    font-size: 16px;
    font-weight: 700;
    color: #1D1B20;
}

.user-caret-icon {
    display: flex;
    align-items: center;
}

/* --- Trigger Mobile --- */
.user-trigger-mobile {
    display: none; /* Oculto por defecto en desktop */
    cursor: pointer;
}

/* --- Dropdown Menu --- */
.fidelizacion-user-dropdown {
    position: absolute;
    top: calc(100% + 15px); /* Un poco separado del trigger */
    right: 0;
    width: 260px;
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Sombra suave */
    padding: 24px 0 16px 0; /* Padding superior para separar del botón cerrar */
    z-index: 2; /* Requerimiento explícito */
    
    /* Estado inicial oculto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
}

/* Clase para mostrar el menú */
.fidelizacion-user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Lista de opciones */
.dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0 .4rem;
}

.dropdown-list li {
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.dropdown-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    text-decoration: none;
    color: #404040; /* Gris oscuro texto */
    font-size: 16px;
    font-weight: 400;
    transition: background-color 0.2s;
}

/* Iconos del menú */
.dd-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
}

/* Separador */
.dd-separator {
    height: 1px;
    background-color: #EEEEEE; /* Línea muy sutil */
    margin: 8px 24px; /* Margen lateral para que no toque los bordes */
}

/* Cerrar sesión (Estilo especial) */
.dd-logout {
    color: #DD1D21 !important; /* Rojo Shell */
}

/* === FORMULARIO DE PERFIL (SOLO LECTURA) === */

.profile-title {
    font-size: 24px;
    font-weight: 700;
    color: #404040;
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #EBEBEB;
}

.fidelizacion-profile-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 24px;
}

.form-group {
    flex: 1; /* Ocupar espacio igual */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #1D1B20;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-family: "Shell", Sans-serif;
    color: #666; /* Texto gris para indicar inactivo */
    background-color: #F5F5F5; /* Fondo gris claro */
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
    transition: border-color 0.2s;
}

/* Estilo al enfocar (aunque sea readonly, se ve bien) */
.form-group input:focus {
    border-color: #C4C4C4;
    background-color: #F0F0F0;
}

/* Cursor de prohibido para reforzar que no se edita (opcional) */
.form-group input[readonly] {
    cursor: default;
}

/* -------------------------------------------------------------------------
   1. HASTA 767px (Móviles / Pantallas pequeñas)
   ------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
        .fidelizacion-slider-prev,
    .fidelizacion-slider-next {
        display: none;
    }

    #fidelizacion-slider-container {
        padding: 0;
    }

    .fidelizacion-filters-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 0 !important;
    }

    .fidelizacion-filter-selects {
        flex-direction: column;
    }

    .fidelizacion-filter-selects select {
        width: 100%;
    }

    .fidelizacion-filter-search input,
    .fidelizacion-filter-selects select,
    #fidelizacion-filter-clear {
        font-size: 14px;
        padding: 9px 20px;
    }

    .fidelizacion-filter-selects select {
        padding: 9px 20px 9px 64px
    }

    .fidelizacion-filter-select-group svg {
        width: 12px;
        height: 12px;
        top: calc(50% - 6px);
    }

    .beneficio-card__title {
        font-size: 24px;
    }

    .beneficio-card__excerpt {
        display: none;
    }

    .beneficio-card__footer {
        border-top: none;
        flex-flow: column nowrap;
    }

    .fidelizacion-popup__title {
        font-size: 36px;
        line-height: 100%;
    }

    .fidelizacion-popup__meta-item {
        font-size: 14px;
    }

    .fidelizacion-popup__bottom-row {
        flex-flow: column nowrap;
        gap: 10px;
    }

    .fidelizacion-popup__content-main p {
        font-size: 20px;
        line-height: 120%;
    }

    .fidelizacion-popup__meta-item svg {
        width: 12px;
        height: 12px;
    }

    .fidelizacion-popup__bases-button {
        display: block;
        width: 100%;
    }

    .fidelizacion-movements-card {
        padding: 16px;
    }
    
    .movement-name {
        font-size: 14px;
    }
    
    .movement-date {
        font-size: 11px;
    }
    
    .movement-amount {
        font-size: 14px;
    }
    .fidelizacion-table-filters {
        flex-wrap: wrap; 
    }
    
    .filters-left-group {
        width: 100%;
        flex-wrap: wrap; 
    }
    
    .filters-right-group {
        width: 100%;
        margin-top: 10px;
    }
    
    .filter-group {
        width: 100%;
        flex: 1; 
    }
    .user-trigger-desktop {
        display: none;
    }

    .user-trigger-mobile {
        display: block;
    }

    .fidelizacion-user-dropdown {
        right: -10px; 
        width: 280px;
    }
    .fidelizacion-profile-card {
        padding: 20px;
    }

    .form-row {
        flex-direction: column;
        gap: 20px;
    }

    .beneficio-card {
        height: 440px;
    }

    .beneficio-card__title {
        font-weight: 600;
        font-size: 18px;
    }
    .fidelizacion-filter-search input {
        font-size: 14px;
        padding: 8px 12px;
    }
    .fidelizacion-filter-search input::placeholder {
        font-size: 14px;
    }
}

/* -------------------------------------------------------------------------
   2. ENTRE 768px Y 1024px (Tablets / Ipads modo vertical)
   ------------------------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .beneficio-card {
        height: 540px;
    }
    .beneficio-card__title {
        font-weight: 600;
        font-size: 20px;
    }
    .fidelizacion-filter-search input {
        font-size: 16px;
        padding: 10px 14px;
    }
    .fidelizacion-filter-search input::placeholder {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------------------
   3. ENTRE 1025px Y 1366px (Laptops / Pantallas medianas)
   ------------------------------------------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
    .beneficio-card {
        height: 580px;
    }
    .beneficio-card__title {
        font-weight: 600;
        font-size: 24px;
    }
    .fidelizacion-filter-search input {
        font-size: 18px;
        padding: 12px 16px;
    }
    .fidelizacion-filter-search input::placeholder {
        font-size: 18px;
    }
    .fidelizacion-filter-selects select {
        padding: 12px 16px 12px 64px;
        font-size: 18px;
    }
    #fidelizacion-filter-clear {
        padding: 12px 16px;
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------
   4. DESDE 1367px (Escritorios grandes / Pantallas anchas)
   ------------------------------------------------------------------------- */
@media screen and (min-width: 1367px) {
    .beneficio-card {
        height: 640px;
    }
    .beneficio-card__title {
        font-weight: 600;
        font-size: 28px;
    }
    .fidelizacion-filter-search input {
        font-size: 20px;
        padding: 12px 16px;
    }
    .fidelizacion-filter-search input::placeholder {
        font-size: 20px;
    }
    .fidelizacion-filter-selects select {
        padding: 12px 16px 12px 64px;
        font-size: 20px;
    }
    #fidelizacion-filter-clear {
        padding: 12px 20px;
        font-size: 20px;
    }
}