/*
Theme Name: Licenciado
Description: Licenciado
Template: Divi
Version: 1.1.0
Author: MOT4R0
*/

/* ================================================================
   ÍNDICE
   1. Paleta de colores (referencia)
   2. Tienda — Grid de productos (módulo Woo Products)
   3. Botones — ajustes globales (flecha de hover de Divi)
   4. Carrito (/carrito/)
   5. Checkout (/finalizar-compra/)
   6. Página "Gracias por tu pedido" (order-received)
   7. Componentes globales compartidos (overlay de carga)
   ================================================================ */


/* ================================================================
   1. PALETA DE COLORES (referencia — no genera estilos)
   ================================================================
   Neutros (escala Ink):
     Ink 950   #090E12   Fondo base
     Ink 900   #13191E   Tarjetas, header
     Ink 800   #20272D   Bordes, inputs
     Ink 700   #363E45   Bordes activos
     Ink 500   #68737B   Solo íconos y bordes
     Ink 300   #A7AFB5   Texto secundario
     Ink 100   #E4E8EB   Texto de cuerpo
     Blanco 50 #F3F5F7   Titulares

   Acentos y semánticos:
     Cian · primario    #3ACED6   hover #00B4BC   (CTA, links, foco)
     Ámbar · promoción  #EEA563                   (descuentos, urgencia)
     Éxito              #6FB880   hover #5E9C6D   (stock, pago confirmado)
     Error              #DC655F                   (validación, rechazado)

   Nota: las cards de producto y el botón "Añadir al carrito" del grid
   todavía usan un turquesa aproximado (#2DD4CF) de una iteración
   anterior, no el cian oficial (#3ACED6). Pendiente de unificar.
   ================================================================ */


/* ================================================================
   2. TIENDA — GRID DE PRODUCTOS (módulo Woo Products)
   ================================================================ */

/* --- 2.1 Card de producto --- */
.et_pb_shop .products li.product,
.woocommerce ul.products li.product {
    background-color: #1A1A1A !important;   /* aproximado, ajustar a Ink 900 #13191E si se quiere unificar */
    border-radius: 12px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.et_pb_shop .products li.product:hover,
.woocommerce ul.products li.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Imagen del producto: ancho completo de la card, esquinas redondeadas */
.et_pb_shop .products li.product .et_shop_image,
.woocommerce ul.products li.product img {
    border-radius: 8px !important;
    overflow: hidden;
    margin-bottom: 12px !important;
    display: block;
    width: 100%;
    height: auto;
}

/* Título del producto */
.et_pb_shop .products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

/* Precio actual */
.et_pb_shop .products li.product .price,
.woocommerce ul.products li.product .price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2DD4CF !important;
    margin-bottom: 4px !important;
    display: block;
}

/* Precio anterior tachado (cuando hay descuento) */
.et_pb_shop_0.et_pb_shop .woocommerce ul.products li.product .price del .amount,
.et_pb_shop .woocommerce ul.products li.product .price del .amount,
.woocommerce ul.products li.product .price del .amount {
    color: #9A9A9A !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Quita el link invisible que envuelve toda la card, para que no
   interfiera con el hover del botón */
.et_pb_shop .products li.product a.woocommerce-LoopProduct-link {
    display: block;
}

/* Espaciado entre cards en el grid */
.et_pb_shop .products,
.woocommerce ul.products {
    gap: 20px !important;
}

/* --- 2.2 Botón "Añadir al carrito" --- */
.et_pb_shop .products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button.add_to_cart_button {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;

    background-color: #2DD4CF !important;
    color: #0A0A0A !important;
    border: none !important;
    border-radius: 8px !important;

    padding: 12px 10px !important;
    margin-top: 14px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;      /* evita que el texto se parta en 2 líneas */
    text-align: center !important;

    transition: background-color 0.2s ease, transform 0.15s ease;
}

.et_pb_shop .products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button.add_to_cart_button:hover {
    background-color: #22B8B3 !important;
    color: #0A0A0A !important;
    transform: translateY(-1px);
}

/* Estado "Añadido" (WooCommerce marca el botón vía AJAX tras agregar) */
.et_pb_shop .products li.product a.add_to_cart_button.added,
.woocommerce ul.products li.product a.button.add_to_cart_button.added {
    background-color: #22B8B3 !important;
}

/* Link "Ver carrito" que aparece junto al botón tras agregar */
.et_pb_shop .products li.product a.added_to_cart,
.woocommerce ul.products li.product a.added_to_cart {
    display: block;
    text-align: center;
    color: #2DD4CF;
    font-size: 12px;
    margin-top: 6px;
}


/* ================================================================
   3. BOTONES — AJUSTES GLOBALES
   (flecha de hover que Divi agrega por defecto a los botones)
   ================================================================ */
.woocommerce a.button:after,
.woocommerce-page a.button:after {
    top: 3px;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.loading::after,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.loading::after {
    font-size: 1.5em;
    top: .45em !important;
    right: 0.1em !important;
}

/* Ícono del estado "Añadido" (etiqueta) — REEMPLAZA la regla anterior */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.added::after,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.added::after {
    position: static !important;
    font-size: 1em !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 0.4em !important;
}

/* ================================================================
   4. CARRITO (/carrito/)
   ================================================================ */

/* --- 4.1 Tabla — anchos de columna (desktop) --- */
.et_pb_wc_cart_products table.shop_table.cart {
    table-layout: fixed !important;
    width: 100% !important;
}

.et_pb_wc_cart_products table.shop_table.cart,
.woocommerce table.shop_table.cart {
    border: none !important;
}
 
@media (min-width: 769px) {
    .et_pb_wc_cart_products table.shop_table.cart tbody tr.cart_item td {
        border-bottom: 1px solid #20272D !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
 
    .et_pb_wc_cart_products table.shop_table.cart tbody tr:last-child td.actions {
        border-bottom: none !important;
        padding-top: 20px !important;
    }
}

.et_pb_wc_cart_products table.shop_table.cart th.product-remove,
.et_pb_wc_cart_products table.shop_table.cart td.product-remove {
    width: 5% !important;
    text-align: center !important;
}

.et_pb_wc_cart_products table.shop_table.cart th.product-thumbnail,
.et_pb_wc_cart_products table.shop_table.cart td.product-thumbnail {
    width: 10% !important;
}

.et_pb_wc_cart_products table.shop_table.cart td.product-thumbnail img {
    width: 100% !important;
    height: auto !important;
    max-width: 70px !important;
    border-radius: 6px !important;
}

.et_pb_wc_cart_products table.shop_table.cart th.product-name,
.et_pb_wc_cart_products table.shop_table.cart td.product-name {
    width: 35% !important;
}

.et_pb_wc_cart_products table.shop_table.cart th.product-price,
.et_pb_wc_cart_products table.shop_table.cart td.product-price {
    width: 15% !important;
}

.et_pb_wc_cart_products table.shop_table.cart th.product-quantity,
.et_pb_wc_cart_products table.shop_table.cart td.product-quantity {
    width: 18% !important;
}

.et_pb_wc_cart_products table.shop_table.cart th.product-subtotal,
.et_pb_wc_cart_products table.shop_table.cart td.product-subtotal {
    width: 17% !important;
}

/* --- 4.2 Tabla — vista responsiva (móvil, ≤768px) --- */
@media (max-width: 768px) {

    .et_pb_wc_cart_products table.shop_table.cart {
        table-layout: auto !important;
    }

    /* Quita el ":" fantasma que WooCommerce agrega en celdas sin data-title */
    .et_pb_wc_cart_products table.shop_table.cart td.product-remove::before,
    .et_pb_wc_cart_products table.shop_table.cart td.product-thumbnail::before,
    .et_pb_wc_cart_products table.shop_table.cart td.actions::before {
        content: none !important;
    }

    /* Card de cada producto */
    .et_pb_wc_cart_products table.shop_table.cart tr.cart_item {
        display: block !important;
        position: relative !important;
        border: 1px solid #20272D !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        overflow: hidden !important;
    }

    /* Botón eliminar (×) — insignia flotante arriba a la derecha */
    .et_pb_wc_cart_products table.shop_table.cart td.product-remove {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: auto !important;
        padding: 0 !important;
    }

    .et_pb_wc_cart_products table.shop_table.cart td.product-remove a.remove {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background-color: rgba(220, 101, 95, 0.12) !important; /* Error, tenue */
        font-size: 16px !important;
    }

    /* Miniatura + nombre del producto, lado a lado */
    .et_pb_wc_cart_products table.shop_table.cart td.product-thumbnail {
        display: inline-block !important;
        width: 60px !important;
        vertical-align: top !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .et_pb_wc_cart_products table.shop_table.cart td.product-thumbnail img {
        max-width: 60px !important;
        border-radius: 6px !important;
    }

    .et_pb_wc_cart_products table.shop_table.cart td.product-name {
        display: inline-block !important;
        width: calc(100% - 76px) !important;
        vertical-align: top !important;
        padding: 0 0 0 12px !important;
        margin: 0 0 8px 0 !important;
    }

    .et_pb_wc_cart_products table.shop_table.cart td.product-name::before {
        content: none !important; /* se oculta "Producto:", el nombre ya es autoexplicativo */
    }
    
    .et_pb_wc_cart_products table.shop_table.cart td.product-name,
    .et_pb_wc_cart_products table.shop_table.cart td.product-name a {
        text-align: left !important;
    }

    /* Precio / Cantidad / Subtotal — filas tipo "recibo":
       etiqueta a la izquierda, valor a la derecha */
    .et_pb_wc_cart_products table.shop_table.cart td.product-price,
    .et_pb_wc_cart_products table.shop_table.cart td.product-quantity,
    .et_pb_wc_cart_products table.shop_table.cart td.product-subtotal {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        border-top: 1px solid #20272D !important;
    }

    .et_pb_wc_cart_products table.shop_table.cart td.product-price::before,
    .et_pb_wc_cart_products table.shop_table.cart td.product-quantity::before,
    .et_pb_wc_cart_products table.shop_table.cart td.product-subtotal::before {
        display: inline !important;
        margin: 0 !important;
        color: #A7AFB5 !important;
        font-weight: 600 !important;
        font-size: 13px !important;
    }

    /* El monto (Bs. XXX,00) sin cortarse en 2 líneas */
    .et_pb_wc_cart_products table.shop_table.cart .amount,
    .et_pb_wc_cart_products table.shop_table.cart .woocommerce-Price-amount {
        white-space: nowrap !important;
        font-size: 16px !important;
    }

    /* Fila de acciones (cupón + actualizar carrito) */
    .et_pb_wc_cart_products table.shop_table.cart td.actions {
        display: block !important;
        width: 100% !important;
        padding: 16px 0 0 0 !important;
        border: none !important;
    }
    .et_pb_wc_cart_products table.shop_table.cart td.actions .coupon {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    }
     
    .et_pb_wc_cart_products table.shop_table.cart td.actions .coupon label {
        text-align: left !important;
        color: #A7AFB5 !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        margin: 0 !important;
    }
     
    .et_pb_wc_cart_products table.shop_table.cart td.actions .coupon input#coupon_code {
        width: 100% !important;
        box-sizing: border-box !important;
    }
     
    .et_pb_wc_cart_products table.shop_table.cart td.actions .coupon button[name="apply_coupon"] {
        width: 100% !important;
    }
     
    .et_pb_wc_cart_products table.shop_table.cart td.actions button[name="update_cart"] {
        width: 100% !important;
        margin-top: 12px !important;
    }
}

/* --- 4.3 Input de cantidad --- */
.et_pb_wc_cart_products .quantity input.qty {
    background-color: #13191E !important;
    border: 1px solid #20272D !important;
    color: #E4E8EB !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 10px 8px !important;
    height: auto !important;
    max-width: 70px !important;
    box-sizing: border-box !important;
    -moz-appearance: textfield !important; /* Firefox: oculta flechas nativas */
}

.et_pb_wc_cart_products .quantity input.qty:focus {
    border-color: #3ACED6 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(58, 206, 214, 0.2) !important;
}

/* Oculta las flechas nativas de Chrome/Safari */
.et_pb_wc_cart_products .quantity input.qty::-webkit-outer-spin-button,
.et_pb_wc_cart_products .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* --- 4.4 Botones: Finalizar compra / Aplicar cupón / Actualizar carrito --- */

/* Finalizar compra — verde "Éxito" (acción de conversión) */
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward {
    display: inline-block !important;
    background-color: #6FB880 !important;
    color: #090E12 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward:focus {
    background-color: #5E9C6D !important;
    color: #090E12 !important;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward::after {
    display: none !important;
    content: none !important;
}

/* Aplicar cupón — cian primario (CTA secundario) */
.woocommerce .coupon button.button[name="apply_coupon"] {
    display: inline-block !important;
    background-color: transparent !important;
    color: #3ACED6 !important;
    border: 1px solid #3ACED6 !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    cursor: pointer;
}

.woocommerce .coupon button.button[name="apply_coupon"]:hover,
.woocommerce .coupon button.button[name="apply_coupon"]:focus {
    background-color: #00B4BC !important;
    border-color: #00B4BC !important;
    color: #090E12 !important;
}

.woocommerce .coupon button.button[name="apply_coupon"]::after {
    display: none !important;
    content: none !important;
}

.woocommerce .coupon input#coupon_code {
    background-color: #13191E !important;
    border: 1px solid #20272D !important;
    color: #E4E8EB !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
}

.woocommerce .coupon input#coupon_code:focus {
    border-color: #3ACED6 !important;
    outline: none !important;
}

/* Actualizar carrito — neutro (acción utilitaria, menor jerarquía) */
.woocommerce.woocommerce button.button[name="update_cart"] {
    display: inline-block !important;
    background-color: transparent !important;
    color: #A7AFB5 !important;
    border: 1px solid #68737B !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.woocommerce.woocommerce button.button[name="update_cart"]:hover,
.woocommerce.woocommerce button.button[name="update_cart"]:focus {
    background-color: #363E45 !important;
    color: #F3F5F7 !important;
    -webkit-text-fill-color: #F3F5F7 !important;
    border-color: #363E45 !important;
}

.woocommerce.woocommerce button.button[name="update_cart"]:disabled,
.woocommerce.woocommerce button.button[name="update_cart"][disabled],
.woocommerce.woocommerce button.button[name="update_cart"]:disabled[disabled] {
    color: #68737B !important;
    -webkit-text-fill-color: #68737B !important;
    background-color: transparent !important;
    border: 1px solid #20272D !important;
    border-color: #20272D !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

.woocommerce.woocommerce button.button[name="update_cart"]::after {
    display: none !important;
    content: none !important;
}

/* ================================================================
   4.5 CARRITO VACÍO
   Insertar al final de la sección 4 (Carrito)
   ================================================================ */

/* Quita el fondo blanco que WooCommerce trae por defecto en .woocommerce
   cuando el módulo no tiene tabla que mostrar */
.et_pb_wc_cart_products {
    background-color: transparent !important;
}

.et_pb_wc_cart_empty {
    padding: 48px 0 !important;
}

/* Mensaje inyectado por JS (ver funciones.php) */
.gs-carrito-vacio {
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.gs-carrito-vacio p {
    color: #A7AFB5;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.gs-carrito-vacio p:first-child {
    color: #F3F5F7;
    font-size: 18px;
    font-weight: 700;
}

.gs-carrito-vacio a.gs-volver-tienda {
    display: inline-block;
    margin-top: 20px;
    background-color: #3ACED6;
    color: #090E12;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.gs-carrito-vacio a.gs-volver-tienda:hover {
    background-color: #00B4BC;
}

.et_pb_row_1_tb_body,
.et_pb_row_1_tb_body .et_pb_column,
.et_pb_wc_cart_products,
.et_pb_wc_cart_products .et_pb_module_inner {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
/* ================================================================
   5. CHECKOUT (/finalizar-compra/)
   ================================================================ */

/* --- 5.1 Títulos de sección --- */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3 {
    color: #F3F5F7 !important;
    font-weight: 700 !important;
}

/* --- 5.2 Card "Detalles de facturación" --- */
.woocommerce-checkout .woocommerce-billing-fields {
    background-color: #13191E !important;
    border: 1px solid #20272D !important;
    border-radius: 12px !important;
    padding: 24px !important;
}

.woocommerce-checkout .woocommerce-billing-fields h3 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* --- 5.3 Layout de campos: Nombre + Apellido en la misma fila,
   Email y Celular a ancho completo --- */
.woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 20px !important;
    column-gap: 16px !important;
}

.woocommerce-billing-fields__field-wrapper .form-row {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.woocommerce-billing-fields__field-wrapper #billing_first_name_field,
.woocommerce-billing-fields__field-wrapper #billing_last_name_field {
    width: calc(50% - 8px) !important;
}

@media (max-width: 480px) {
    .woocommerce-billing-fields__field-wrapper #billing_first_name_field,
    .woocommerce-billing-fields__field-wrapper #billing_last_name_field {
        width: 100% !important;
    }
}

/* --- 5.4 Campos de facturación: inputs, labels, checkbox de cuenta --- */
.woocommerce-checkout .woocommerce-billing-fields input.input-text,
.woocommerce-checkout .woocommerce-additional-fields input.input-text,
.woocommerce-checkout .woocommerce-account-fields input.input-text,
.woocommerce-checkout .woocommerce-account-fields input[type="password"] {
    background-color: #13191E !important;
    border: 1px solid #20272D !important;
    color: #E4E8EB !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout input[type="password"]:focus {
    border-color: #3ACED6 !important;
    outline: none !important;
}

/* Label siempre en su propia línea, arriba del input */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row input.input-text {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout label {
    color: #A7AFB5 !important;
}

.woocommerce-checkout .woocommerce-input-wrapper .required {
    color: #DC655F !important;
}

/* Checkbox "Crear una cuenta" */
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .woocommerce-account-fields label,
.woocommerce-checkout p.create-account {
    color: #A7AFB5 !important;
}

/* --- 5.5 "Tu pedido" — tabla de resumen (review order) --- */
.woocommerce-checkout-review-order-table {
    background-color: #13191E !important;
    border: 1px solid #20272D !important;
    border-radius: 12px !important;
    padding: 8px !important;
}

.woocommerce-checkout-review-order-table thead th,
.woocommerce-checkout-review-order-table tbody th,
.woocommerce-checkout-review-order-table .product-name,
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table td {
    color: #E4E8EB !important;
    border-color: #20272D !important;
}

.woocommerce-checkout-review-order-table .cart-subtotal th,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    color: #F3F5F7 !important;
    font-weight: 700 !important;
}

.woocommerce-checkout-review-order-table .amount {
    color: #E4E8EB !important;
}

/* --- 5.6 Métodos de pago (radio buttons + descripción) --- */
ul.wc_payment_methods li.wc_payment_method {
    border-color: #20272D !important;
    color: #E4E8EB !important;
}

ul.wc_payment_methods li.wc_payment_method label {
    color: #E4E8EB !important;
}

ul.wc_payment_methods input[type="radio"] {
    accent-color: #3ACED6 !important;
}

/* Recuadro de instrucciones de pago (ej: datos bancarios de "Transferencia bancaria directa") */
ul.wc_payment_methods .payment_box {
    background-color: #1A222A !important;
    border: 1px solid #20272D !important;
    border-radius: 8px !important;
    color: #E4E8EB !important;
}

ul.wc_payment_methods .payment_box p,
ul.wc_payment_methods .payment_box ul,
ul.wc_payment_methods .payment_box li {
    color: #E4E8EB !important;
}

ul.wc_payment_methods .payment_box::before {
    border-bottom-color: #1A222A !important; /* la flechita que apunta al radio seleccionado */
}

/* --- 5.7 Textos de privacidad y términos y condiciones --- */
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p,
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-terms-and-conditions-wrapper label {
    color: #A7AFB5 !important;
}

.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a {
    color: #3ACED6 !important;
}

/* --- 5.8 Botón "Realizar el pedido" — mismo verde que "Finalizar compra" --- */
#place_order,
.woocommerce-checkout #payment #place_order {
    display: inline-block !important;
    background-color: #6FB880 !important;
    color: #090E12 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    width: 100% !important;
}

#place_order:hover,
.woocommerce-checkout #payment #place_order:hover {
    background-color: #5E9C6D !important;
    color: #090E12 !important;
}

/* --- 5.9 Link "¿Tienes un cupón?" --- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.showcoupon {
    color: #3ACED6 !important;
}


/* ================================================================
   6. PÁGINA "GRACIAS POR TU PEDIDO" (order-received)
   Centra el contenido en una sola columna sin tocar el layout
   del Checkout (misma plantilla de Theme Builder, distinto estado)
   ================================================================ */

/* Ocultamos la columna izquierda, que en esta página queda vacía
   (ahí vive el formulario de facturación durante el checkout normal) */
body.woocommerce-order-received .et_pb_column_0_tb_body {
    display: none !important;
}

/* La fila pasa a centrar su contenido en vez de repartirlo en 2 columnas */
body.woocommerce-order-received .et_pb_row_0_tb_body {
    display: flex !important;
    justify-content: center !important;
    padding-top: 20px !important;
}

/* La columna derecha (con el contenido real) ocupa el ancho completo
   disponible, con un max-width para que se lea cómodo en pantallas grandes */
body.woocommerce-order-received .et_pb_column_1_tb_body {
    width: 100% !important;
    max-width: 700px !important;
    flex: 0 0 auto !important;
}


/* ================================================================
   7. COMPONENTES GLOBALES COMPARTIDOS
   ================================================================ */

/* --- 7.1 Overlay de carga (blockUI) de WooCommerce ---
   Por defecto es blanco semitransparente — lo oscurecemos para que
   combine con el tema mientras el carrito/checkout recalcula el total */
.woocommerce .blockUI.blockOverlay,
.woocommerce-checkout .blockUI.blockOverlay,
.woocommerce-cart .blockUI.blockOverlay {
    background-image: none !important;
    background-color: rgba(9, 14, 18, 0.75) !important; /* Ink 950 semitransparente */
    border-radius: 12px !important;
}

/* Spinner propio (círculo girando en cian) */
.woocommerce .blockUI.blockOverlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid rgba(58, 206, 214, 0.25);
    border-top-color: #3ACED6;
    border-radius: 50%;
    animation: gs-spin 0.8s linear infinite;
}

@keyframes gs-spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   8. MINI-CARRITO (bloque nativo WooCommerce "Mini Cart")
   Insertar como nueva sección 8 al final de style.css
   ================================================================ */

/* --- 8.1 Botón / ícono en el header --- */
.et_pb_code_0_tb_header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* antes: center */
    height: 100% !important;
}
 
.wc-block-mini-cart__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #E4E8EB !important;
    padding: 6px !important;
}

.wc-block-mini-cart__button:hover {
    color: #3ACED6 !important;
}

.wc-block-mini-cart__icon svg {
    fill: currentColor !important;
}

/* --- 8.2 Contador (badge) --- */
.wc-block-mini-cart__badge {
    background-color: #3ACED6 !important;
    color: #090E12 !important;
    font-weight: 700 !important;
    border: none !important;
}

/* ================================================================
   8.3 a 8.5 — PANEL LATERAL DEL CARRITO (drawer)
   REEMPLAZA por completo las secciones 8.3, 8.4 y 8.5 anteriores:
   esas usaban clases de un componente "Modal" genérico que no es
   el que WooCommerce renderiza acá. Estas son las clases reales.
   ================================================================ */

/* --- 8.3 Contenedor del panel --- */
.wc-block-mini-cart__drawer,
.wc-block-components-drawer__content,
.wp-block-woocommerce-mini-cart-contents {
    background-color: #13191E !important;
    color: #E4E8EB !important;
}

.wc-block-components-drawer__screen-overlay {
    background-color: rgba(9, 14, 18, 0.7) !important;
}

/* Botón de cerrar (X) */
.wc-block-components-drawer__close {
    background: transparent !important;
    color: #E4E8EB !important;
}

.wc-block-components-drawer__close:hover {
    color: #3ACED6 !important;
}

.wc-block-components-drawer__close svg path {
    fill: currentColor !important;
}

/* Título "Tu carrito (artículos: X)" */
.wc-block-mini-cart__title {
    color: #F3F5F7 !important;
    border-bottom: 1px solid #20272D !important;
    padding-bottom: 12px !important;
}

.wp-block-woocommerce-mini-cart-title-items-counter-block {
    color: #A7AFB5 !important;
    font-weight: 400 !important;
}

/* Encabezado de la tabla (Producto / Detalles / Total) */
.wc-block-cart-items__header th span {
    color: #68737B !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
}


/* --- 8.4 Items del carrito --- */
.wc-block-cart-items__row {
    border-bottom: 1px solid #20272D !important;
}

.wc-block-components-product-name {
    color: #F3F5F7 !important;
    font-weight: 600 !important;
}

.wc-block-components-product-name:hover {
    color: #3ACED6 !important;
}

.wc-block-components-product-metadata__description p {
    color: #A7AFB5 !important;
    font-size: 13px !important;
}

/* Precios */
.wc-block-components-product-price__value.is-discounted,
.wc-block-cart-item__total .wc-block-components-product-price__value {
    color: #3ACED6 !important;
    font-weight: 700 !important;
}

.wc-block-components-product-price__regular {
    color: #68737B !important;
}

.wc-block-components-sale-badge {
    background-color: #EEA563 !important;
    color: #090E12 !important;
    font-weight: 700 !important;
}

/* Selector de cantidad */
.wc-block-components-quantity-selector {
    border: 1px solid #20272D !important;
    background-color: #090E12 !important;
}

.wc-block-components-quantity-selector__button {
    color: #E4E8EB !important;
    background: transparent !important;
}

.wc-block-components-quantity-selector__button:hover {
    color: #3ACED6 !important;
}

.wc-block-components-quantity-selector__input {
    background: transparent !important;
    color: #E4E8EB !important;
}

/* Eliminar producto */
.wc-block-cart-item__remove-link {
    color: #DC655F !important;
}

.wc-block-cart-item__remove-link svg path {
    fill: currentColor !important;
}


/* --- 8.5 Pie del panel: subtotal y botones --- */
.wc-block-mini-cart__footer {
    border-top: 1px solid #20272D !important;
    background-color: #13191E !important;
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label {
    color: #E4E8EB !important;
    font-weight: 600 !important;
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
    color: #3ACED6 !important;
    font-weight: 700 !important;
}

.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
    color: #68737B !important;
    font-size: 12px !important;
}

.wc-block-mini-cart__footer-actions {
    display: flex !important;
    gap: 10px !important;
}

.wc-block-mini-cart__footer-actions a {
    flex: 1 1 50% !important;
    text-align: center !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}

/* "Ver mi carrito" — estilo contorno cian */
.wc-block-mini-cart__footer-cart {
    background-color: transparent !important;
    border: 1px solid #3ACED6 !important;
    color: #3ACED6 !important;
}

.wc-block-mini-cart__footer-cart:hover {
    background-color: rgba(58, 206, 214, 0.1) !important;
}

/* "Ir a finalizar compra" — botón sólido verde (Éxito) */
.wc-block-mini-cart__footer-checkout {
    background-color: #6FB880 !important;
    color: #090E12 !important;
    border: none !important;
}

.wc-block-mini-cart__footer-checkout:hover {
    background-color: #5E9C6D !important;
}

/* Carrito vacío */
.wc-block-mini-cart__empty-cart-wrapper p {
    color: #A7AFB5 !important;
}

.wc-block-mini-cart__shopping-button {
    background-color: #3ACED6 !important;
    color: #090E12 !important;
    font-weight: 700 !important;
}

.wc-block-mini-cart__shopping-button:hover {
    background-color: #00B4BC !important;
}

/* ================================================================
   8.6 MINI-CARRITO — Centrado del ícono (desktop y mobile)
   Insertar dentro de la sección 8, junto al resto de 8.1
   ================================================================ */
.et_pb_code_0_tb_header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.wc-block-mini-cart__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
@media (min-width: 768px) {
    .et_pb_row_0_tb_header {
        display: flex !important;
        align-items: center !important;
    }
 
    .et_pb_column_0_tb_header {
        flex: 1 1 auto !important;
    }
 
    .et_pb_column_1_tb_header {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 16px !important;
    }
}

/* ================================================================
   9. HEADER — MOBILE (hamburguesa + carrito)
   ================================================================ */
@media (max-width: 767px) {

    /* --- 9.1 Evita que el carrito se apile debajo del menú.
       Logo a la izquierda, carrito + hamburguesa juntos a la derecha --- */
    .et_pb_row_0_tb_header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .et_pb_column_0_tb_header,
    .et_pb_column_1_tb_header {
        width: auto !important;
        max-width: none !important;
    }

    .et_pb_column_0_tb_header {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .et_pb_column_1_tb_header {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        margin-left: 10px !important;
    }

    /* Separación entre el carrito y el botón hamburguesa */
    .et_pb_menu_0_tb_header .et_mobile_nav_menu {
        display: flex !important;
        align-items: center !important;
        margin-left: 10px !important;
    }

    /* Asegura que el carrito quede siempre visible por encima
       del panel del menú cuando este se abre */
    .et_pb_column_1_tb_header {
        position: relative !important;
        z-index: 20 !important;
    }

    /* --- 9.2 Panel desplegable del menú — estilo oscuro
       (antes salía con el fondo blanco por defecto de WordPress) --- */
    .et_mobile_nav_menu ul.et_mobile_menu {
        background-color: #13191E !important;
        border: 1px solid #20272D !important;
        border-radius: 8px !important;
        z-index: 15 !important;
    }

    .et_mobile_nav_menu ul.et_mobile_menu li {
        border-bottom: 1px solid #20272D !important;
    }

    .et_mobile_nav_menu ul.et_mobile_menu li a {
        color: #E4E8EB !important;
    }

    .et_mobile_nav_menu ul.et_mobile_menu li a:hover {
        color: #3ACED6 !important;
    }
    /* ================================================================
    9.3 HAMBURGUESA — color plomo claro de la paleta (Ink 300)
    Agregar dentro de la sección 9 (Header — mobile)
    ================================================================ */
    .et_mobile_nav_menu .mobile_menu_bar,
    .et_mobile_nav_menu .mobile_menu_bar::before {
        color: #A7AFB5 !important;
    }
}