/*
 * Modernizacion visual suave del club.
 *
 * Esta capa no altera la estructura ni el comportamiento de la plataforma.
 * Se carga antes del CSS personalizado de cada servicio para conservar la
 * prioridad de las adaptaciones multimarca.
 */

.club-ui-refresh {
    --club-surface: #ffffff;
    --club-surface-soft: #f8f9fb;
    --club-border: #e5e8ed;
    --club-border-strong: #d8dde5;
    --club-text-muted: #667085;
    --club-radius-sm: 8px;
    --club-radius: 12px;
    --club-radius-lg: 16px;
    --club-shadow-sm: 0 2px 10px rgba(16, 24, 40, 0.05);
    --club-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    --club-transition: 180ms ease;
    background-color: var(--club-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Accesibilidad y respuesta de controles */
.club-ui-refresh a,
.club-ui-refresh button,
.club-ui-refresh .btn,
.club-ui-refresh .form-control {
    transition-duration: 180ms;
}

.club-ui-refresh a:focus-visible,
.club-ui-refresh button:focus-visible,
.club-ui-refresh .btn:focus-visible,
.club-ui-refresh .form-control:focus-visible,
.club-ui-refresh [tabindex]:focus-visible {
    outline: 2px solid var(--color06);
    outline-offset: 3px;
}

/* Cabeceras y navegacion: mismas dimensiones y posiciones */
.club-ui-refresh > header.header-2,
.club-ui-refresh > header.header-4 {
    border-bottom: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.05);
}

.club-ui-refresh header .pixelstrap a,
.club-ui-refresh header .nav-icon a,
.club-ui-refresh header .icon-detail a {
    transition: color var(--club-transition), opacity var(--club-transition);
}

.club-ui-refresh header .nav-icon ul .onhover-div .show-div,
.club-ui-refresh header .dropdown-menu,
.club-ui-refresh .dropdown-menu {
    border: 1px solid var(--club-border) !important;
    border-radius: var(--club-radius) !important;
    box-shadow: var(--club-shadow);
}

.club-ui-refresh header .nav-icon ul .onhover-div .show-div {
    padding: 16px 18px;
    transition: opacity var(--club-transition), visibility var(--club-transition),
    transform var(--club-transition);
}

/* Titulos, migas y separadores */
.club-ui-refresh .title,
.club-ui-refresh .title-cvlv,
.club-ui-refresh .title-basic,
.club-ui-refresh .checkout-title,
.club-ui-refresh .page-title {
    text-wrap: balance;
}

.club-ui-refresh .breadcrumb-section {
    border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}

.club-ui-refresh .breadcrumb-section:after {
    opacity: 0.35;
}

.club-ui-refresh .border-section {
    border-color: var(--club-border);
}

/* Botones: se mantiene color, contenido y posicion */
.club-ui-refresh .btn-solid,
.club-ui-refresh .btn-solid-white,
.club-ui-refresh .btn-solid-buscar,
.club-ui-refresh .btn-outline {
    border-radius: var(--club-radius-sm);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
    transition: color var(--club-transition), background-color var(--club-transition),
    border-color var(--club-transition), box-shadow var(--club-transition),
    transform var(--club-transition);
}

.club-ui-refresh .btn-solid:after,
.club-ui-refresh .btn-solid-buscar:after {
    display: none;
}

.club-ui-refresh .btn-solid:hover,
.club-ui-refresh .btn-solid-white:hover,
.club-ui-refresh .btn-solid-buscar:hover,
.club-ui-refresh .btn-outline:hover {
    box-shadow: 0 5px 12px rgba(16, 24, 40, 0.13);
    transform: translateY(-1px);
}

.club-ui-refresh .btn-solid:active,
.club-ui-refresh .btn-solid-white:active,
.club-ui-refresh .btn-solid-buscar:active,
.club-ui-refresh .btn-outline:active {
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12);
    transform: translateY(0);
}

.club-ui-refresh .btn-solid.btn-sm,
.club-ui-refresh .btn-solid.btn-solid-sm {
    border-radius: 7px;
    padding: 6px 12px !important;
}

/* Formularios */
.club-ui-refresh .form-control,
.club-ui-refresh select.form-control,
.club-ui-refresh textarea.form-control {
    background-color: var(--club-surface);
    border-color: var(--club-border-strong);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    transition: border-color var(--club-transition), box-shadow var(--club-transition),
    background-color var(--club-transition);
}

.club-ui-refresh .form-control:hover {
    border-color: #c7cdd6;
}

.club-ui-refresh .form-control:focus {
    background-color: #ffffff;
    border-color: var(--color06);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color06) 18%, transparent);
}

.club-ui-refresh .form-group label,
.club-ui-refresh .theme-form label {
    margin-bottom: 8px;
}

.club-ui-refresh .custom-select {
    border-color: var(--club-border-strong);
    border-radius: 10px;
}

/* Superficies y tarjetas comunes */
.club-ui-refresh .card {
    background-color: var(--club-surface);
    border-color: var(--club-border);
    border-radius: var(--club-radius);
    box-shadow: var(--club-shadow-sm);
}

.club-ui-refresh .theme-card,
.club-ui-refresh .dashboard-left .block-content,
.club-ui-refresh .dashboard-right .dashboard {
    background-color: var(--club-surface);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    box-shadow: var(--club-shadow-sm);
}

.club-ui-refresh .login-page .theme-card,
.club-ui-refresh .register-page .theme-card {
    padding: 28px;
}

.club-ui-refresh .login-page .theme-card .theme-form input,
.club-ui-refresh .register-page .theme-card .theme-form input,
.club-ui-refresh .pwd-page .theme-form input {
    border-color: var(--club-border-strong);
    border-radius: 10px;
    min-height: 44px;
}

.club-ui-refresh .login-page h3,
.club-ui-refresh .register-page h3 {
    margin-bottom: 14px;
}

.club-ui-refresh .modal-content {
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius-lg);
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18);
    overflow: hidden;
}

.club-ui-refresh .theme-modal .modal-dialog .modal-content .modal-body,
.club-ui-refresh .theme-modal .modal-dialog .modal-content .modal-body .modal-bg {
    border-radius: inherit;
}

.club-ui-refresh .alert,
.club-ui-refresh .card-informacion-importante,
.club-ui-refresh .info-importante {
    border-radius: var(--club-radius-sm);
}

/* Categorias, banners y bloques promocionales */
.club-ui-refresh .collection-banner {
    border-color: var(--club-border) !important;
    border-radius: var(--club-radius);
    box-shadow: var(--club-shadow-sm);
}

.club-ui-refresh .collection-banner .img-part {
    transition: transform 260ms ease;
}

.club-ui-refresh .category .category-block {
    background-color: var(--club-surface);
    border-color: var(--club-border);
    border-radius: var(--club-radius);
    box-shadow: var(--club-shadow-sm);
}

.club-ui-refresh .category .category-wrapper .img-block {
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
    transition: border-color var(--club-transition), box-shadow var(--club-transition),
    transform var(--club-transition);
}

.club-ui-refresh .category .category-wrapper:hover .img-block {
    box-shadow: 0 7px 18px rgba(16, 24, 40, 0.12);
    transform: translateY(-2px);
}

.club-ui-refresh .category .category-wrapper .category-title h5 {
    border-radius: var(--club-radius-sm);
    line-height: 1.35;
    padding: 4px 8px;
}

/* Catalogo y producto: no se modifican rejillas ni alturas */
.club-ui-refresh .product-wrapper-grid .product-box,
.club-ui-refresh .product-layout .product-box,
.club-ui-refresh .ratio2_3 .product-box,
.club-ui-refresh .center-product.product-box {
    background-color: var(--club-surface);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    box-shadow: var(--club-shadow-sm);
    transition: border-color var(--club-transition), box-shadow var(--club-transition),
    transform var(--club-transition);
}

.club-ui-refresh .product-wrapper-grid .product-box:hover,
.club-ui-refresh .product-layout .product-box:hover,
.club-ui-refresh .ratio2_3 .product-box:hover,
.club-ui-refresh .center-product.product-box:hover {
    border-color: var(--club-border-strong);
    box-shadow: var(--club-shadow);
    transform: translateY(-2px);
}

.club-ui-refresh .product-box .img-block,
.club-ui-refresh .product-box .img-wrapper,
.club-ui-refresh .center-product .product-img {
    background-color: var(--club-surface-soft);
    border-radius: 10px;
    overflow: hidden;
}

.club-ui-refresh .product-box .img-block .cart-wrap button,
.club-ui-refresh .product-box .img-block .cart-wrap a {
    border: 1px solid var(--club-border);
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.1);
}

.club-ui-refresh .precio-mancheta {
    border-width: 1px;
    border-radius: var(--club-radius-sm);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
}

.club-ui-refresh .product-right .border-product,
.club-ui-refresh .tab-product {
    border-color: var(--club-border);
}

.club-ui-refresh .tab-product .nav-tabs .nav-link,
.club-ui-refresh .nav-pills .nav-link {
    border-radius: var(--club-radius-sm);
    transition: color var(--club-transition), background-color var(--club-transition),
    box-shadow var(--club-transition);
}

/* Cuenta, carrito, pedidos y pagos */
.club-ui-refresh .dashboard-left .block-content {
    padding: 18px;
}

.club-ui-refresh .dashboard-left .block-content ul li {
    border-radius: 7px;
    transition: color var(--club-transition), background-color var(--club-transition),
    padding-left var(--club-transition);
}

.club-ui-refresh .dashboard-left .block-content ul li:hover,
.club-ui-refresh .dashboard-left .block-content ul li.active {
    background-color: var(--club-surface-soft);
}

.club-ui-refresh .dashboard-right .dashboard {
    padding: 28px;
}

.club-ui-refresh .account-sidebar {
    border-radius: var(--club-radius-sm) !important;
    box-shadow: var(--club-shadow-sm);
    padding: 8px 12px;
}

.club-ui-refresh .cart-section .cart-table,
.club-ui-refresh .wishlist-section .cart-table,
.club-ui-refresh .order-history .table {
    background-color: var(--club-surface);
    border: 1px solid var(--club-border);
    border-collapse: separate;
    border-radius: var(--club-radius);
    border-spacing: 0;
    box-shadow: var(--club-shadow-sm);
}

.club-ui-refresh .cart-section .striped-table tbody:nth-child(odd),
.club-ui-refresh .wishlist-section .striped-table tbody:nth-child(odd) {
    background-color: var(--club-surface-soft);
}

.club-ui-refresh .checkout-page .checkout-form,
.club-ui-refresh .order-box,
.club-ui-refresh .payment-box {
    border-color: var(--club-border);
}

/* Pie: misma estructura y colores configurados */
.club-ui-refresh .footer-section {
    border-top: 1px solid rgba(16, 24, 40, 0.08);
}

.club-ui-refresh footer h4 {
    margin-bottom: 14px;
}

.club-ui-refresh footer a {
    transition: color var(--club-transition), opacity var(--club-transition);
}

/* Correccion del gutter movil: evita el desbordamiento de las filas Bootstrap. */
@media (max-width: 768px) {
    .club-ui-refresh .container {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .club-ui-refresh .login-page > .container {
        width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .club-ui-refresh .login-page .theme-card,
    .club-ui-refresh .register-page .theme-card {
        padding: 20px;
    }

    .club-ui-refresh .dashboard-right .dashboard {
        padding: 20px;
    }

    .club-ui-refresh .breadcrumb-section {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .club-ui-refresh .product-wrapper-grid .product-box,
    .club-ui-refresh .product-layout .product-box,
    .club-ui-refresh .ratio2_3 .product-box,
    .club-ui-refresh .center-product.product-box {
        transform: none;
    }
}

@media (max-width: 479px) {
    .club-ui-refresh .login-page .theme-card,
    .club-ui-refresh .register-page .theme-card,
    .club-ui-refresh .dashboard-right .dashboard {
        padding: 16px;
    }

    .club-ui-refresh .btn-solid,
    .club-ui-refresh .btn-solid-white,
    .club-ui-refresh .btn-solid-buscar {
        letter-spacing: 0.6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-ui-refresh *,
    .club-ui-refresh *::before,
    .club-ui-refresh *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}