/**
 * Canjea.net — CSS personalizado (child theme)
 *
 * Contenido:
 *   1. Globales (botón actualizar carrito, pseudo-elementos qty)
 *   2. Wallet sidebar
 *   3. Incrementador de cantidad — base
 *   4. Carrito móvil — layout completo
 *   5. Carrito móvil — estado trash del botón minus
 *   6. Selector de variaciones woovr
 *   7. Botón comprar — alineación y estilo
 *   8. Metadatos del producto (Categorías/Etiquetas como Badges)
 *   9. Página Order-Received (confirmación de pedido)
 */

/* =====================================================================
   1. GLOBALES
   ===================================================================== */

/* Ocultar botón "Actualizar carrito" (se dispara automáticamente por JS) */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
    display: none;
}

/* Anular pseudo-elementos originales del tema en botones de cantidad */
.wpbf-qty-control::before,
.wpbf-qty-control::after {
    display: none !important;
    content: none !important;
}

/* =====================================================================
   2. WALLET SIDEBAR
   ===================================================================== */
.woo-wallet-sidebar ul {
    padding: 0 !important;
}

/* =====================================================================
   3. INCREMENTADOR CANTIDAD — BASE (todas las resoluciones)
   ===================================================================== */
.quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #111 !important;
    height: 40px !important;
}
.quantity .wpbf-qty-control {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #222 !important;
    color: #ccc !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    flex-shrink: 0 !important;
    position: relative !important;
    left: 0 !important;
}
.quantity .wpbf-qty-control:active {
    background: #333 !important;
}
.quantity .wpbf-qty-control svg {
    display: block !important;
    pointer-events: none !important;
}
.quantity .qty {
    width: 44px !important;
    min-width: 44px !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #eee !important;
    background: #111 !important;
    height: 40px !important;
    -moz-appearance: textfield !important;
    outline: none !important;
    box-shadow: none !important;
    position: relative !important;
    left: 0 !important;
}
.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.quantity .wpbf-qty-decrease {
    border-right: 1px solid #333 !important;
}
.quantity .wpbf-qty-increase {
    border-left: 1px solid #333 !important;
}

/* =====================================================================
   4. CARRITO MÓVIL — LAYOUT COMPLETO
   ===================================================================== */
@media (max-width: 768px) {

    /* Outer Border Fix: remover borde global de la tabla */
    .woocommerce table.shop_table_responsive {
        border: none !important;
    }

    /* --- Tarjeta de producto --- */
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        border: 1px solid #2a2a2a !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        background: #1a1a1a !important;
    }

    /* --- Fix text alignment & Reset TD --- */
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
    }

    /* Ocultar etiquetas por defecto ("Producto:", "Precio:", etc) SOLO en los productos */
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td::before {
        display: none !important;
    }

    /* --- Image and Product Name --- */
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail {
        display: block !important;
        width: 60px !important;
        padding: 0 !important;
        margin-right: 12px !important;
    }
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
        width: 60px !important;
        height: auto !important;
        border-radius: 6px !important;
        margin: 0 !important;
    }
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-name {
        width: calc(100% - 72px) !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-name a {
        display: block !important;
        text-align: left !important;
    }

    /* --- Ocultar botón eliminar independiente y precio (ya no necesarios) --- */
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-remove,
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-price {
        display: none !important;
    }

    /* =====================================================================
       5. CARRITO MÓVIL — ESTADO TRASH DEL BOTÓN MINUS (qty=1)
       ===================================================================== */
    .quantity .wpbf-qty-decrease.is-trash {
        background: rgba(255, 60, 60, .15) !important;
        border-right-color: rgba(255, 60, 60, .25) !important;
    }
    .quantity .wpbf-qty-decrease.is-trash:active {
        background: rgba(255, 60, 60, .3) !important;
    }

    /* --- Quantity y Subtotal en la misma línea (Abajo) --- */
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-quantity,
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-subtotal {
        width: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        padding-top: 16px !important;
        border-top: 1px solid #333 !important;
        margin-top: 16px !important;
    }
    .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item td.product-subtotal {
        justify-content: flex-end !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #fff !important;
    }


    /* --- Coupon Area --- */
    .woocommerce table.shop_table_responsive tr td.actions {
        display: block !important;
        width: 100% !important;
        padding: 24px 0 !important;
        border: none !important;
        background: transparent !important;
    }
    .woocommerce table.shop_table_responsive tr td.actions .coupon {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        float: none !important;
    }
    .woocommerce table.shop_table_responsive tr td.actions .coupon input.input-text {
        width: 100% !important;
        margin: 0 !important;
        border: 1px solid #333 !important;
        background: #111 !important;
        color: #fff !important;
        border-radius: 6px !important;
        padding: 12px !important;
    }
    .woocommerce table.shop_table_responsive tr td.actions .coupon button.button {
        width: 100% !important;
        margin: 0 !important;
    }

}

/* =====================================================================
   6. SELECTOR DE VARIACIONES WOOVR (MEJORAS)
   ===================================================================== */

/* Separacion entre variaciones y espaciado */
.woovr-variation {
    padding: 12px 16px !important;
    border-bottom: 1px solid #2a2a2a !important;
    margin-bottom: 4px !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
}

/* Remover ultimo borde */
.woovr-variation:last-child {
    border-bottom: none !important;
}

/* Efecto hover/activo simple usando :has (funciona en moviles modernos) */
.woovr-variation:has(input[type="radio"]:checked) {
    background-color: #1e1e1e !important;
}

/* Esconder el radio nativo: invisible, sin tamaño, sin interacción visual */
.woovr-variation-radio .woovr-variation-selector input[type="radio"] {
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* Contenedor: tamaño fijo para el indicador */
.woovr-variation-radio .woovr-variation-selector {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Indicador: circulo vacio */
.woovr-variation-radio .woovr-variation-selector::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 2px solid #888 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease !important;
}

/* Variacion activa: borde naranja + punto naranja */
.woovr-variation-radio.woovr-variation-active .woovr-variation-selector::before {
    border-color: #ff6a00 !important;
    background: radial-gradient(circle, #ff6a00 38%, transparent 42%) !important;
}

/* =====================================================================
   7. BOTON COMPRAR — ALINEACION Y ESTILO
   ===================================================================== */

/* Contenedor inmediato de qty + boton (NO el form.cart completo) */
.woocommerce-variation-add-to-cart,
form.cart:not(.variations_form) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Botones principales: Comprar, Checkout y Realizar Pedido — estilo compartido */
.single_add_to_cart_button.button,
.checkout-button,
#place_order {
    flex: none !important;
    height: 48px !important;
    padding: 0 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #ff7a1a, #e05a00) !important;
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.35) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
    cursor: pointer !important;
}

/* Checkout / Realizar pedido: full-width (están solos en el bloque de totales) */
.checkout-button,
#place_order {
    width: 100% !important;
}

.single_add_to_cart_button.button:hover,
.checkout-button:hover,
#place_order:hover {
    background: linear-gradient(135deg, #ff8c30, #d04a00) !important;
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.45) !important;
    transform: translateY(-1px) !important;
}

.single_add_to_cart_button.button:active,
.checkout-button:active,
#place_order:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(255, 106, 0, 0.3) !important;
}

/* En movil: todo full-width debajo */
@media (max-width: 768px) {
    .woocommerce-variation-add-to-cart,
    form.cart:not(.variations_form) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    .woocommerce-variation-add-to-cart .quantity,
    form.cart:not(.variations_form) .quantity {
        width: 100% !important;
        display: flex !important;
    }
    .woocommerce-variation-add-to-cart .quantity .qty,
    form.cart:not(.variations_form) .quantity .qty {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .single_add_to_cart_button.button {
        width: 100% !important;
        flex: none !important;
    }
}


/* =====================================================================
   8. METADATOS DEL PRODUCTO (TODOS LOS BADGES EN UNA FILA)
   ===================================================================== */
.product_meta {
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid #2a2a2a !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

/* Spans: inline-flex, font-size:0 oculta el texto nativo "Categoría:" */
.product_meta .posted_in,
.product_meta .tagged_as {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    font-size: 0 !important;
}

/* Eliminar ::before por si quedan restos de paso anterior */
.product_meta .posted_in::before,
.product_meta .tagged_as::before {
    display: none !important;
    content: none !important;
}

/* Badges: misma línea, todos juntos */
.product_meta .posted_in a,
.product_meta .tagged_as a {
    font-size: 12px !important;
    background-color: transparent !important;
    color: #71717a !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border: 1px solid #333 !important;
    transition: all 0.2s ease !important;
    margin-right: 5px !important;
}

.product_meta .posted_in a:hover,
.product_meta .tagged_as a:hover {
    background-color: rgba(255, 122, 26, 0.15) !important;
    border-color: #ff7a1a !important;
    color: #ff7a1a !important;
}

/* =====================================================================
   9. PAGINA ORDER-RECEIVED (CONFIRMACION DE PEDIDO)
   ===================================================================== */

/* --- Ocultar el H1 "Finalizar compra" que hereda de la pagina padre --- */
body.woocommerce-order-received h1.entry-title {
    display: none !important;
}

/* --- Contenedor principal --- */
.woocommerce-order {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}

/* --- Contenedor del checkmark (inyectado por JS) --- */
.canjea-order-checkmark {
    text-align: center !important;
    margin-bottom: 8px !important;
}
.canjea-order-checkmark svg {
    width: 64px !important;
    height: 64px !important;
}

/* --- Mensaje de confirmacion --- */
.woocommerce-thankyou-order-received {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 32px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* --- Resumen del pedido: tarjetas en fila --- */
.woocommerce-order-overview.order_details {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
    border: none !important;
    background: transparent !important;
}

.woocommerce-order-overview.order_details::before,
.woocommerce-order-overview.order_details::after {
    display: none !important;
}

.woocommerce-order-overview.order_details li {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #666 !important;
}

.woocommerce-order-overview.order_details li::before,
.woocommerce-order-overview.order_details li::after {
    display: none !important;
}

.woocommerce-order-overview.order_details li strong {
    display: block !important;
    margin-top: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #fff !important;
}

/* --- Seccion "Detalles del pedido" --- */
.woocommerce-order-details {
    margin-bottom: 40px !important;
}

.woocommerce-order-details__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #2a2a2a !important;
}

/* Tabla de productos */
.woocommerce-table--order-details {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.woocommerce-table--order-details thead th {
    background: #151515 !important;
    color: #666 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #2a2a2a !important;
}

.woocommerce-table--order-details tbody td {
    padding: 16px !important;
    color: #ccc !important;
    border-bottom: 1px solid #222 !important;
    vertical-align: middle !important;
}

/* Usar flexbox para alinear la miniatura, el nombre y la cantidad */
.woocommerce-table--order-details tbody td.product-name {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.woocommerce-table--order-details tbody td a {
    color: #eee !important;
    text-decoration: none !important;
}

.woocommerce-table--order-details tbody td a:hover {
    color: #ff7a1a !important;
}

.woocommerce-table--order-details .product-quantity {
    color: #888 !important;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    padding: 12px 16px !important;
    border-top: 1px solid #222 !important;
    color: #aaa !important;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    font-weight: 700 !important;
    color: #fff !important;
    font-size: 16px !important;
}

/* Span contenedor de la miniatura inyectado por PHP */
.woocommerce-table--order-details .product-name span[style] {
    float: none !important;
    margin: 0 !important;
    width: 48px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Miniatura del producto en order-received */
.woocommerce-table--order-details .product-name img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    border: none !important;
    display: block !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

/* === OCULTAR TABLA NATIVA Y PÁRRAFO PLANO DEL PEDIDO === */
h2.woocommerce-order-details__title,
table.shop_table.order_details,
table.woocommerce-table--order-details,
.woocommerce-order-details.order_details,
.woocommerce-order > p:first-child {
    display: none !important;
}

/* Ocultar de forma robusta el párrafo nativo de view-order */
.woocommerce-view-order .woocommerce-MyAccount-content > p:has(> mark.order-number),
.woocommerce-view-order .woocommerce-MyAccount-content > .woocommerce-notices-wrapper + p,
.woocommerce-view-order .woocommerce-MyAccount-content > p:first-of-type {
    display: none !important;
}


/* --- Seccion "Claves y accesos" tablas internas --- */
/* Ocultar el thead del plugin (nombre del producto repetido) - ya lo muestra el group-header */
.canjea-license-group table.shop_table thead {
    display: none !important;
}

/* Hacer transparente la tabla-wrapper que inyecta el plugin y borrar sus bordes */
.canjea-license-group table.shop_table {
    background: transparent !important;
    border: none !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

.canjea-license-group table.shop_table tbody tr,
.canjea-license-group table.shop_table tbody td {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* === HEADER DE GRUPO DE PRODUCTO EN CLAVES Y ACCESOS === */
.canjea-license-group {
    margin-bottom: 56px !important;
}

.canjea-license-group-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.canjea-license-group-header img {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
    background: #141414 !important;
    flex-shrink: 0 !important;
}

.canjea-license-group-header svg {
    width: 24px !important;
    height: 24px !important;
    color: #555 !important;
    flex-shrink: 0 !important;
}

.canjea-license-group-header span {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}


/* =========================================
   DISEÑO PRO DE TARJETAS DE LICENCIAS
========================================= */

.lmfwc-myaccount-license-key {
    display: block !important;
    padding: 0 !important;
    border: none !important;
}

.canjea-pro-card {
    background: #141414 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.cpc-header {
    background: #1a1a1a !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #2a2a2a !important;
}

.cpc-header svg {
    width: 16px !important;
    height: 16px !important;
    color: #888 !important;
    margin-right: 8px !important;
}

.cpc-header span {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

.cpc-body {
    padding: 20px 24px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px 24px !important;
}

.cpc-row {
    display: flex !important;
    align-items: center !important;
}

/* Reordenamiento visual para desktop (2x2 ordenado por logica) */
@media (min-width: 768px) {
    .cpc-body {
        grid-template-columns: 1fr 1fr !important;
    }
    .cpc-body > .cpc-row:nth-child(1) { order: 1 !important; } /* Correo */
    .cpc-body > .cpc-row:nth-child(2) { order: 3 !important; } /* Contraseña */
    .cpc-body > .cpc-row:nth-child(3) { order: 2 !important; } /* Perfil */
    .cpc-body > .cpc-row:nth-child(4) { order: 4 !important; } /* Caducidad */
}

.cpc-icon {
    width: 28px !important;
    height: 28px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.cpc-icon svg {
    width: 14px !important;
    height: 14px !important;
    color: #888 !important;
}

.cpc-data {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.cpc-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #777 !important;
    margin-bottom: 3px !important;
}

.cpc-value-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.cpc-value {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #fff !important;
    word-break: break-all !important;
    line-height: 1.2 !important;
}

.cpc-copy-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    padding: 3px 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    transition: all 0.2s ease !important;
}

.cpc-copy-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.cpc-copy-btn svg {
    width: 13px !important;
    height: 13px !important;
}

.cpc-copy-btn.copied {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #10B981 !important;
}

/* Nota global unica que se inyecta por JS - Rediseño premium llamativo */
.canjea-global-notice {
    margin-top: 12px !important;
    padding: 12px 16px !important;
    background: #1a1610 !important; /* Tono ambar super oscuro */
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.cgn-title {
    display: flex !important;
    align-items: center !important;
    color: #f59e0b !important; /* Ambar premium */
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.cgn-title svg {
    margin-right: 6px !important;
}

.cgn-content {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #ccc !important;
}

.cgn-content a {
    color: #f59e0b !important;
    text-decoration: underline !important;
}

/* Anular el padding-bottom molesto de WooCommerce en tablas/detalles, pero no en nuestras tarjetas pro */
.woocommerce .woocommerce-order-details *:last-child:not(.cpc-body):not(.canjea-global-notice):not(.cgn-content),
.woocommerce .woocommerce-customer-details *:last-child:not(.cpc-body):not(.canjea-global-notice):not(.cgn-content) {
    padding-bottom: 0 !important;
}

/* Responsive: movil */
@media (max-width: 768px) {
    .woocommerce-order-overview.order_details {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .woocommerce-thankyou-order-received {
        font-size: 18px !important;
    }

    .canjea-order-checkmark svg {
        width: 48px !important;
        height: 48px !important;
    }
}

/* =========================================================================
   PEDIDOS EN MI CUENTA (/mi-cuenta/orders/): Rediseño Card-Based UI
   ========================================================================= */

/* 1. Transformar tabla nativa de WooCommerce en contenedor transparente de tarjetas */
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.woocommerce-orders-table tbody,
.woocommerce-MyAccount-content table.woocommerce-orders-table tr,
.woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Ocultar thead de la tabla ("Pedido") y columnas residuales */
.woocommerce-MyAccount-content table.woocommerce-orders-table thead,
.woocommerce-MyAccount-content table.woocommerce-orders-table td:not(.woocommerce-orders-table__cell-order-number) {
    display: none !important;
}

/* Ocultar etiquetas móviles ::before (Pedido:, Fecha:, Estado:, Total:) */
.woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number::before {
    display: none !important;
    content: none !important;
}

/* 2. Tarjeta individual de pedido (.canjea-order-card) */
.canjea-order-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    margin-bottom: 14px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    gap: 16px !important;
}

.canjea-order-card:hover {
    background: #181818 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.coc-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.coc-thumb {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #202020 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.coc-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.coc-info {
    min-width: 0 !important;
    flex: 1 !important;
}

.coc-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.coc-meta {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #8e95a3 !important;
    line-height: 1.3 !important;
}

.coc-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
}

/* Píldora de estado en español */
.canjea-order-status {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

.canjea-status-completed {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10B981 !important;
}

.canjea-status-pending,
.canjea-status-processing,
.canjea-status-on-hold {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

.canjea-status-cancelled,
.canjea-status-failed,
.canjea-status-refunded {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

/* Botón "Ver claves ->" / "Ver pedido ->" */
.coc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    background: #222 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
}

.canjea-order-card:hover .coc-btn {
    background: #2e2e2e !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

/* 3. Responsive Móvil (1 sola columna vertical ergonómica) */
@media (max-width: 640px) {
    .canjea-order-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
        gap: 14px !important;
    }

    .coc-left {
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .coc-thumb {
        width: 48px !important;
        height: 48px !important;
    }

    .coc-info {
        text-align: left !important;
    }

    .coc-title {
        font-size: 14px !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .coc-meta {
        font-size: 12px !important;
        text-align: left !important;
    }

    .coc-right {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        padding-top: 12px !important;
    }

    .coc-btn {
        padding: 6px 14px !important;
        font-size: 12px !important;
    }
}

/* =========================================================================
   PAGINACIÓN WOOCOMMERCE CENTRADA Y MINIMALISTA
   ========================================================================= */
.woocommerce-pagination,
.woocommerce-Pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 2rem 0 !important;
    text-align: center !important;
}

.woocommerce-pagination .page-numbers,
.woocommerce-Pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}



.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span,
.woocommerce-Pagination .page-numbers li a,
.woocommerce-Pagination .page-numbers li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    background: #1e1e1e !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.woocommerce-pagination .page-numbers li a:hover,
.woocommerce-Pagination .page-numbers li a:hover {
    background: #2a2a2a !important;
    border-color: rgba(255,255,255,0.2) !important;
}

.woocommerce-pagination .page-numbers li span.current,
.woocommerce-Pagination .page-numbers li span.current {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* =========================================================================
   MENÚ LATERAL DE MI CUENTA (PRO Y MINIMALISTA)
   ========================================================================= */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.woocommerce-MyAccount-navigation ul li {
    border: none !important;
    margin-bottom: 4px !important;
    background: transparent !important;
    padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 16px !important;
    color: #e0e0e0 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Iconos inyectados */
.woocommerce-MyAccount-navigation ul li a i,
.woocommerce-MyAccount-navigation ul li a span[class*="icon"] {
    margin-right: 12px !important;
    font-size: 18px !important;
    color: #a0a0a0 !important;
    transition: all 0.2s ease !important;
}

/* Efectos Hover */
.woocommerce-MyAccount-navigation ul li a:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}

.woocommerce-MyAccount-navigation ul li a:hover i,
.woocommerce-MyAccount-navigation ul li a:hover span[class*="icon"] {
    color: #ffffff !important;
}

/* Separador inferior entre la barra de nav y el contenido */
.woocommerce-MyAccount-navigation {
    margin-bottom: 16px !important;
}

/* Estado Activo */
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a i,
.woocommerce-MyAccount-navigation ul li.is-active a span[class*="icon"] {
    color: #ffffff !important;
}

/* =========================================================================
   MENÚ LATERAL DE MI CUENTA - MÓVIL (PILLS + SCROLL + FADE)
   ========================================================================= */
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation {
        position: relative !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 24px !important;
    }

    /* Sombra de fade a la derecha para indicar scroll */
    .woocommerce-MyAccount-navigation::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 40px !important;
        height: 100% !important;
        background: linear-gradient(to left, #141414 0%, transparent 100%) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 4px 40px 4px 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }

    .woocommerce-MyAccount-navigation ul li {
        flex: 0 0 auto !important;
        margin-bottom: 0 !important;
    }

    /* Pills redondeadas */
    .woocommerce-MyAccount-navigation ul li a {
        padding: 8px 16px !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .woocommerce-MyAccount-navigation ul li a:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* Pill activa */
    .woocommerce-MyAccount-navigation ul li.is-active a {
        background: rgba(255, 255, 255, 0.14) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        border-radius: 20px !important;
    }
}

/* =========================================================================
   REDISEÑO DE VIEW-ORDER (DETALLE DE PEDIDO) PRO Y MINIMALISTA
   ========================================================================= */
/* 1. Ocultar el thead redundante (Producto/Total) de la tabla nativa */
table.shop_table.order_details thead {
    display: none !important;
}

/* 2. Destruir apariencia de tabla y usar Flexbox para los productos */
table.shop_table.order_details {
    border: none !important;
    border-collapse: collapse !important;
    background: transparent !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

/* Reset agresivo de todos los bordes nativos de WooCommerce en esta tabla */
table.shop_table.order_details th,
table.shop_table.order_details td,
table.shop_table.order_details tr {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

table.shop_table.order_details tbody tr.woocommerce-table__line-item {
    display: flex !important;
    align-items: center !important;
    background: #1e1e1e !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

table.shop_table.order_details tbody tr.woocommerce-table__line-item td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

table.shop_table.order_details tbody td.woocommerce-table__product-name {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* Quitar el 'x 1' de la cantidad si no es necesario, o estilizarlo tenue */
table.shop_table.order_details tbody td.woocommerce-table__product-name strong.product-quantity {
    color: rgba(255,255,255,0.4) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    margin-left: 8px !important;
}

table.shop_table.order_details tbody td.woocommerce-table__product-total {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #fff !important;
}

/* 3. Estilizar la sección de Subtotal / Total al final */
table.shop_table.order_details tfoot {
    display: block !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px dashed rgba(255,255,255,0.1) !important;
}

table.shop_table.order_details tfoot tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

table.shop_table.order_details tfoot tr th,
table.shop_table.order_details tfoot tr td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

table.shop_table.order_details tfoot tr th {
    color: rgba(255,255,255,0.6) !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

table.shop_table.order_details tfoot tr:last-child th {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

table.shop_table.order_details tfoot tr:last-child td .amount {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* 4. Estilo Premium para el mensaje superior (Encabezado) */
.woocommerce-order > mark.order-number {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: transparent !important;
}

.woocommerce-order > mark.order-status {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10B981 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* 5. Asegurar que el thead del plugin LMFWC desaparezca completamente */
table.lmfwc-table thead,
.canjea-license-group table thead,
table.shop_table.lmfwc-table thead {
    display: none !important;
}

/* 6. Fix para móvil: filas de productos apiladas si es necesario */
@media (max-width: 640px) {
    .woocommerce-order-details table.shop_table tbody tr.woocommerce-table__line-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .woocommerce-order-details table.shop_table tbody td.woocommerce-table__product-total {
        align-self: flex-end !important;
    }
}

/* 7. Reset global de bordes de tablas del tema base (WPBF) SOLO para vistas de pedidos */
.woocommerce-order-received table,
.woocommerce-order-received .wpbf-table,
.woocommerce-view-order table,
.woocommerce-view-order .wpbf-table {
    border: none !important;
}

.canjea-license-group-header {
    display: flex !important;
    align-items: center !important;
}

.cvo-product-link {
    margin-left: auto !important; /* Lo empuja a la extrema derecha */
    color: #666 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.cvo-product-link:hover {
    color: #fff !important;
    transform: scale(1.1) !important;
}

.cvo-product-link svg {
    width: 16px !important;
    height: 16px !important;
}

/* =====================================================================
 * WOO WALLET (MI MONEDERO) - REDISEÑO SAAS
 * ===================================================================== */

/* Destruir la caja nativa de WooCommerce solo para esta vista */
body.woocommerce-woo-wallet .woocommerce-MyAccount-content,
.woo-wallet-my-wallet-container,
.woo-wallet-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.woo-wallet-my-wallet-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Ocultar títulos genéricos nativos (excepto el de saldo) */
.woo-wallet-sidebar-heading {
    display: none !important;
}

/* 1. Tarjeta de Saldo (Glassmorphism) */
.woo-wallet-content-heading {
    position: relative !important;
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 48px 16px 32px 16px !important; /* Espacio extra arriba para el badge */
    text-align: center !important;
    margin-bottom: 24px !important;
    backdrop-filter: blur(10px);
}

.woo-wallet-content-h3 {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin: 0 !important;
}

.woo-wallet-price {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
}

/* 2. Botones de Acción (Sidebar convertido a botones horizontales) */
.woo-wallet-sidebar {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woo-wallet-sidebar ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
}

.woo-wallet-sidebar ul::-webkit-scrollbar {
    display: none !important;
}

/* Botones Fantasma (Ghost Buttons) */
.woo-wallet-sidebar ul li.card {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    flex: 0 0 auto !important; /* Evita que las tarjetas se encojan en móvil */
}

.woo-wallet-sidebar ul li.card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.woo-wallet-sidebar ul li.card a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #e0e0e0 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important; /* Mantiene el texto en una sola línea */
}

.woo-wallet-sidebar ul li.card a:hover {
    color: #fff !important;
}

.woo-wallet-sidebar ul li.card a p {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Iconos del sidebar reducidos */
.woo-wallet-sidebar .dashicons {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}



/* 3. Transacciones (Lista Limpia y Píldoras Semánticas) */
.woo-wallet-content {
    width: 100% !important;
    padding: 0 !important;
}

.woo-wallet-content hr {
    display: none !important; /* Quitar linea horizontal nativa */
}

ul.woo-wallet-transactions-items {
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 0 24px !important;
    backdrop-filter: blur(10px);
    list-style: none !important;
    margin: 0 !important;
}

ul.woo-wallet-transactions-items li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 16px 0 !important;
    background: transparent !important;
}

ul.woo-wallet-transactions-items li:last-child {
    border-bottom: none !important;
}

ul.woo-wallet-transactions-items li div:first-child p {
    margin: 0 0 4px 0 !important;
    color: #e0e0e0 !important;
    font-size: 14px !important;
}

ul.woo-wallet-transactions-items li div:first-child small {
    color: #888 !important;
    font-size: 12px !important;
}

/* Abono (Verde Esmeralda) */
.woo-wallet-transaction-type-credit {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10B981 !important;
    padding: 6px 12px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Débito (Rojo Sutil) */
.woo-wallet-transaction-type-debit {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #F87171 !important;
    padding: 6px 12px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Spinner del Modal */
@keyframes cvo-spin { to { transform: rotate(360deg); } }

/* =========================================================
   3. REDISEÑO DE TABLA DE TRANSACCIONES (DataTable)
   ========================================================= */

/* Ocultar parrafo de saldo redundante en la pagina de transacciones */
.woocommerce-account p:has(.dashicons-editor-break) {
    display: none !important;
}

/* Encapsular todo el DataTable en una tarjeta Glassmorphism */
#wc-wallet-transaction-details_wrapper {
    margin-top: 20px !important;
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    backdrop-filter: blur(10px);
}

/* Eliminar bordes rígidos y estilo de celda antiguo */
#wc-wallet-transaction-details {
    border-collapse: collapse !important;
    width: 100% !important;
    border: none !important;
    margin-top: 16px !important;
}

#wc-wallet-transaction-details th,
#wc-wallet-transaction-details td {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 14px 10px !important;
    background: transparent !important;
    color: #d1d5db !important;
    vertical-align: middle !important;
    font-size: 14px !important;
}

/* Cabeceras */
#wc-wallet-transaction-details thead th {
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 12px !important;
}

/* Ocultar flechas de sorting nativas de DataTables */
#wc-wallet-transaction-details th.sorting::after,
#wc-wallet-transaction-details th.sorting::before,
#wc-wallet-transaction-details th.sorting_asc::after,
#wc-wallet-transaction-details th.sorting_desc::after {
    display: none !important;
}

/* Efecto hover interactivo */
#wc-wallet-transaction-details tbody tr {
    transition: background 0.15s ease !important;
}
#wc-wallet-transaction-details tbody tr:hover {
    background: rgba(255, 255, 255, 0.025) !important;
}

/* --- Badges Semánticos (aplicados por JS) --- */
#wc-wallet-transaction-details td.cvo-credit {
    color: #10B981 !important;
    font-weight: 600 !important;
}
#wc-wallet-transaction-details td.cvo-debit {
    color: #F87171 !important;
    font-weight: 600 !important;
}
/* Celdas vacías/guión en columnas de monto — color neutro */
#wc-wallet-transaction-details td.cvo-empty {
    color: rgba(255, 255, 255, 0.2) !important;
}

/* ID column — tenue, no necesita destacar */
#wc-wallet-transaction-details tbody td:first-child {
    color: #4b5563 !important;
    font-size: 12px !important;
}

/* --- Controles del DataTable (Buscador, Length, Paginación) --- */
.dataTables_wrapper {
    color: #9ca3af !important;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    color: #6b7280 !important;
    font-size: 13px !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #e0e0e0 !important;
    padding: 6px 12px !important;
    outline: none !important;
    font-size: 13px !important;
    margin-left: 6px !important;
}

/* Info "Showing X to Y of Z entries" */
.dataTables_wrapper .dataTables_info {
    color: #4b5563 !important;
    font-size: 12px !important;
    padding-top: 12px !important;
}

/* Paginacion */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    color: #9ca3af !important;
    margin: 0 2px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e0e0e0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #374151 !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    cursor: default !important;
}

/* Active nav item en la navegacion ghost de transacciones */
.woo-wallet-sidebar li.active-nav a {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* --- Responsive: Transformación a Tarjetas en Móvil --- */
@media (max-width: 768px) {
    /* Ajustar el wrapper glassmorphism para móvil */
    #wc-wallet-transaction-details_wrapper {
        padding: 16px !important;
    }
    
    /* Controles responsivos */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 16px !important;
        text-align: left !important;
    }
    
    /* Arreglar "Mostrando [10] entradas" en línea */
    .dataTables_wrapper .dataTables_length label {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        text-align: left !important;
    }
    .dataTables_wrapper .dataTables_length select {
        width: auto !important;
        margin: 0 !important;
    }
    
    /* Arreglar "Buscar por fecha:" apilado */
    .dataTables_wrapper .dataTables_filter label {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
        gap: 8px !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Ocultar cabeceras de tabla */
    #wc-wallet-transaction-details thead {
        display: none !important;
    }
    
    /* Fila como tarjeta vertical */
    #wc-wallet-transaction-details tbody tr {
        display: block !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-bottom: 16px !important;
    }
    #wc-wallet-transaction-details tbody tr:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Celda como fila horizontal (label - valor) */
    #wc-wallet-transaction-details tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 8px 0 !important;
        border-bottom: none !important;
        text-align: right !important;
    }
    
    /* Inyectar las etiquetas de las columnas */
    #wc-wallet-transaction-details tbody td::before {
        font-weight: 500 !important;
        color: #6b7280 !important;
        text-transform: uppercase !important;
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
        margin-right: 16px !important;
        text-align: left !important;
        min-width: 80px !important;
    }
    #wc-wallet-transaction-details tbody td:nth-child(1)::before { content: "ID"; }
    #wc-wallet-transaction-details tbody td:nth-child(2)::before { content: "Saldo"; }
    #wc-wallet-transaction-details tbody td:nth-child(3)::before { content: "Débito"; }
    #wc-wallet-transaction-details tbody td:nth-child(4)::before { content: "Detalles"; }
    #wc-wallet-transaction-details tbody td:nth-child(5)::before { content: "Fecha"; }
    
    /* Ajuste para que los textos largos en detalles no rompan el layout */
    #wc-wallet-transaction-details tbody td:nth-child(4),
    #wc-wallet-transaction-details tbody td:nth-child(5) {
        text-align: right !important;
        word-break: break-word !important;
    }
    
    /* Limpiar paginador largo en móvil */
    .dataTables_wrapper .dataTables_paginate {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }
    /* Ocultar números intermedios y puntos suspensivos */
    .dataTables_wrapper .dataTables_paginate .paginate_button:not(.previous):not(.next):not(.current),
    .dataTables_wrapper .dataTables_paginate .ellipsis {
        display: none !important;
    }
}


/* === OCULTAR H1 "MI CUENTA" SOLO EN MOVIL === */
@media (max-width: 768px) {
    body.woocommerce-account h1.entry-title,
    body.woocommerce-account .page-title {
        display: none !important;
    }
}

/* =====================================================================
   7. FORMULARIO DE ACCESO Y REGISTRO (TABS Y GLASSMORPHISM)
   ===================================================================== */

.canjea-login-header {
    max-width: 480px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.canjea-login-main-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.5px !important;
}

/* =====================================================================
   EDIT ACCOUNT PRO DESIGN (GLASSMORPHISM)
   ===================================================================== */
.woocommerce-account .woocommerce-EditAccountForm {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: none !important;
    margin: 0 0 60px 0 !important; /* Margen izquierdo en 0 para alinear con el título */
    box-sizing: border-box !important;
}

/* Etiquetas (Labels) */
.woocommerce-EditAccountForm label {
    display: block !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #9ca3af !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

/* Inputs */
.woocommerce-EditAccountForm .woocommerce-Input,
.woocommerce-EditAccountForm input.input-text {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    color: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}

.woocommerce-EditAccountForm .woocommerce-Input:focus,
.woocommerce-EditAccountForm input.input-text:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    background: rgba(40, 40, 40, 0.9) !important;
}

/* Layout de filas (Nombre y Apellidos) */
.woocommerce-EditAccountForm::after {
    content: ""; display: table; clear: both;
}
.woocommerce-EditAccountForm .form-row {
    margin-bottom: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.woocommerce-EditAccountForm .form-row-first {
    float: left !important;
    width: 48% !important;
    clear: none !important;
}
.woocommerce-EditAccountForm .form-row-last {
    float: right !important;
    width: 48% !important;
    clear: none !important;
}
.woocommerce-EditAccountForm .form-row-wide {
    clear: both !important;
    width: 100% !important;
}

/* Fieldset (Sección de contraseña) */
.woocommerce-EditAccountForm fieldset {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 32px !important;
    padding-top: 32px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

.woocommerce-EditAccountForm fieldset legend {
    display: none !important;
}

/* Botón Guardar Cambios */
.woocommerce-EditAccountForm button[name="save_account_details"] {
    background-color: #ff7a1a !important; /* Naranja corporativo */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 16px !important;
    box-shadow: 0 4px 15px rgba(255, 122, 26, 0.3) !important;
}

.woocommerce-EditAccountForm button[name="save_account_details"]:hover {
    transform: translateY(-2px) !important;
    background-color: #ff9142 !important;
    box-shadow: 0 6px 20px rgba(255, 122, 26, 0.4) !important;
}

/* =====================================================================
   LOGIN / REGISTER TABS PRO DESIGN (GLASSMORPHISM)
   ===================================================================== */
/* Ocultar solo el título "Mi cuenta" en la vista de Login/Registro */
body.woocommerce-account:not(.logged-in) .entry-title,
body.woocommerce-account:not(.logged-in) .wpbf-post-title {
    display: none !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    max-width: 450px !important;
    margin: 40px auto 80px auto !important;
    box-sizing: border-box !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .col-1,
body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .col-2 {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    display: none; /* Ocultar por defecto */
}

/* Tab Panels */
body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .canjea-tab-panel.active {
    display: block;
    animation: canjeaFadeIn 0.3s ease forwards;
}

@keyframes canjeaFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tablist Container */
.canjea-login-tablist {
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 32px;
}

/* Tab Buttons */
.canjea-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.canjea-tab-btn:hover {
    color: #fff;
}

.canjea-tab-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Botones y Formulario (Reusando estilo de edit-account) */
body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper button[type="submit"] {
    background-color: #ff7a1a !important; /* Naranja corporativo */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 16px !important;
    box-shadow: 0 4px 15px rgba(255, 122, 26, 0.3) !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    background-color: #ff9142 !important;
    box-shadow: 0 6px 20px rgba(255, 122, 26, 0.4) !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .woocommerce-Input,
body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper input.input-text {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    color: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .woocommerce-Input:focus,
body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper input.input-text:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    background: rgba(40, 40, 40, 0.9) !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper label {
    display: block !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #9ca3af !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .required {
    color: #ff4d4f !important;
    text-decoration: none !important;
    border: none !important;
}

/* Ocultar checkbox de rememberme original para hacer uno personalizado si es necesario, pero mejor solo ajustarlo */
/* =====================================================================
   CHECKBOX RECUÉRDAME Y BOTÓN DE GOOGLE
   ===================================================================== */
body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    margin-top: 16px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 13px !important;
    cursor: pointer !important;
    position: relative !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .woocommerce-form-login__rememberme input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    height: 0 !important;
    width: 0 !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .woocommerce-form-login__rememberme span {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .woocommerce-form-login__rememberme span::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 10px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .woocommerce-form-login__rememberme input[type="checkbox"]:checked + span::before {
    background: #ff7a1a !important;
    border-color: #ff7a1a !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .woocommerce-form-login__rememberme input[type="checkbox"]:checked + span::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    width: 4px !important;
    height: 8px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: translateY(-50%) rotate(45deg) !important;
    margin-top: -1px !important;
}

/* =====================================================================
   ORDENAMIENTO Y REESTRUCTURACIÓN DEL FORMULARIO CON FLEXBOX (SOLO MI CUENTA)
   ===================================================================== */
.canjea-login-tabs-wrapper form.woocommerce-form-login,
.canjea-login-tabs-wrapper form.woocommerce-form-register {
    display: flex !important;
    flex-direction: column !important;
}

/* Forzar orden visual de los elementos hijos */
.canjea-login-tabs-wrapper form.woocommerce-form-login > *,
.canjea-login-tabs-wrapper form.woocommerce-form-register > * {
    order: 2 !important;
}
.canjea-login-tabs-wrapper form.woocommerce-form-login > p:nth-of-type(1), .canjea-login-tabs-wrapper form.woocommerce-form-register > p:nth-of-type(1) { order: 1 !important; } /* Email */
.canjea-login-tabs-wrapper form.woocommerce-form-login > p:nth-of-type(2), .canjea-login-tabs-wrapper form.woocommerce-form-register > p:nth-of-type(2) { order: 2 !important; } /* Password */
.canjea-login-tabs-wrapper form.woocommerce-form-login > .woocommerce-form-login__rememberme { order: 3 !important; }
.canjea-login-tabs-wrapper form.woocommerce-form-register > .woocommerce-privacy-policy-text { order: 3 !important; }

/* Botón Google ANTES del botón de Acceder/Registrarse */
.canjea-login-tabs-wrapper form.woocommerce-form-login > .heateor_sl_outer_login_container,
.canjea-login-tabs-wrapper form.woocommerce-form-register > .heateor_sl_outer_login_container { 
    order: 4 !important; 
    margin: 8px 0 !important; /* Sólo 8px arriba y abajo */
}

/* Ocultar el div espaciador que inyecta Heateor */
.canjea-login-tabs-wrapper .heateor_sl_outer_login_container + div[style*="clear:both"] {
    display: none !important;
}

/* Submit Button */
.canjea-login-tabs-wrapper form.woocommerce-form-login > p:has(button[type="submit"]),
.canjea-login-tabs-wrapper form.woocommerce-form-register > p:has(button[type="submit"]) { 
    order: 5 !important; 
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ajustar los párrafos intermedios (como el privacy text) */
.canjea-login-tabs-wrapper .woocommerce-privacy-policy-text,
.canjea-login-tabs-wrapper .woocommerce-privacy-policy-text p {
    margin-bottom: 4px !important;
    margin-top: 4px !important;
}

/* Link recuperar contraseña */
.canjea-login-tabs-wrapper form.woocommerce-form-login > .lost_password { order: 6 !important; margin-top: 16px !important; }

/* =====================================================================
   AJUSTES CHECKOUT FORM LOGIN
   ===================================================================== */
/* Ocultar cualquier boton de google inyectado por Heateor que NO esté dentro de form.login */
body.woocommerce-checkout .heateor_sl_outer_login_container:not(form.login .heateor_sl_outer_login_container) {
    display: none !important;
}

body.woocommerce-checkout form.login {
    padding: 24px !important;
    background: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

body.woocommerce-checkout form.login .heateor_sl_outer_login_container {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

body.woocommerce-checkout form.login .canjea-checkout-register-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: #9ca3af;
}

body.woocommerce-checkout form.login .canjea-checkout-register-link a {
    color: #ff7a1a;
    font-weight: 500;
    text-decoration: none;
}
body.woocommerce-checkout form.login .canjea-checkout-register-link a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   BOTÓN GOOGLE SOCIAL LOGIN (HEATEOR)
   --------------------------------------------------------------------- */

/* Nuclearizar anchos y displays para matar cualquier inline-block o float */
.heateor_sl_outer_login_container,
.heateor_sl_login_container,
.heateor_sl_login_ul,
.heateor_sl_login_ul li {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    list-style: none !important;
}

.heateor_sl_outer_login_container {
    border-top: none !important;
    position: relative !important;
}

.heateor_sl_title {
    display: none !important;
}

ul.heateor_sl_login_ul li i.heateorSlGoogleLogin,
#heateorSlGoogleButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important; /* Separación perfecta entre icono y texto */
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important; /* Igual que los inputs y boton registrarse */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

i.heateorSlGoogleLogin:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

ss.heateorSlGoogleLoginSvg {
    position: static !important; /* Matar el position absolute del plugin */
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
}

i.heateorSlGoogleLogin::after {
    content: 'Continuar con Google' !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-family: inherit !important;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .lost_password {
    text-align: center;
    margin-top: 24px;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .lost_password a {
    color: #9ca3af !important;
    font-size: 13px;
    text-decoration: underline;
}

body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper .lost_password a:hover {
    color: #fff !important;
}

/* =====================================================================
   MENSAJES DE WOOCOMMERCE (ÉXITO / ERROR / INFO)
   ===================================================================== */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info {
    background: rgba(20, 20, 20, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    color: #fff !important;
    box-shadow: none !important;
    max-width: 700px !important;
    margin: 0 auto 24px auto !important; /* Centrado horizontal */
    font-size: 15px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
}

body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-error::before,
body.woocommerce-account .woocommerce-info::before {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    font-size: 32px !important; /* Icono más grande */
    color: #10B981 !important; /* Verde semántico por defecto */
}

body.woocommerce-account .woocommerce-error::before {
    color: #ef4444 !important; /* Rojo para errores */
}

body.woocommerce-account .woocommerce-info::before {
    color: #3b82f6 !important; /* Azul para info */
}

/* =====================================================================
   LOST PASSWORD PRO DESIGN (GLASSMORPHISM)
   ===================================================================== */
/* Contenedor padre cuando solo hay mensaje de confirmación */
body.woocommerce-lost-password .woocommerce {
    max-width: 450px !important;
    margin: 0 auto 40px auto !important;
}

body.woocommerce-lost-password .woocommerce > p {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    color: #9ca3af !important;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

.woocommerce-account .woocommerce-ResetPassword.lost_reset_password {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    max-width: 450px !important;
    margin: 40px auto 80px auto !important;
    box-sizing: border-box !important;
}

.woocommerce-account .woocommerce-ResetPassword.lost_reset_password p:first-child {
    color: #9ca3af !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    text-align: center !important;
}

.woocommerce-account .woocommerce-ResetPassword.lost_reset_password .form-row-first {
    width: 100% !important;
    float: none !important;
}

.woocommerce-account .woocommerce-ResetPassword.lost_reset_password button[type="submit"] {
    background-color: #ff7a1a !important; 
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 16px !important;
    box-shadow: 0 4px 15px rgba(255, 122, 26, 0.3) !important;
}

.woocommerce-account .woocommerce-ResetPassword.lost_reset_password button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    background-color: #ff9142 !important;
    box-shadow: 0 6px 20px rgba(255, 122, 26, 0.4) !important;
}

.woocommerce-account .woocommerce-ResetPassword.lost_reset_password .woocommerce-Input,
.woocommerce-account .woocommerce-ResetPassword.lost_reset_password input.input-text {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    color: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}

.woocommerce-account .woocommerce-ResetPassword.lost_reset_password .woocommerce-Input:focus,
.woocommerce-account .woocommerce-ResetPassword.lost_reset_password input.input-text:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    background: rgba(40, 40, 40, 0.9) !important;
}

.woocommerce-account .woocommerce-ResetPassword.lost_reset_password label {
    display: block !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #9ca3af !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

/* =====================================================================
   DASHBOARD MI CUENTA (BENTO BOX GRID)
   ===================================================================== */
.canjea-dashboard-welcome h3 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 32px !important;
    margin-top: 0 !important;
    letter-spacing: -0.5px !important;
}

.canjea-dashboard-welcome strong {
    color: #10B981 !important; /* Destaque sutil del nombre en color semántico */
}

.canjea-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
}

.canjea-dash-card {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 32px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.canjea-dash-card:hover {
    transform: translateY(-6px) !important;
    background: rgba(30, 30, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important;
}

.canjea-dash-card .dash-icon {
    margin-bottom: 12px !important;
    transition: transform 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.canjea-dash-card .dash-icon i,
.canjea-dash-card .dash-icon span {
    font-size: 36px !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
}

.canjea-dash-card:hover .dash-icon {
    transform: scale(1.1) !important;
}

.canjea-dash-card .dash-text {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

.canjea-dash-card .dash-desc {
    color: #9ca3af !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* =====================================================================
   REGLAS GLOBALES Y DE DISEÑO "PRO" (BOTONES Y CONTENT)
   ===================================================================== */
@media (min-width: 769px) {
    .woocommerce-MyAccount-content {
        max-width: 700px !important;
        width: 100% !important;
        float: left !important;
        margin-left: 6% !important; /* Separación del menú lateral */
    }
}

.woocommerce-account .woocommerce-MyAccount-content a.button, 
.woocommerce-account .woocommerce-MyAccount-content button.button {
    margin-bottom: 30px !important;
}

/* Móviles */
@media (max-width: 768px) {
    .canjea-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.woocommerce-account:not(.logged-in) #customer_login.canjea-login-tabs-wrapper,
    .woocommerce-account .woocommerce-ResetPassword.lost_reset_password {
        padding: 24px 20px !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        margin: 0 !important;
    }
    
    .woocommerce-EditAccountForm .form-row-first,
    .woocommerce-EditAccountForm .form-row-last {
        float: none !important;
        width: 100% !important;
    }
}

/* =====================================================================
   MENÚ INFERIOR MÓVIL (MÍNIMO PULIDO)
   ===================================================================== */
.homebutton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    letter-spacing: 0.3px !important;
}

.homebutton i {
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.homebutton.activeb {
    color: #ffffff !important;
}

/* =====================================================================
   NOTIFICACIONES Y ESTADOS VACÍOS (WOOCOMMERCE INFO)
   ===================================================================== */
.woocommerce-info, .woocommerce-message, .woocommerce-error {
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 40px 0 !important;
    background-color: #141414 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: #9ca3af !important;
    padding: 20px 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    letter-spacing: 0.2px !important;
}

/* Ocultar el icono obsoleto de WooCommerce para un diseño limpio */
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before {
    display: none !important;
}