/* ============================================
   CODIFICANDO - TIENDA ESTILO ASTRA
   Diseño minimalista, moderno y limpio
   Optimizado para Odoo 17 Community
   ============================================ */

/* === Variables CSS Personalizadas === */
:root {
    --astra-primary: #F28C28;
    --astra-primary-hover: #e07b1a;
    --astra-primary-light: rgba(242, 140, 40, 0.1);
    --astra-text: #1a1a2e;
    --astra-text-light: #6b7280;
    --astra-bg: #fafafa;
    --astra-white: #ffffff;
    --astra-border: #e5e7eb;
    --astra-border-light: #f3f4f6;
    --astra-success: #10b981;
    --astra-danger: #ef4444;
    --astra-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --astra-shadow-md: 0 4px 20px rgba(0,0,0,0.08);
    --astra-shadow-lg: 0 20px 50px rgba(0,0,0,0.12);
    --astra-shadow-hover: 0 25px 60px rgba(242, 140, 40, 0.15);
    --astra-radius: 12px;
    --astra-radius-lg: 16px;
    --astra-radius-xl: 20px;
    --astra-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   REGLAS DE ALTA ESPECIFICIDAD - FORZAR ESTILOS
   ============================================ */

/* Fondo de la tienda */
body #wrapwrap .oe_website_sale,
body .oe_website_sale,
#wrapwrap .oe_website_sale {
    background: var(--astra-bg) !important;
}

/* Contenedor grid de productos */
body #wrapwrap .o_wsale_products_grid_table_wrapper,
body .o_wsale_products_grid_table_wrapper,
#wrapwrap .o_wsale_products_grid_table_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    padding: 20px 0 !important;
}

body #wrapwrap .o_wsale_products_grid_table_wrapper table,
body #wrapwrap .o_wsale_products_grid_table_wrapper tbody,
body #wrapwrap .o_wsale_products_grid_table_wrapper tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: 100% !important;
}

/* TARJETA DE PRODUCTO - ALTA ESPECIFICIDAD */
body #wrapwrap .oe_website_sale td.oe_product,
body #wrapwrap td.oe_product,
body .oe_website_sale td.oe_product,
#wrapwrap td.oe_product,
td.oe_product {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    flex: 0 0 calc(25% - 20px) !important;
    max-width: calc(25% - 20px) !important;
    min-width: 260px !important;
}

body #wrapwrap .oe_website_sale .oe_product_cart,
body #wrapwrap .oe_product_cart,
body .oe_website_sale .oe_product_cart,
#wrapwrap .oe_product_cart,
.oe_website_sale .oe_product_cart {
    background: var(--astra-white) !important;
    border-radius: var(--astra-radius-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--astra-shadow-md) !important;
    border: 1px solid var(--astra-border) !important;
    transition: var(--astra-transition) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding: 0 !important;
}

body #wrapwrap .oe_product_cart:hover,
body .oe_product_cart:hover,
.oe_website_sale .oe_product_cart:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--astra-shadow-hover) !important;
    border-color: var(--astra-primary) !important;
}

/* IMAGEN DEL PRODUCTO - ALTA ESPECIFICIDAD */
body #wrapwrap .oe_product_cart .oe_product_image,
body .oe_product_cart .oe_product_image,
.oe_website_sale .oe_product_image {
    position: relative !important;
    width: 100% !important;
    min-height: 200px !important;
    max-height: 240px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 20px !important;
    border-radius: var(--astra-radius-xl) var(--astra-radius-xl) 0 0 !important;
}

body #wrapwrap .oe_product_image img,
body .oe_product_image img,
.oe_website_sale .oe_product_image img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 180px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    transition: transform 0.4s ease !important;
}

body #wrapwrap .oe_product_cart:hover .oe_product_image img {
    transform: scale(1.08) !important;
}

/* INFORMACIÓN DEL PRODUCTO - ALTA ESPECIFICIDAD */
body #wrapwrap .o_wsale_product_information,
body .o_wsale_product_information,
.oe_website_sale .o_wsale_product_information {
    padding: 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* NOMBRE DEL PRODUCTO */
body #wrapwrap .o_wsale_products_item_title,
body .o_wsale_products_item_title,
.oe_website_sale .o_wsale_products_item_title {
    margin: 0 !important;
}

body #wrapwrap .o_wsale_products_item_title a,
body .o_wsale_products_item_title a,
.oe_website_sale .o_wsale_products_item_title a,
body #wrapwrap h6 a,
.oe_product_cart h6 a {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--astra-text) !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
}

body #wrapwrap .o_wsale_products_item_title a:hover,
.oe_product_cart h6 a:hover {
    color: var(--astra-primary) !important;
}

/* PRECIO */
body #wrapwrap .product_price,
body .product_price,
.oe_website_sale .product_price {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

body #wrapwrap .oe_price,
body .oe_price,
.oe_website_sale .oe_price {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--astra-primary) !important;
}

body #wrapwrap .oe_currency_value,
body .oe_currency_value {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

body #wrapwrap .oe_striked_price,
body .oe_striked_price,
.text-muted.oe_striked_price {
    font-size: 0.9rem !important;
    color: var(--astra-text-light) !important;
    text-decoration: line-through !important;
}

/* BOTÓN AGREGAR AL CARRITO - ALTA ESPECIFICIDAD */
body #wrapwrap .oe_product_cart .o_wsale_product_btn,
body #wrapwrap .oe_product_cart .btn-primary,
body #wrapwrap .oe_product_cart .a-submit,
body #wrapwrap .oe_product_cart form[action*="cart"] button,
body .oe_product_cart .btn-primary,
.oe_website_sale .oe_product_cart .btn-primary,
.oe_product_cart .o_wsale_product_btn,
.oe_product_cart .a-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background: linear-gradient(135deg, var(--astra-primary) 0%, var(--astra-primary-hover) 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border: none !important;
    border-radius: var(--astra-radius) !important;
    cursor: pointer !important;
    transition: var(--astra-transition) !important;
    box-shadow: 0 4px 15px rgba(242, 140, 40, 0.35) !important;
    margin-top: auto !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body #wrapwrap .oe_product_cart .btn-primary:hover,
body .oe_product_cart .btn-primary:hover,
.oe_product_cart .o_wsale_product_btn:hover {
    background: linear-gradient(135deg, var(--astra-primary-hover) 0%, #d06a0a 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(242, 140, 40, 0.45) !important;
}

/* WISHLIST/FAVORITOS - FIJADO EN IMAGEN */
body #wrapwrap .oe_product_cart .o_add_wishlist,
body #wrapwrap .oe_product_image .o_add_wishlist,
body #wrapwrap .o_add_wishlist,
body #wrapwrap .o_wsale_wishlist_btn,
body .o_add_wishlist,
.oe_website_sale .o_add_wishlist,
.oe_product_cart .o_add_wishlist {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.95) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    border: none !important;
    z-index: 50 !important;
    transition: var(--astra-transition) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Asegurar wishlist SIEMPRE en área de imagen */
body #wrapwrap .oe_product_image {
    position: relative !important;
}

body #wrapwrap .oe_product_cart:hover .o_add_wishlist,
body .oe_product_cart:hover .o_add_wishlist {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

body #wrapwrap .o_add_wishlist:hover,
.oe_product_cart .o_add_wishlist:hover {
    background: var(--astra-primary) !important;
    transform: scale(1.1) !important;
}

body #wrapwrap .o_add_wishlist:hover .fa-heart,
body #wrapwrap .o_add_wishlist:hover i,
.o_add_wishlist:hover i {
    color: white !important;
}

/* Mover wishlist al área de imagen si está fuera */
body #wrapwrap .o_wsale_product_information .o_add_wishlist {
    position: absolute !important;
    top: -180px !important;
    right: 12px !important;
}

/* OCULTAR INDICADOR VERDE DE ESTADO */
body #wrapwrap .oe_product_cart .badge-success,
body #wrapwrap .o_ribbon_right,
body .oe_product_cart > .badge:first-child {
    display: none !important;
}

/* RESPONSIVE - MÓVIL */
@media (max-width: 992px) {
    body #wrapwrap td.oe_product,
    td.oe_product {
        flex: 0 0 calc(33.333% - 16px) !important;
        max-width: calc(33.333% - 16px) !important;
        min-width: 220px !important;
    }
}

@media (max-width: 768px) {
    body #wrapwrap td.oe_product,
    td.oe_product {
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        min-width: 160px !important;
    }
    
    body #wrapwrap .oe_product_cart .oe_product_image {
        min-height: 160px !important;
        padding: 15px !important;
    }
    
    body #wrapwrap .o_wsale_product_information {
        padding: 15px !important;
    }
}

@media (max-width: 576px) {
    body #wrapwrap td.oe_product,
    td.oe_product {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   1. CORRECCIÓN RESPONSIVE - IMÁGENES MÓVIL
   ============================================ */

/* Forzar visibilidad de TODAS las imágenes de producto en todos los dispositivos */
.oe_website_sale .oe_product_image,
.oe_website_sale .oe_product_image *,
.oe_product_cart .oe_product_image,
.o_wsale_product_grid_wrapper .oe_product_image {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Imágenes de producto - NUNCA ocultar */
.oe_product_image img,
.oe_product_image .img-fluid,
.oe_product_image picture img,
.oe_product_image span img,
.oe_product_image a img,
.oe_product_cart img,
.o_wsale_product_grid_wrapper img,
td.oe_product img,
.oe_product img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
    margin: 0 auto !important;
    border-radius: var(--astra-radius) !important;
}

/* Contenedor de imagen optimizado */
.oe_product_image {
    position: relative !important;
    width: 100% !important;
    min-height: 200px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 15px !important;
}

/* Corregir imágenes lazy loading */
.oe_product_image img[loading="lazy"],
.oe_product_image img.lazyload,
.oe_product_image img.o_image_loading {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 100px !important;
    background: var(--astra-border-light) !important;
}

/* Spans con background-image de Odoo 17 */
.oe_product_image [data-oe-field*="image"],
.oe_product_image [data-oe-model="product.template"],
.oe_product_image [data-oe-model="product.product"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 180px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* === RESPONSIVE MÓVIL - IMÁGENES === */
@media (max-width: 992px) {
    .oe_product_image {
        min-height: 180px !important;
    }
    .oe_product_image img {
        max-height: 180px !important;
    }
}

@media (max-width: 768px) {
    .oe_product_image {
        min-height: 160px !important;
        padding: 12px !important;
    }
    .oe_product_image img {
        max-height: 160px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    /* Asegurar que el contenedor NO se oculte */
    .oe_product,
    .oe_product_cart,
    .oe_product_image,
    .o_wsale_product_grid_wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    .oe_product_image {
        min-height: 140px !important;
        padding: 10px !important;
    }
    .oe_product_image img {
        max-height: 140px !important;
    }
}

/* Placeholder/Fallback si no hay imagen */
.oe_product_image:empty::after,
.oe_product_image .cod-no-image::after {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Crect width='100' height='100' fill='%23f3f4f6'/%3E%3Crect x='25' y='25' width='50' height='50' rx='8' fill='%23e5e7eb'/%3E%3Ccircle cx='40' cy='40' r='6' fill='%23d1d5db'/%3E%3Cpath d='M30 65 L42 50 L55 58 L70 40' stroke='%23d1d5db' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
}

/* ============================================
   2. BARRA DE HERRAMIENTAS - ICONOS LISTA/ORDENAR
   ============================================ */

/* Contenedor de la barra de herramientas */
.products_header,
.o_wsale_products_header,
.oe_website_sale .products_header {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 20px 24px !important;
    background: var(--astra-white) !important;
    border: 1px solid var(--astra-border) !important;
    border-radius: var(--astra-radius-lg) !important;
    margin-bottom: 30px !important;
    box-shadow: var(--astra-shadow-sm) !important;
}

/* === BOTONES GRID/LISTA - ESTILO ASTRA === */
.products_header .btn-group,
.o_wsale_products_searchbar_layout,
.o_wsale_layout_switcher {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 4px !important;
}

/* Botones de vista */
.products_header .btn-group .btn,
label.o_wsale_apply_grid,
label.o_wsale_apply_list,
.o_wsale_layout_switcher label,
.o_wsale_layout_switcher .btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: var(--astra-white) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    color: var(--astra-text-light) !important;
    cursor: pointer !important;
    transition: var(--astra-transition) !important;
}

.products_header .btn-group .btn:hover,
label.o_wsale_apply_grid:hover,
label.o_wsale_apply_list:hover,
.o_wsale_layout_switcher label:hover {
    background: var(--astra-primary-light) !important;
    border-color: var(--astra-primary) !important;
    color: var(--astra-primary) !important;
}

.products_header .btn-group .btn.active,
label.o_wsale_apply_grid.active,
label.o_wsale_apply_list.active,
.o_wsale_layout_switcher label.active {
    background: var(--astra-primary) !important;
    border-color: var(--astra-primary) !important;
    color: var(--astra-white) !important;
}

/* Iconos SVG modernos inline */
.fa-th-large,
.fa-th,
.bi-grid,
.bi-grid-3x3-gap {
    font-size: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.fa-list,
.fa-bars,
.bi-list,
.bi-list-ul {
    font-size: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='4' cy='6' r='1.5' fill='%236b7280'/%3E%3Ccircle cx='4' cy='12' r='1.5' fill='%236b7280'/%3E%3Ccircle cx='4' cy='18' r='1.5' fill='%236b7280'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Iconos blancos cuando activo */
.btn.active .fa-th-large,
.btn.active .fa-th,
label.active .fa-th-large,
label.active .bi-grid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
}

.btn.active .fa-list,
.btn.active .fa-bars,
label.active .fa-list,
label.active .bi-list {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='4' cy='6' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='4' cy='12' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='4' cy='18' r='1.5' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* === DROPDOWN ORDENAR - ESTILO ASTRA === */
.products_header select,
.products_header .dropdown-toggle,
.o_wsale_dropdown_sort,
#o_wsale_sort_dropdown,
.o_dropdown_menu_sort {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    padding: 12px 16px !important;
    padding-right: 40px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--astra-text) !important;
    background: var(--astra-white) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    cursor: pointer !important;
    transition: var(--astra-transition) !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
}

.products_header select:hover,
.products_header .dropdown-toggle:hover {
    border-color: var(--astra-primary) !important;
}

.products_header select:focus,
.products_header .dropdown-toggle:focus {
    border-color: var(--astra-primary) !important;
    box-shadow: 0 0 0 3px var(--astra-primary-light) !important;
    outline: none !important;
}

/* Dropdown menu */
.products_header .dropdown-menu,
.o_wsale_dropdown_menu {
    border: 1px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    box-shadow: var(--astra-shadow-md) !important;
    padding: 8px !important;
}

.products_header .dropdown-item {
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: var(--astra-text) !important;
    transition: var(--astra-transition) !important;
}

.products_header .dropdown-item:hover {
    background: var(--astra-primary-light) !important;
    color: var(--astra-primary) !important;
}

/* Búsqueda */
.products_header input[type="search"],
.products_header .form-control,
.o_wsale_products_searchbar input {
    flex: 1 !important;
    min-width: 200px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    background: var(--astra-white) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    transition: var(--astra-transition) !important;
}

.products_header input:focus {
    border-color: var(--astra-primary) !important;
    box-shadow: 0 0 0 3px var(--astra-primary-light) !important;
    outline: none !important;
}

/* ============================================
   3. GRID DE PRODUCTOS - ESTILO ASTRA
   ============================================ */

/* Contenedor principal del grid */
.o_wsale_products_grid_table_wrapper {
    background: transparent !important;
    padding: 0 !important;
}

.o_wsale_products_grid_table_wrapper table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.o_wsale_products_grid_table_wrapper tbody,
.o_wsale_products_grid_table_wrapper tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: 100% !important;
}

/* === TARJETAS DE PRODUCTO - ASTRA === */
.oe_product,
.o_wsale_products_grid_table_wrapper td {
    display: block !important;
    padding: 0 !important;
    flex: 0 0 calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
    margin-bottom: 0 !important;
    border: none !important;
}

.oe_product_cart,
.o_wsale_product_grid_wrapper {
    background: var(--astra-white) !important;
    border-radius: var(--astra-radius-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--astra-shadow-sm) !important;
    border: 1px solid var(--astra-border) !important;
    transition: var(--astra-transition) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.oe_product_cart:hover,
.o_wsale_product_grid_wrapper:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--astra-shadow-hover) !important;
    border-color: var(--astra-primary) !important;
}

/* Efecto zoom en imagen al hover */
.oe_product_image {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--astra-radius-xl) var(--astra-radius-xl) 0 0 !important;
}

.oe_product_cart:hover .oe_product_image img {
    transform: scale(1.08) !important;
}

.oe_product_image img {
    transition: transform 0.4s ease !important;
}

/* === BADGES/ETIQUETAS MODERNAS === */
.oe_product_cart .badge,
.oe_product_cart .o_ribbon,
.oe_product_cart .oe_ribbon {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 10 !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, var(--astra-success) 0%, #059669 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Badge Oferta */
.oe_product_cart .badge-danger,
.oe_product_cart .o_ribbon_promo,
.oe_product_cart [class*="sale"],
.oe_product_cart [class*="offer"] {
    background: linear-gradient(135deg, var(--astra-danger) 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Badge Nuevo */
.oe_product_cart .badge-primary,
.oe_product_cart [class*="new"] {
    background: linear-gradient(135deg, var(--astra-primary) 0%, var(--astra-primary-hover) 100%) !important;
    box-shadow: 0 4px 12px rgba(242, 140, 40, 0.3) !important;
}

/* === INFORMACIÓN DEL PRODUCTO === */
.o_wsale_product_information {
    padding: 20px !important;
    background: var(--astra-white) !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.o_wsale_products_item_title,
.o_wsale_product_information h6 {
    margin-bottom: 10px !important;
}

.o_wsale_products_item_title a,
.o_wsale_product_information h6 a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--astra-text) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: var(--astra-transition) !important;
}

.o_wsale_products_item_title a:hover {
    color: var(--astra-primary) !important;
}

/* === PRECIO - DESTACADO === */
.product_price {
    margin-top: auto !important;
    padding-top: 12px !important;
}

.oe_currency_value {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--astra-primary) !important;
}

.oe_has_price_prefix .oe_currency_value,
.product_price .oe_currency_value {
    font-size: 22px !important;
}

/* Precio tachado */
.text-muted.oe_striked_price,
.oe_striked_price {
    font-size: 14px !important;
    color: var(--astra-text-light) !important;
    text-decoration: line-through !important;
    margin-right: 8px !important;
}

/* Símbolo de moneda */
.oe_price .oe_currency_value::before,
.product_price .oe_currency_symbol {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* === BOTÓN AGREGAR AL CARRITO === */
.o_wsale_product_btn,
.oe_product_cart .btn-primary,
.oe_product_cart .a-submit,
.oe_product_cart form[action*="cart"] button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 16px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--astra-white) !important;
    background: linear-gradient(135deg, var(--astra-primary) 0%, var(--astra-primary-hover) 100%) !important;
    border: none !important;
    border-radius: var(--astra-radius) !important;
    cursor: pointer !important;
    transition: var(--astra-transition) !important;
    box-shadow: 0 4px 15px rgba(242, 140, 40, 0.3) !important;
}

.o_wsale_product_btn:hover,
.oe_product_cart .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(242, 140, 40, 0.4) !important;
}

/* Icono del carrito */
.o_wsale_product_btn .fa-shopping-cart::before,
.o_wsale_product_btn .bi-cart::before {
    content: '' !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* === WISHLIST/LISTA DE DESEOS === */
.o_add_wishlist,
.o_wsale_wishlist_btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--astra-white) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    z-index: 10 !important;
    transition: var(--astra-transition) !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.oe_product_cart:hover .o_add_wishlist,
.oe_product_cart:hover .o_wsale_wishlist_btn {
    opacity: 1 !important;
    visibility: visible !important;
}

.o_add_wishlist:hover {
    background: var(--astra-primary) !important;
    transform: scale(1.1) !important;
}

.o_add_wishlist i,
.o_add_wishlist .fa-heart {
    font-size: 0 !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F28C28' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

.o_add_wishlist:hover i,
.o_add_wishlist:hover .fa-heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
}

/* ============================================
   4. VISTA LISTA - ESTILO ASTRA
   ============================================ */

.o_wsale_layout_list .o_wsale_products_grid_table_wrapper tbody,
.o_wsale_layout_list .o_wsale_products_grid_table_wrapper tr {
    flex-direction: column !important;
    gap: 16px !important;
}

.o_wsale_layout_list .oe_product,
.o_wsale_layout_list td.oe_product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.o_wsale_layout_list .oe_product_cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 200px !important;
    border-radius: var(--astra-radius-lg) !important;
}

/* Imagen en vista lista */
.o_wsale_layout_list .oe_product_image {
    flex: 0 0 220px !important;
    max-width: 220px !important;
    min-height: 200px !important;
    border-radius: var(--astra-radius-lg) 0 0 var(--astra-radius-lg) !important;
    border-right: 1px solid var(--astra-border-light) !important;
}

.o_wsale_layout_list .oe_product_image img {
    max-height: 180px !important;
    border-radius: var(--astra-radius) !important;
}

/* Información en vista lista */
.o_wsale_layout_list .o_wsale_product_information {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 30px !important;
    gap: 30px !important;
}

/* Título en vista lista */
.o_wsale_layout_list .o_wsale_products_item_title {
    flex: 2 !important;
}

.o_wsale_layout_list .o_wsale_products_item_title a {
    font-size: 18px !important;
    font-weight: 700 !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
}

/* Descripción corta (si existe) */
.o_wsale_layout_list .o_wsale_product_short_description {
    flex: 3 !important;
    font-size: 14px !important;
    color: var(--astra-text-light) !important;
    line-height: 1.6 !important;
}

/* Precio en vista lista - DESTACADO */
.o_wsale_layout_list .product_price {
    flex: 1 !important;
    text-align: center !important;
    padding: 0 20px !important;
    margin: 0 !important;
    border-left: 1px solid var(--astra-border-light) !important;
}

.o_wsale_layout_list .product_price .oe_currency_value {
    font-size: 28px !important;
    font-weight: 800 !important;
    display: block !important;
}

/* Botón en vista lista */
.o_wsale_layout_list .o_wsale_product_btn {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 16px 32px !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* === RESPONSIVE VISTA LISTA === */
@media (max-width: 992px) {
    .o_wsale_layout_list .oe_product_cart {
        flex-direction: column !important;
    }
    
    .o_wsale_layout_list .oe_product_image {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        min-height: 180px !important;
        border-radius: var(--astra-radius-lg) var(--astra-radius-lg) 0 0 !important;
        border-right: none !important;
        border-bottom: 1px solid var(--astra-border-light) !important;
    }
    
    .o_wsale_layout_list .o_wsale_product_information {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 20px !important;
    }
    
    .o_wsale_layout_list .product_price {
        border: none !important;
        padding: 0 !important;
        text-align: left !important;
    }
    
    .o_wsale_layout_list .o_wsale_product_btn {
        width: 100% !important;
    }
}

/* ============================================
   5. RESPONSIVE GENERAL - GRID
   ============================================ */

@media (max-width: 1400px) {
    .oe_product,
    .o_wsale_products_grid_table_wrapper td {
        flex: 0 0 calc(33.333% - 16px) !important;
        max-width: calc(33.333% - 16px) !important;
    }
}

@media (max-width: 992px) {
    .oe_product,
    .o_wsale_products_grid_table_wrapper td {
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
    
    .o_wsale_products_grid_table_wrapper tbody,
    .o_wsale_products_grid_table_wrapper tr {
        gap: 16px !important;
    }
    
    .products_header {
        padding: 16px !important;
        gap: 12px !important;
    }
}

@media (max-width: 768px) {
    .oe_product,
    .o_wsale_products_grid_table_wrapper td {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
    
    .o_wsale_products_grid_table_wrapper tbody,
    .o_wsale_products_grid_table_wrapper tr {
        gap: 12px !important;
    }
    
    .o_wsale_product_information {
        padding: 16px !important;
    }
    
    .o_wsale_products_item_title a {
        font-size: 14px !important;
    }
    
    .oe_currency_value {
        font-size: 20px !important;
    }
    
    .o_wsale_product_btn {
        padding: 12px 16px !important;
        font-size: 13px !important;
    }
    
    /* Botón grande fácil de presionar en móvil */
    .o_wsale_product_btn {
        min-height: 48px !important;
    }
    
    /* Wishlist siempre visible en móvil */
    .o_add_wishlist,
    .o_wsale_wishlist_btn {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (max-width: 480px) {
    .oe_product,
    .o_wsale_products_grid_table_wrapper td {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }
    
    .o_wsale_products_grid_table_wrapper tbody,
    .o_wsale_products_grid_table_wrapper tr {
        gap: 10px !important;
    }
    
    .oe_product_image {
        min-height: 130px !important;
    }
    
    .o_wsale_product_information {
        padding: 14px !important;
    }
    
    .o_wsale_products_item_title a {
        font-size: 13px !important;
    }
    
    .oe_currency_value {
        font-size: 18px !important;
    }
    
    .o_wsale_product_btn {
        padding: 12px !important;
        font-size: 12px !important;
    }
    
    /* Barra de herramientas compacta */
    .products_header {
        padding: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .products_header .btn-group,
    .products_header select {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .products_header .btn-group .btn {
        flex: 1 !important;
    }
}

/* ============================================
   6. ANIMACIONES Y EFECTOS
   ============================================ */

/* Animación de entrada de productos */
@keyframes astraFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.oe_product_cart {
    animation: astraFadeInUp 0.5s ease forwards;
}

.o_wsale_products_grid_table_wrapper td:nth-child(1) .oe_product_cart { animation-delay: 0.05s; }
.o_wsale_products_grid_table_wrapper td:nth-child(2) .oe_product_cart { animation-delay: 0.1s; }
.o_wsale_products_grid_table_wrapper td:nth-child(3) .oe_product_cart { animation-delay: 0.15s; }
.o_wsale_products_grid_table_wrapper td:nth-child(4) .oe_product_cart { animation-delay: 0.2s; }

/* Efecto pulse en precio al hover */
@keyframes astraPricePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.oe_product_cart:hover .oe_currency_value {
    animation: astraPricePulse 0.3s ease;
}

/* ============================================
   7. PAGINACIÓN
   ============================================ */

.pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 50px !important;
    padding: 20px 0 !important;
}

.pagination .page-item .page-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--astra-text) !important;
    background: var(--astra-white) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    transition: var(--astra-transition) !important;
}

.pagination .page-item .page-link:hover {
    background: var(--astra-primary-light) !important;
    border-color: var(--astra-primary) !important;
    color: var(--astra-primary) !important;
}

.pagination .page-item.active .page-link {
    background: var(--astra-primary) !important;
    border-color: var(--astra-primary) !important;
    color: var(--astra-white) !important;
}

/* ============================================
   8. CATEGORÍAS - MEJORADO
   ============================================ */

/* Contenedor de categorías sidebar */
.o_wsale_offcanvas,
.o_wsale_offcanvas_content,
#wsale_search_offcanvas {
    background: var(--astra-white) !important;
    border-radius: var(--astra-radius-lg) !important;
    padding: 20px !important;
    box-shadow: var(--astra-shadow-md) !important;
}

/* Título de sección categorías */
.o_wsale_offcanvas h5,
.o_wsale_offcanvas .h5,
#wsale_search_offcanvas h5 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--astra-text) !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid var(--astra-primary) !important;
}

/* Lista de categorías */
.o_wsale_categories,
.nav-pills.o_wsale_categories,
.o_wsale_offcanvas ul,
.o_wsale_offcanvas nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Items de categoría */
.o_wsale_categories li a,
.o_wsale_offcanvas a,
.nav-pills .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--astra-text) !important;
    background: var(--astra-bg) !important;
    border: 1px solid transparent !important;
    border-radius: var(--astra-radius) !important;
    text-decoration: none !important;
    transition: var(--astra-transition) !important;
}

.o_wsale_categories li a:hover,
.o_wsale_offcanvas a:hover,
.nav-pills .nav-link:hover {
    background: var(--astra-primary-light) !important;
    border-color: var(--astra-primary) !important;
    color: var(--astra-primary) !important;
    transform: translateX(4px) !important;
}

/* Categoría activa */
.o_wsale_categories li.active a,
.o_wsale_offcanvas a.active,
.nav-pills .nav-link.active {
    background: var(--astra-primary) !important;
    border-color: var(--astra-primary) !important;
    color: var(--astra-white) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(242, 140, 40, 0.3) !important;
}

/* Contador de productos en categoría */
.o_wsale_categories .badge,
.nav-pills .badge {
    background: var(--astra-primary-light) !important;
    color: var(--astra-primary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
}

.nav-pills .nav-link.active .badge {
    background: rgba(255,255,255,0.2) !important;
    color: var(--astra-white) !important;
}

/* Filmstrip de categorías horizontal */
.o_wsale_filmstrip_container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    padding: 16px !important;
    background: var(--astra-white) !important;
    border-radius: var(--astra-radius-lg) !important;
    box-shadow: var(--astra-shadow-sm) !important;
}

.o_wsale_filmstrip_container button,
.o_wsale_filmstrip_container a {
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--astra-text) !important;
    background: var(--astra-bg) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: 25px !important;
    transition: var(--astra-transition) !important;
    white-space: nowrap !important;
}

.o_wsale_filmstrip_container button:hover,
.o_wsale_filmstrip_container a:hover {
    background: var(--astra-primary-light) !important;
    border-color: var(--astra-primary) !important;
    color: var(--astra-primary) !important;
}

.o_wsale_filmstrip_container button.active,
.o_wsale_filmstrip_container a.active {
    background: var(--astra-primary) !important;
    border-color: var(--astra-primary) !important;
    color: var(--astra-white) !important;
}

/* ============================================
   9. LAZY LOADING OPTIMIZADO
   ============================================ */

/* Placeholder mientras carga la imagen */
.oe_product_image img[loading="lazy"] {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: astraShimmer 1.5s infinite;
}

@keyframes astraShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Una vez cargada */
.oe_product_image img.loaded {
    animation: none;
    background: transparent;
}

/* ============================================
   10. PRECIO Y MONEDA - RESPETA PRICELIST ODOO
   ============================================ */

/* 
   IMPORTANTE: No forzar valores de precio estáticos.
   Usar las clases de Odoo que respetan pricelist:
   - oe_price
   - oe_currency_value  
   - monetary_field
*/

/* Contenedor de precio */
.product_price,
.oe_price_h4,
.oe_price {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* Símbolo de moneda dinámico */
.product_price .oe_currency_symbol,
.oe_price .oe_currency_symbol {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--astra-primary) !important;
}

/* Asegurar que el precio NO esté hardcodeado */
.product_price [t-esc],
.product_price [t-out],
.product_price [t-field],
.oe_price [t-esc],
.oe_price [t-out] {
    display: inline !important;
}

/* ============================================
   11. FORZAR VISIBILIDAD DE ELEMENTOS
   ============================================ */

/* Nunca ocultar estos elementos */
.oe_website_sale .products_header,
.oe_website_sale .btn-group,
.oe_website_sale .o_wsale_layout_switcher,
.oe_website_sale select[name="order"],
.oe_website_sale .o_dropdown_menu_sort,
.oe_website_sale .oe_product_image,
.oe_website_sale .oe_product img,
.oe_website_sale .product_price,
.oe_website_sale .o_wsale_product_btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Remover display:none accidentales */
.oe_product_image:not(.d-none),
.product_price:not(.d-none),
.o_wsale_product_btn:not(.d-none) {
    display: flex !important;
}
/* ============================================
   12. ICONO LISTA - FORZAR VISIBILIDAD
   ============================================ */

/* Contenedor de iconos grid/lista */
.o_wsale_layout_switcher,
.o_wsale_products_searchbar_layout,
.products_header .btn-group {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

/* Radio buttons ocultos pero funcionales */
.o_wsale_layout_switcher input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Labels como botones visibles */
.o_wsale_layout_switcher label,
.o_wsale_apply_grid,
.o_wsale_apply_list {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--astra-white) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    cursor: pointer !important;
    transition: var(--astra-transition) !important;
}

.o_wsale_layout_switcher label:hover {
    background: var(--astra-primary-light) !important;
    border-color: var(--astra-primary) !important;
}

.o_wsale_layout_switcher label.active,
.o_wsale_layout_switcher input:checked + label {
    background: var(--astra-primary) !important;
    border-color: var(--astra-primary) !important;
}

/* Iconos de grid y lista - Asegurar visibilidad */
.o_wsale_layout_switcher label i,
.o_wsale_layout_switcher label .fa,
.o_wsale_layout_switcher label .oi,
.o_wsale_layout_switcher label svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 16px !important;
    color: var(--astra-text-light) !important;
}

.o_wsale_layout_switcher label.active i,
.o_wsale_layout_switcher input:checked + label i {
    color: white !important;
}

/* ============================================
   13. BÚSQUEDA Y FILTROS MÓVIL - MEJORADO
   ============================================ */

/* Contenedor principal de búsqueda */
.o_wsale_products_searchbar,
.o_wsale_search,
.products_header .o_wsale_products_searchbar_form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
}

/* Input de búsqueda */
.o_wsale_products_searchbar input[type="search"],
.o_wsale_products_searchbar input[type="text"],
.o_wsale_products_searchbar .form-control,
input[name="search"] {
    flex: 1 !important;
    min-width: 200px !important;
    height: 48px !important;
    padding: 12px 48px 12px 16px !important;
    font-size: 15px !important;
    background: var(--astra-white) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    transition: var(--astra-transition) !important;
}

.o_wsale_products_searchbar input:focus {
    border-color: var(--astra-primary) !important;
    box-shadow: 0 0 0 4px var(--astra-primary-light) !important;
    outline: none !important;
}

/* Botón de búsqueda */
.o_wsale_products_searchbar button[type="submit"],
.o_wsale_products_searchbar .btn-search {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: var(--astra-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    color: white !important;
    cursor: pointer !important;
}

/* Contenedor de filtros */
.o_wsale_offcanvas_toggler,
.o_wsale_filters_toggler,
#o_wsale_offcanvas_filter {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 48px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--astra-text) !important;
    background: var(--astra-white) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    cursor: pointer !important;
    transition: var(--astra-transition) !important;
}

.o_wsale_offcanvas_toggler:hover,
.o_wsale_filters_toggler:hover {
    background: var(--astra-primary-light) !important;
    border-color: var(--astra-primary) !important;
    color: var(--astra-primary) !important;
}

/* Dropdown de ordenar */
.o_wsale_dropdown_sort,
select[name="order"],
.products_header select {
    height: 48px !important;
    min-width: 150px !important;
    padding: 12px 40px 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--astra-text) !important;
    background: var(--astra-white) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
}

/* ============================================
   14. MÓVIL - PRODUCTOS RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Barra de herramientas móvil */
    .products_header,
    .o_wsale_products_header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    /* Fila de búsqueda completa */
    .o_wsale_products_searchbar,
    .o_wsale_products_searchbar_form {
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    
    /* Input ocupa todo el ancho disponible */
    .o_wsale_products_searchbar input {
        flex: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    
    /* Fila de controles (filtros, ordenar, vista) */
    .products_header > div,
    .o_wsale_products_header > div {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
    
    /* Filtros y ordenar mismo tamaño */
    .o_wsale_offcanvas_toggler,
    select[name="order"] {
        flex: 1 !important;
        min-width: 120px !important;
    }
    
    /* Iconos grid/lista compactos */
    .o_wsale_layout_switcher {
        flex-shrink: 0 !important;
    }
    
    .o_wsale_layout_switcher label {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* === TARJETAS DE PRODUCTO MÓVIL === */
    .oe_product,
    .o_wsale_products_grid_table_wrapper td,
    td.oe_product {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 150px !important;
    }
    
    .o_wsale_products_grid_table_wrapper tbody,
    .o_wsale_products_grid_table_wrapper tr {
        gap: 10px !important;
    }
    
    /* Tarjeta compacta */
    .oe_product_cart {
        border-radius: var(--astra-radius) !important;
    }
    
    /* Imagen más pequeña */
    .oe_product_image {
        min-height: 140px !important;
        max-height: 160px !important;
        padding: 12px !important;
    }
    
    .oe_product_image img {
        max-height: 130px !important;
    }
    
    /* Información compacta */
    .o_wsale_product_information {
        padding: 12px !important;
        gap: 8px !important;
    }
    
    /* Nombre del producto */
    .o_wsale_products_item_title a {
        font-size: 13px !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        line-height: 1.3 !important;
    }
    
    /* Precio visible */
    .product_price,
    .oe_price {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 4px !important;
    }
    
    .oe_currency_value {
        font-size: 16px !important;
        font-weight: 700 !important;
    }
    
    .oe_striked_price {
        font-size: 12px !important;
    }
    
    /* Botón compacto */
    .o_wsale_product_btn,
    .oe_product_cart .btn-primary {
        padding: 10px 12px !important;
        font-size: 12px !important;
        min-height: 44px !important;
        border-radius: 8px !important;
    }
    
    /* Wishlist siempre visible en móvil */
    .o_add_wishlist {
        opacity: 1 !important;
        visibility: visible !important;
        width: 32px !important;
        height: 32px !important;
        top: 8px !important;
        right: 8px !important;
    }
    
    /* Badge compacto */
    .oe_product_cart .badge {
        font-size: 9px !important;
        padding: 4px 8px !important;
        top: 8px !important;
        left: 8px !important;
    }
}

@media (max-width: 480px) {
    /* Grid de 2 columnas siempre */
    .oe_product,
    .o_wsale_products_grid_table_wrapper td,
    td.oe_product {
        flex: 0 0 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        min-width: 140px !important;
    }
    
    .o_wsale_products_grid_table_wrapper tbody,
    .o_wsale_products_grid_table_wrapper tr {
        gap: 8px !important;
    }
    
    /* Imagen aún más compacta */
    .oe_product_image {
        min-height: 120px !important;
        max-height: 140px !important;
        padding: 10px !important;
    }
    
    .oe_product_image img {
        max-height: 110px !important;
    }
    
    /* Info más compacta */
    .o_wsale_product_information {
        padding: 10px !important;
    }
    
    .o_wsale_products_item_title a {
        font-size: 12px !important;
    }
    
    .oe_currency_value {
        font-size: 15px !important;
    }
    
    /* Botón muy compacto */
    .o_wsale_product_btn,
    .oe_product_cart .btn-primary {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }
    
    /* Barra de herramientas stack vertical */
    .products_header {
        padding: 12px !important;
    }
    
    .o_wsale_offcanvas_toggler,
    select[name="order"] {
        height: 44px !important;
        font-size: 13px !important;
    }
    
    /* Categorías horizontales scroll */
    .o_wsale_filmstrip_container {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 12px !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .o_wsale_filmstrip_container button,
    .o_wsale_filmstrip_container a {
        padding: 8px 14px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================
   15. ESTADO PUBLICADO/NO PUBLICADO
   ============================================ */

/* Ocultar indicador verde de estado */
.oe_product_cart > .badge-success:first-child,
.oe_product_cart > span.badge:first-child,
.o_ribbon_right {
    display: none !important;
}

/* Badge NO PUBLICADO más visible */
.oe_product_cart .ribbon[style*="not published"],
.oe_product_cart .badge:contains("NO PUBLICADO") {
    background: var(--astra-danger) !important;
    color: white !important;
    padding: 6px 12px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* ============================================
   16. CORRECCIONES CRÍTICAS - FEBRERO 2026
   Soluciona: grid 4 columnas, wishlist visible,
   caja naranja con texto visible, buscador
   ============================================ */

/* === GRID PRODUCTOS: FORZAR 4 COLUMNAS === */
body #wrapwrap .oe_website_sale td.oe_product,
body #wrapwrap .o_wsale_products_grid_table_wrapper td,
body .oe_website_sale td.oe_product,
.o_wsale_products_grid_table_wrapper td,
td.oe_product {
    flex: 0 0 calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
    min-width: 200px !important; /* Reducido de 260px */
    width: auto !important;
}

/* Contenedor grid optimizado */
body #wrapwrap .o_wsale_products_grid_table_wrapper tbody,
body #wrapwrap .o_wsale_products_grid_table_wrapper tr,
.o_wsale_products_grid_table_wrapper tbody,
.o_wsale_products_grid_table_wrapper tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

/* === WISHLIST: SIEMPRE VISIBLE === */
body #wrapwrap .o_add_wishlist,
body #wrapwrap .o_wsale_wishlist_btn,
body .oe_product_cart .o_add_wishlist,
body .oe_product_image .o_add_wishlist,
.oe_website_sale .o_add_wishlist,
.o_add_wishlist {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
    border: none !important;
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: all 0.25s ease !important;
}

/* Asegurar que el contenedor de imagen tiene position relative */
body #wrapwrap .oe_product_image,
.oe_product_image {
    position: relative !important;
}

/* Wishlist hover effect */
body #wrapwrap .o_add_wishlist:hover,
.o_add_wishlist:hover {
    background: var(--astra-primary) !important;
    transform: scale(1.08) !important;
    box-shadow: 0 5px 15px rgba(242, 140, 40, 0.4) !important;
}

body #wrapwrap .o_add_wishlist:hover i,
body #wrapwrap .o_add_wishlist:hover .fa,
.o_add_wishlist:hover i {
    color: white !important;
}

/* Icono corazón */
.o_add_wishlist i,
.o_add_wishlist .fa,
.o_add_wishlist .fa-heart {
    color: var(--astra-primary) !important;
    font-size: 16px !important;
}

/* === CAJA INFORMACIÓN PRODUCTO (NARANJA/BLANCO) === */
/* Resetear para evitar conflictos con estilo oscuro del tema */
body #wrapwrap .o_wsale_product_information,
body .o_wsale_product_information,
.oe_website_sale .o_wsale_product_information,
.o_wsale_product_information {
    background: var(--astra-white) !important;
    padding: 16px 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Nombre del producto - texto oscuro */
body #wrapwrap .o_wsale_product_information h6,
body #wrapwrap .o_wsale_product_information .o_wsale_products_item_title,
body #wrapwrap .o_wsale_products_item_title a,
body .o_wsale_products_item_title a,
.o_wsale_product_information h6 a,
.o_wsale_products_item_title a {
    color: var(--astra-text) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body #wrapwrap .o_wsale_products_item_title a:hover,
.o_wsale_products_item_title a:hover {
    color: var(--astra-primary) !important;
}

/* Precio - color naranja */
body #wrapwrap .o_wsale_product_information .product_price,
body #wrapwrap .product_price,
body .product_price,
.o_wsale_product_information .product_price {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: auto !important;
}

body #wrapwrap .product_price .oe_currency_value,
body #wrapwrap .oe_price .oe_currency_value,
body .product_price .oe_currency_value,
.oe_currency_value {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--astra-primary) !important;
}

body #wrapwrap .product_price span,
body .product_price span,
.product_price span {
    color: var(--astra-text) !important;
}

/* Símbolo de moneda */
body #wrapwrap .oe_currency_symbol,
.oe_currency_symbol {
    color: var(--astra-primary) !important;
    font-size: inherit !important;
}

/* Precio tachado */
body #wrapwrap .oe_striked_price,
.oe_striked_price {
    color: var(--astra-text-light) !important;
    font-size: 0.85rem !important;
    text-decoration: line-through !important;
}

/* === BUSCADOR: TAMAÑO CORRECTO === */
body #wrapwrap .products_header input[type="search"],
body #wrapwrap .products_header .form-control,
body #wrapwrap .o_wsale_products_searchbar_form input,
body .o_wsale_products_searchbar_form input,
.products_header input[type="search"],
.o_wsale_products_searchbar input {
    min-width: 280px !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    background: var(--astra-white) !important;
    border: 2px solid var(--astra-border) !important;
    border-radius: var(--astra-radius) !important;
    transition: var(--astra-transition) !important;
    color: var(--astra-text) !important;
}

body #wrapwrap .products_header input:focus,
.products_header input:focus {
    border-color: var(--astra-primary) !important;
    box-shadow: 0 0 0 4px var(--astra-primary-light) !important;
    outline: none !important;
}

/* Contenedor del buscador */
body #wrapwrap .o_wsale_products_searchbar_form,
.o_wsale_products_searchbar_form {
    flex: 1 !important;
    max-width: 450px !important;
}

/* === IMÁGENES PRODUCTO: ASEGURAR VISIBILIDAD === */
body #wrapwrap .oe_product_image img,
body .oe_product_image img,
.oe_product_image img,
.oe_product_cart img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 180px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* === OCULTAR BADGE VERDE DE ESTADO === */
body #wrapwrap .oe_product_cart > .badge-success:first-child,
body #wrapwrap .oe_product_cart > span.badge:first-child:not(.badge-danger),
.oe_product_cart > .badge-success:first-child,
.oe_product_cart > span.o_ribbon:first-child,
.o_ribbon_right {
    display: none !important;
}

/* === OVERRIDE: Cancelar span blanco del style.css móvil === */
@media screen and (max-width: 768px) {
    /* Forzar color correcto en spans */
    body .oe_website_sale span,
    body .o_wsale_product_information span,
    body .product_price span,
    body .o_wsale_products_item_title span,
    .oe_website_sale .oe_product_cart span {
        color: var(--astra-text) !important;
    }
    
    /* Excepción: spans dentro de precios mantienen naranja */
    body .product_price .oe_currency_value,
    body .oe_price span,
    .product_price .oe_currency_value {
        color: var(--astra-primary) !important;
    }
    
    /* Grid en móvil: 2 columnas */
    body #wrapwrap td.oe_product,
    .o_wsale_products_grid_table_wrapper td,
    td.oe_product {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        min-width: 150px !important;
    }
    
    .o_wsale_products_grid_table_wrapper tbody,
    .o_wsale_products_grid_table_wrapper tr {
        gap: 12px !important;
    }
}

@media screen and (max-width: 480px) {
    /* Una columna en dispositivos muy pequeños */
    body #wrapwrap td.oe_product,
    td.oe_product {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   17. CORRECCIONES ENCABEZADOS HERO - FEBRERO 2026
   Soluciona: texto invisible en banners de páginas
   ============================================ */

/* === CENTRO DE AYUDA (voltro_docs) === */
body #wrapwrap .docs-hero h1,
body .docs-hero h1,
.docs-hero h1,
#wrap .docs-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* El span .highlight mantiene su gradient naranja */
body #wrapwrap .docs-hero h1 .highlight,
body .docs-hero h1 .highlight,
.docs-hero h1 .highlight {
    background: linear-gradient(135deg, #F28C28 0%, #FFB366 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body #wrapwrap .docs-hero p,
body .docs-hero p,
.docs-hero p,
#wrap .docs-hero p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

/* Stats del Centro de Ayuda */
body #wrapwrap .docs-hero .docs-stat-number,
body .docs-stat-number,
.docs-stat-number {
    color: #ffffff !important;
}

body #wrapwrap .docs-hero .docs-stat-label,
body .docs-stat-label,
.docs-stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* === SISTEMAS (theme_voltro) === */
body #wrapwrap .cod-sistemas-hero h1,
body .cod-sistemas-hero h1,
.cod-sistemas-hero h1,
#wrap .cod-sistemas-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-sistemas-hero p,
body .cod-sistemas-hero p,
.cod-sistemas-hero p,
#wrap .cod-sistemas-hero p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

/* Breadcrumb en páginas hero */
body #wrapwrap .cod-sistemas-hero .breadcrumb-item.active,
body .cod-sistemas-hero .breadcrumb-item.active,
.cod-sistemas-hero .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap .cod-sistemas-hero .breadcrumb a,
body .cod-sistemas-hero .breadcrumb a,
.cod-sistemas-hero .breadcrumb a {
    color: #F28C28 !important;
}

/* === GENÉRICO PARA HEROES CON FONDO OSCURO === */
/* NOTA: No aplicar a .cod-hero (home) que tiene fondo claro */
/* Incluye: docs-hero, cod-sistemas-hero, cod-planes-hero, cod-blog-hero, cod-about-hero, cod-contact-hero, cod-sd-hero, cod-post-hero */
body #wrapwrap .docs-hero h1,
body #wrapwrap .cod-sistemas-hero h1,
body #wrapwrap .cod-planes-hero h1,
body #wrapwrap .cod-blog-hero h1,
body #wrapwrap .cod-about-hero h1,
body #wrapwrap .cod-contact-hero h1,
body #wrapwrap .cod-sd-hero h1,
body #wrapwrap .cod-post-hero h1,
body #wrapwrap .blog-hero h1,
body #wrapwrap .astra-shop-header h1,
body .cod-planes-hero h1,
body .cod-blog-hero h1,
body .cod-about-hero h1,
body .cod-contact-hero h1,
body .cod-sd-hero h1,
body .cod-post-hero h1,
.cod-planes-hero h1,
.cod-blog-hero h1,
.cod-about-hero h1,
.cod-contact-hero h1,
.cod-sd-hero h1,
.cod-post-hero h1,
body #wrapwrap section[style*="background"][style*="26"] h1,
body #wrapwrap section[style*="background"][style*="30"] h1,
body #wrapwrap section[style*="1a1a2e"] h1,
body #wrapwrap section[style*="1a, 1a, 2e"] h1,
body #wrapwrap .o_colored_level[style*="26, 26, 46"] h1,
body #wrapwrap .o_colored_level[style*="rgb(26"] h1,
body #wrapwrap div[style*="background"][style*="26, 26, 46"] h1,
body #wrapwrap div[style*="background"][style*="1a1a2e"] h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Spans destacados en planes */
body #wrapwrap .cod-planes-hero h1 span,
body .cod-planes-hero h1 span,
.cod-planes-hero h1 span {
    color: #F28C28 !important;
    -webkit-text-fill-color: #F28C28 !important;
}

/* Spans highlight en blog */
body #wrapwrap .cod-blog-hero h1 .highlight,
body .cod-blog-hero h1 .highlight,
.cod-blog-hero h1 .highlight {
    background: linear-gradient(135deg, #F28C28 0%, #FFB366 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body #wrapwrap .docs-hero p,
body #wrapwrap .cod-sistemas-hero p,
body #wrapwrap .cod-planes-hero p,
body #wrapwrap .cod-blog-hero p,
body #wrapwrap .cod-about-hero p,
body #wrapwrap .cod-contact-hero p,
body #wrapwrap .cod-sd-hero p,
body #wrapwrap .cod-post-hero p,
body #wrapwrap .blog-hero p,
body #wrapwrap .astra-shop-header p,
body .cod-planes-hero p,
body .cod-blog-hero p,
body .cod-about-hero p,
body .cod-contact-hero p,
body .cod-sd-hero p,
body .cod-post-hero p,
.cod-planes-hero p,
.cod-blog-hero p,
.cod-about-hero p,
.cod-contact-hero p,
.cod-sd-hero p,
.cod-post-hero p,
body #wrapwrap section[style*="background"][style*="26"] p,
body #wrapwrap section[style*="background"][style*="30"] p,
body #wrapwrap section[style*="1a1a2e"] p,
body #wrapwrap .o_colored_level[style*="26, 26, 46"] p,
body #wrapwrap .o_colored_level[style*="rgb(26"] p,
body #wrapwrap div[style*="background"][style*="26, 26, 46"] p,
body #wrapwrap div[style*="background"][style*="1a1a2e"] p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

/* Breadcrumb en fondos oscuros */
body #wrapwrap section[style*="26, 26, 46"] .breadcrumb-item,
body #wrapwrap section[style*="1a1a2e"] .breadcrumb-item,
body #wrapwrap .o_colored_level[style*="rgb(26"] .breadcrumb-item {
    color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap section[style*="26, 26, 46"] .breadcrumb a,
body #wrapwrap section[style*="1a1a2e"] .breadcrumb a,
body #wrapwrap .o_colored_level[style*="rgb(26"] .breadcrumb a {
    color: #F28C28 !important;
}

/* === ESTILO UNIFICADO PARA TODOS LOS HEROES DE PÁGINAS INTERNAS === */
/* NOTA: NO aplica a .cod-hero (home) que tiene fondo claro */
/* Aplica a: cod-sistemas-hero, cod-planes-hero, cod-blog-hero, cod-about-hero, cod-contact-hero, cod-sd-hero, cod-post-hero, docs-hero */

/* Base styles - fondo y padding */
.cod-sistemas-hero,
.cod-planes-hero,
.cod-blog-hero,
.cod-about-hero,
.cod-contact-hero,
.cod-sd-hero,
.cod-post-hero,
.docs-hero,
.blog-hero,
.astra-shop-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #242332 100%) !important;
    padding: 80px 0 !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif;
}

/* H1 styling */
.cod-sistemas-hero h1,
.cod-planes-hero h1,
.cod-blog-hero h1,
.cod-about-hero h1,
.cod-contact-hero h1,
.cod-sd-hero h1,
.cod-post-hero h1,
.docs-hero h1,
.blog-hero h1,
.astra-shop-header h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    margin-bottom: 16px !important;
    font-family: 'Inter', sans-serif !important;
}

/* P styling */
.cod-sistemas-hero p,
.cod-planes-hero p,
.cod-blog-hero p,
.cod-about-hero p,
.cod-contact-hero p,
.cod-sd-hero p,
.cod-post-hero p,
.docs-hero p,
.blog-hero p,
.astra-shop-header p {
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
    font-size: 20px !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Breadcrumb styling */
.cod-sistemas-hero .breadcrumb,
.cod-planes-hero .breadcrumb,
.cod-blog-hero .breadcrumb,
.cod-about-hero .breadcrumb,
.cod-contact-hero .breadcrumb,
.cod-sd-hero .breadcrumb,
.cod-post-hero .breadcrumb,
.docs-hero .breadcrumb,
.blog-hero .breadcrumb,
.astra-shop-header .breadcrumb {
    justify-content: center !important;
    background: transparent !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
}

.cod-sistemas-hero .breadcrumb a,
.cod-planes-hero .breadcrumb a,
.cod-blog-hero .breadcrumb a,
.cod-about-hero .breadcrumb a,
.cod-contact-hero .breadcrumb a,
.cod-sd-hero .breadcrumb a,
.cod-post-hero .breadcrumb a,
.docs-hero .breadcrumb a,
.blog-hero .breadcrumb a,
.astra-shop-header .breadcrumb a {
    color: #F28C28 !important;
    text-decoration: none !important;
}

.cod-sistemas-hero .breadcrumb-item.active,
.cod-planes-hero .breadcrumb-item.active,
.cod-blog-hero .breadcrumb-item.active,
.cod-about-hero .breadcrumb-item.active,
.cod-contact-hero .breadcrumb-item.active,
.cod-sd-hero .breadcrumb-item.active,
.cod-post-hero .breadcrumb-item.active,
.docs-hero .breadcrumb-item.active,
.blog-hero .breadcrumb-item.active,
.astra-shop-header .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.7) !important;
}

.cod-sistemas-hero .breadcrumb-item + .breadcrumb-item::before,
.cod-planes-hero .breadcrumb-item + .breadcrumb-item::before,
.cod-blog-hero .breadcrumb-item + .breadcrumb-item::before,
.cod-about-hero .breadcrumb-item + .breadcrumb-item::before,
.cod-contact-hero .breadcrumb-item + .breadcrumb-item::before,
.cod-sd-hero .breadcrumb-item + .breadcrumb-item::before,
.cod-post-hero .breadcrumb-item + .breadcrumb-item::before,
.docs-hero .breadcrumb-item + .breadcrumb-item::before,
.blog-hero .breadcrumb-item + .breadcrumb-item::before,
.astra-shop-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Responsive - Tablet */
@media (max-width: 992px) {
    .cod-sistemas-hero h1,
    .cod-planes-hero h1,
    .cod-blog-hero h1,
    .cod-about-hero h1,
    .cod-contact-hero h1,
    .cod-sd-hero h1,
    .cod-post-hero h1,
    .docs-hero h1,
    .blog-hero h1,
    .astra-shop-header h1 {
        font-size: 36px !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .cod-sistemas-hero,
    .cod-planes-hero,
    .cod-blog-hero,
    .cod-about-hero,
    .cod-contact-hero,
    .cod-sd-hero,
    .cod-post-hero,
    .docs-hero,
    .blog-hero,
    .astra-shop-header {
        padding: 60px 0 !important;
    }
    
    .cod-sistemas-hero h1,
    .cod-planes-hero h1,
    .cod-blog-hero h1,
    .cod-about-hero h1,
    .cod-contact-hero h1,
    .cod-sd-hero h1,
    .cod-post-hero h1,
    .docs-hero h1,
    .blog-hero h1,
    .astra-shop-header h1 {
        font-size: 28px !important;
    }
    
    .cod-sistemas-hero p,
    .cod-planes-hero p,
    .cod-blog-hero p,
    .cod-about-hero p,
    .cod-contact-hero p,
    .cod-sd-hero p,
    .cod-post-hero p,
    .docs-hero p,
    .blog-hero p,
    .astra-shop-header p {
        font-size: 16px !important;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .cod-sistemas-hero,
    .cod-planes-hero,
    .cod-blog-hero,
    .cod-about-hero,
    .cod-contact-hero,
    .cod-sd-hero,
    .cod-post-hero,
    .docs-hero,
    .blog-hero,
    .astra-shop-header {
        padding: 40px 0 !important;
    }
    
    .cod-sistemas-hero h1,
    .cod-planes-hero h1,
    .cod-blog-hero h1,
    .cod-about-hero h1,
    .cod-contact-hero h1,
    .cod-sd-hero h1,
    .cod-post-hero h1,
    .docs-hero h1,
    .blog-hero h1,
    .astra-shop-header h1 {
        font-size: 24px !important;
    }
}

/* === HOME HERO (.cod-hero) - FONDO OSCURO, TEXTO BLANCO === */
body #wrapwrap .cod-hero h1,
body #wrapwrap .cod-hero .cod-hero-title,
body .cod-hero .cod-hero-title,
.cod-hero .cod-hero-title,
.cod-hero-title {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* El span "impulsa" en naranja gradient */
body #wrapwrap .cod-hero .cod-hero-title span,
body .cod-hero .cod-hero-title span,
.cod-hero-title span {
    background: linear-gradient(135deg, #F28C28 0%, #ff6b00 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body #wrapwrap .cod-hero p,
body #wrapwrap .cod-hero .cod-hero-text,
body .cod-hero .cod-hero-text,
.cod-hero-text {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

/* Badge del hero home */
body #wrapwrap .cod-hero .cod-hero-badge,
.cod-hero-badge {
    color: #ffffff !important;
    background: linear-gradient(135deg, #F28C28 0%, #ff9e45 100%) !important;
}

/* Stats del home */
body #wrapwrap .cod-hero .cod-stat-number,
body .cod-hero .cod-stat-number,
.cod-hero .cod-stat-number {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body #wrapwrap .cod-hero .cod-stat-number.orange {
    color: #F28C28 !important;
    -webkit-text-fill-color: #F28C28 !important;
}

body #wrapwrap .cod-hero .cod-stat-label,
body .cod-hero .cod-stat-label,
.cod-hero .cod-stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

/* Botones del hero */
body #wrapwrap .cod-hero .cod-btn-secondary,
body .cod-hero .cod-btn-secondary,
.cod-hero .cod-btn-secondary {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body #wrapwrap .cod-hero .cod-btn-secondary span,
body .cod-hero .cod-btn-secondary span,
.cod-hero .cod-btn-secondary span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Mockup del hero - garantizar visibilidad */
body #wrapwrap .cod-hero .col-lg-6,
body .cod-hero .col-lg-6,
.cod-hero .col-lg-6 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body #wrapwrap .cod-hero-mockup,
body .cod-hero-mockup,
.cod-hero-mockup {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body #wrapwrap .cod-mockup-screen,
body .cod-mockup-screen,
.cod-mockup-screen {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
    min-height: 380px !important;
}

body #wrapwrap .cod-mockup-inner,
body .cod-mockup-inner,
.cod-mockup-inner {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #F8FAFC !important;
}

/* === BOTONES DE SISTEMAS - TEXTO BLANCO === */
body #wrapwrap .cod-sistema-btn-dark,
body .cod-sistema-btn-dark,
.cod-sistema-btn-dark {
    background: #1E293B !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body #wrapwrap .cod-sistema-btn-dark span,
body .cod-sistema-btn-dark span,
.cod-sistema-btn-dark span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body #wrapwrap .cod-sistema-btn-primary,
body .cod-sistema-btn-primary,
.cod-sistema-btn-primary {
    background: #F28C28 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body #wrapwrap .cod-sistema-btn-primary span,
body .cod-sistema-btn-primary span,
.cod-sistema-btn-primary span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Hover states - mantener texto blanco */
body #wrapwrap .cod-sistema-btn-dark:hover,
body .cod-sistema-btn-dark:hover,
.cod-sistema-btn-dark:hover {
    background: #F28C28 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body #wrapwrap .cod-sistema-btn-dark:hover span,
body .cod-sistema-btn-dark:hover span,
.cod-sistema-btn-dark:hover span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body #wrapwrap .cod-sistema-btn-primary:hover,
body .cod-sistema-btn-primary:hover,
.cod-sistema-btn-primary:hover {
    background: #d97706 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body #wrapwrap .cod-sistema-btn-primary:hover span,
body .cod-sistema-btn-primary:hover span,
.cod-sistema-btn-primary:hover span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* === PÁGINA ABOUT/CONTACTO === */
body #wrapwrap .voltro-page-header h1,
body .voltro-page-header h1,
.voltro-page-header h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .voltro-page-header p,
body .voltro-page-header p,
.voltro-page-header p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* === BREADCRUMB GENERAL EN FONDO OSCURO === */
body #wrapwrap .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* === SECCIONES HEADER EN SHOP.XML Y OTRAS === */
body #wrapwrap .astra-shop-header h1,
body .astra-shop-header h1,
.astra-shop-header h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .astra-shop-header p,
body .astra-shop-header p,
.astra-shop-header p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   18. CORRECCIONES FOOTER - FEBRERO 2026
   Soluciona: texto invisible en pie de página
   ============================================ */

/* Footer con fondo oscuro - texto blanco */
body #wrapwrap footer,
body footer,
#footer,
footer {
    background: #1a1a2e !important;
    padding-top: 40px !important;
    margin-top: 0 !important;
}

/* Eliminar espacios extra del footer */
body #wrapwrap footer > .container:first-child,
body #wrapwrap footer > .row:first-child,
body #wrapwrap footer .oe_structure:first-child,
footer > .container:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Sección vacía antes del footer - colapsarla */
body #wrapwrap footer .oe_structure:empty,
body #wrapwrap footer section:empty,
body #wrapwrap footer .row:empty,
footer .oe_structure:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
}

/* Títulos del footer (Navegación, Nuestros Sistemas, etc.) */
body #wrapwrap footer h4,
body #wrapwrap footer h5,
body #wrapwrap .cod-footer-col h5,
body footer h4,
body footer h5,
.cod-footer-col h5 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Marca del footer */
body #wrapwrap .cod-footer-brand h4 span,
body .cod-footer-brand h4 span,
.cod-footer-brand h4 span:last-child {
    color: #ffffff !important;
}

/* Párrafos del footer */
body #wrapwrap footer p,
body footer p,
.cod-footer-brand p,
.cod-footer p {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

/* Links del footer */
body #wrapwrap footer a,
body #wrapwrap .cod-footer-col ul li a,
body footer a,
.cod-footer-col ul li a {
    color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap footer a:hover,
body #wrapwrap .cod-footer-col ul li a:hover,
.cod-footer-col ul li a:hover {
    color: #F28C28 !important;
}

/* Contacto del footer */
body #wrapwrap .cod-footer-contact p,
.cod-footer-contact p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Íconos de contacto */
body #wrapwrap .cod-footer-contact svg,
.cod-footer-contact svg {
    color: #F28C28 !important;
}

/* Links sociales */
body #wrapwrap .cod-footer-social a,
.cod-footer-social a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

body #wrapwrap .cod-footer-social a:hover,
.cod-footer-social a:hover {
    background: #F28C28 !important;
}

/* Footer bottom */
body #wrapwrap .cod-footer-bottom p,
.cod-footer-bottom p {
    color: rgba(255, 255, 255, 0.5) !important;
}

body #wrapwrap .cod-footer-legal a,
.cod-footer-legal a {
    color: rgba(255, 255, 255, 0.5) !important;
}

body #wrapwrap .cod-footer-legal a:hover,
.cod-footer-legal a:hover {
    color: #F28C28 !important;
}

/* ============================================
   19. COMPATIBILIDAD EDITOR WYSIWYG ODOO
   - Respeta estilos inline del editor
   - Permite font-size personalizado
   - NO sobrescribe con !important
   - Soporte para clases responsivas de Odoo
   ============================================ */

/* 
 * PRINCIPIO: Los estilos inline tienen prioridad.
 * Este tema NO interfiere con font-size inline del editor.
 * Solo aplica estilos BASE cuando no hay inline.
 */

/* === CLASES RESPONSIVAS DE ODOO (respetar siempre) === */
.display-1, .display-2, .display-3, .display-4,
.display-1-fs, .display-2-fs, .display-3-fs, .display-4-fs,
.h1, .h2, .h3, .h4, .h5, .h6,
.lead, .small, .text-muted,
.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 {
    /* Estas clases de Bootstrap/Odoo manejan su propio tamaño */
}

/* === ELEMENTOS CON ESTILO INLINE - NO INTERFERIR === */
/* Cualquier elemento con style inline mantiene sus valores */
[style*="font-size"] {
    /* El inline style tiene prioridad naturalmente, sin !important */
}

/* === SOPORTE PARA SPANS CON COLOR (sin forzar font-size) === */
/* Solo colorear, NO cambiar tamaño */
span[style*="color"] {
    /* Hereda font-size del padre SOLO si no tiene font-size propio */
}

/* === RESPONSIVE: Ajustes base para móvil (sin !important) === */
/* Estos aplican SOLO cuando no hay estilos inline */
@media (max-width: 768px) {
    /* Títulos base (sin estilos inline) */
    .oe_structure h1:not([style*="font-size"]),
    .s_text_block h1:not([style*="font-size"]),
    section h1:not([style*="font-size"]) {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }
    
    .oe_structure h2:not([style*="font-size"]),
    .s_text_block h2:not([style*="font-size"]),
    section h2:not([style*="font-size"]) {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }
    
    .oe_structure h3:not([style*="font-size"]),
    .s_text_block h3:not([style*="font-size"]),
    section h3:not([style*="font-size"]) {
        font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    }
    
    .oe_structure p:not([style*="font-size"]),
    .s_text_block p:not([style*="font-size"]) {
        font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    }
}

/* === TIENDA: Estilos específicos (estos SÍ usan !important) === */
/* Solo para elementos de producto que necesitan consistencia */
.oe_website_sale .oe_product_cart .product_price,
.o_wsale_product_information .product_price {
    font-size: 1.4rem !important;
}

/* ============================================
   20. VISIBILIDAD TEXTO EN FONDOS OSCUROS
   Soluciona problemas de texto invisible en:
   - Sistema detalle (stats)
   - Blog posts (metadata)
   - Newsletter widget
   - Docs manuales
   ============================================ */

/* === SISTEMA DETALLE - Sección de estadísticas === */
body #wrapwrap .cod-sd-benefits h2,
body .cod-sd-benefits h2,
.cod-sd-benefits h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-sd-benefit-number,
body .cod-sd-benefit-number,
.cod-sd-benefit-number,
.cod-sd-benefit-item .cod-sd-benefit-number {
    color: #F28C28 !important;
    -webkit-text-fill-color: #F28C28 !important;
    font-size: 42px !important;
    font-weight: 800 !important;
}

body #wrapwrap .cod-sd-benefit-label,
body .cod-sd-benefit-label,
.cod-sd-benefit-label,
.cod-sd-benefit-item .cod-sd-benefit-label {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px !important;
}

/* === BLOG POST - Metadata del autor y post === */
body #wrapwrap .cod-post-hero h1,
body .cod-post-hero h1,
.cod-post-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-post-subtitle,
body .cod-post-subtitle,
.cod-post-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
}

body #wrapwrap .cod-post-author-name,
body .cod-post-author-name,
.cod-post-author-name {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-post-author-role,
body .cod-post-author-role,
.cod-post-author-role {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

body #wrapwrap .cod-meta-info,
body #wrapwrap .cod-meta-info span,
body .cod-meta-info,
body .cod-meta-info span,
.cod-meta-info,
.cod-meta-info span {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap .cod-post-breadcrumb a,
body .cod-post-breadcrumb a,
.cod-post-breadcrumb a {
    color: #F28C28 !important;
    -webkit-text-fill-color: #F28C28 !important;
}

body #wrapwrap .cod-post-tags .cod-tag-link,
body .cod-post-tags .cod-tag-link,
.cod-tag-link {
    color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

body #wrapwrap .cod-post-category,
body .cod-post-category,
.cod-post-category {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* === NEWSLETTER WIDGET === */
body #wrapwrap .cod-newsletter-widget h3,
body .cod-newsletter-widget h3,
.cod-newsletter-widget h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-newsletter-widget p,
body .cod-newsletter-widget p,
.cod-newsletter-widget p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

body #wrapwrap .cod-newsletter-widget input,
body .cod-newsletter-widget input,
.cod-newsletter-widget input {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body #wrapwrap .cod-newsletter-widget input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* === DOCS MANUALES - Hero y metadata === */
body #wrapwrap .manual-hero h1,
body .manual-hero h1,
.manual-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .manual-hero .subtitle,
body .manual-hero .subtitle,
.manual-hero .subtitle {
    color: rgba(255, 255, 255, 0.75) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
}

body #wrapwrap .manual-meta span,
body .manual-meta span,
.manual-meta span {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap .manual-meta i,
body .manual-meta i,
.manual-meta i {
    color: #F28C28 !important;
}

body #wrapwrap .manual-meta-inline span,
body .manual-meta-inline span,
.manual-meta-inline span {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap .docs-manual-meta span,
body .docs-manual-meta span,
.docs-manual-meta span {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

/* === BLOG HERO - Lista de blogs === */
body #wrapwrap .cod-blog-hero h1,
body .cod-blog-hero h1,
.cod-blog-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-blog-hero p,
body .cod-blog-hero p,
.cod-blog-hero p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

body #wrapwrap .cod-hero-breadcrumb a,
body .cod-hero-breadcrumb a,
.cod-hero-breadcrumb a {
    color: #F28C28 !important;
}

body #wrapwrap .cod-hero-breadcrumb span,
body .cod-hero-breadcrumb span,
.cod-hero-breadcrumb span {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* === GENERICO - Cualquier sección con fondo #1a1a2e === */
body #wrapwrap section[style*="1a1a2e"] h2,
body #wrapwrap section[style*="1a1a2e"] h3,
body #wrapwrap section[style*="16213e"] h2,
body #wrapwrap section[style*="16213e"] h3,
body #wrapwrap div[style*="1a1a2e"] h2,
body #wrapwrap div[style*="1a1a2e"] h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap section[style*="1a1a2e"] p,
body #wrapwrap section[style*="16213e"] p,
body #wrapwrap div[style*="1a1a2e"] p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

body #wrapwrap section[style*="1a1a2e"] span,
body #wrapwrap section[style*="16213e"] span,
body #wrapwrap div[style*="1a1a2e"] span {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

/* Highlight spans en naranja */
body #wrapwrap section[style*="1a1a2e"] span.highlight,
body #wrapwrap .cod-blog-hero h1 .highlight,
.cod-blog-hero h1 span.highlight {
    background: linear-gradient(135deg, #F28C28 0%, #FFB366 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================
   21. VISIBILIDAD ADICIONAL - FEBRERO 2026
   - Newsletter en posts individuales  
   - Module hero (docs)
   - Manual hero (docs)
   - Blog post hero alineación
   ============================================ */

/* === NEWSLETTER MINI (Blog Posts Individuales) === */
body #wrapwrap .cod-newsletter-mini h4,
body .cod-newsletter-mini h4,
.cod-newsletter-mini h4 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-newsletter-mini p,
body .cod-newsletter-mini p,
.cod-newsletter-mini p {
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
}

body #wrapwrap .cod-newsletter-mini .mini-subs,
body .cod-newsletter-mini .mini-subs,
.cod-newsletter-mini .mini-subs {
    color: rgba(255, 255, 255, 0.5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

body #wrapwrap .cod-newsletter-mini input,
body .cod-newsletter-mini input,
.cod-newsletter-mini input {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body #wrapwrap .cod-newsletter-mini input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

body #wrapwrap .cod-newsletter-mini .mini-privacy,
body .cod-newsletter-mini .mini-privacy,
.cod-newsletter-mini .mini-privacy {
    color: rgba(255, 255, 255, 0.4) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important;
}

body #wrapwrap .cod-newsletter-mini .mini-benefit,
body .cod-newsletter-mini .mini-benefit,
.cod-newsletter-mini .mini-benefit {
    color: rgba(255, 255, 255, 0.65) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
}

body #wrapwrap .cod-newsletter-mini .mini-benefit span,
body .cod-newsletter-mini .mini-benefit span,
.cod-newsletter-mini .mini-benefit span {
    color: #10B981 !important;
    -webkit-text-fill-color: #10B981 !important;
}

/* === DOCS MODULE HERO === */
body #wrapwrap .module-hero h1,
body .module-hero h1,
.module-hero h1,
.module-hero-info h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .module-hero-info p,
body .module-hero-info p,
.module-hero-info p {
    color: rgba(255, 255, 255, 0.75) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
}

body #wrapwrap .module-breadcrumb a,
body .module-breadcrumb a,
.module-breadcrumb a {
    color: #F28C28 !important;
    -webkit-text-fill-color: #F28C28 !important;
}

body #wrapwrap .module-breadcrumb span,
body .module-breadcrumb span,
.module-breadcrumb span {
    color: rgba(255, 255, 255, 0.5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

body #wrapwrap .module-breadcrumb .current,
body .module-breadcrumb .current,
.module-breadcrumb .current {
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
}

body #wrapwrap .module-hero-stats span,
body .module-hero-stats span,
.module-hero-stats span {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap .module-hero-stats i,
body .module-hero-stats i,
.module-hero-stats i {
    color: #F28C28 !important;
}

/* === DOCS MANUAL HERO === */
body #wrapwrap .manual-hero h1,
body .manual-hero h1,
.manual-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .manual-hero .subtitle,
body .manual-hero .subtitle,
.manual-hero .subtitle {
    color: rgba(255, 255, 255, 0.75) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
}

body #wrapwrap .manual-breadcrumb a,
body .manual-breadcrumb a,
.manual-breadcrumb a {
    color: #F28C28 !important;
    -webkit-text-fill-color: #F28C28 !important;
}

body #wrapwrap .manual-breadcrumb span,
body .manual-breadcrumb span,
.manual-breadcrumb span {
    color: rgba(255, 255, 255, 0.5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

body #wrapwrap .manual-breadcrumb .current,
body .manual-breadcrumb .current,
.manual-breadcrumb .current {
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
}

body #wrapwrap .manual-meta span,
body .manual-meta span,
.manual-meta span {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap .manual-meta i,
body .manual-meta i,
.manual-meta i {
    color: #F28C28 !important;
}

/* === BLOG POST HERO - ALINEACION IZQUIERDA === */
body #wrapwrap .cod-post-hero,
body .cod-post-hero,
.cod-post-hero {
    text-align: left !important;
}

body #wrapwrap .cod-post-hero h1,
body .cod-post-hero h1,
.cod-post-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-align: left !important;
}

body #wrapwrap .cod-post-subtitle,
body .cod-post-subtitle,
.cod-post-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
    text-align: left !important;
}

body #wrapwrap .cod-post-breadcrumb,
body .cod-post-breadcrumb,
.cod-post-breadcrumb {
    justify-content: flex-start !important;
}

body #wrapwrap .cod-post-breadcrumb a,
body .cod-post-breadcrumb a,
.cod-post-breadcrumb a {
    color: #F28C28 !important;
    -webkit-text-fill-color: #F28C28 !important;
}

body #wrapwrap .cod-post-breadcrumb span,
body .cod-post-breadcrumb span,
.cod-post-breadcrumb span {
    color: rgba(255, 255, 255, 0.5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

body #wrapwrap .cod-post-category,
body .cod-post-category,
.cod-post-category {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-post-author-name,
body .cod-post-author-name,
.cod-post-author-name {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-post-author-role,
body .cod-post-author-role,
.cod-post-author-role {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}

body #wrapwrap .cod-meta-info,
body #wrapwrap .cod-meta-info span,
body .cod-meta-info,
body .cod-meta-info span,
.cod-meta-info,
.cod-meta-info span {
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

body #wrapwrap .cod-post-tags .cod-tag-link,
body .cod-post-tags .cod-tag-link,
.cod-tag-link {
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   22. BLOG POST - ALINEACIÓN Y CTA VISIBILITY
   - Febrero 2026
   ============================================ */

/* === SUBTITULO/DESCRIPCION - FORZAR IZQUIERDA === */
body #wrapwrap .cod-post-hero .container,
body .cod-post-hero .container,
.cod-post-hero .container {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

body #wrapwrap .cod-post-hero .cod-post-subtitle,
body .cod-post-hero .cod-post-subtitle,
.cod-post-hero .cod-post-subtitle,
.cod-post-subtitle {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}

body #wrapwrap .cod-post-hero h1,
body .cod-post-hero h1,
.cod-post-hero h1 {
    text-align: left !important;
    width: 100% !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-post-hero .cod-post-category,
body .cod-post-hero .cod-post-category,
.cod-post-category {
    align-self: flex-start !important;
}

body #wrapwrap .cod-post-meta,
body .cod-post-meta,
.cod-post-meta {
    justify-content: flex-start !important;
    width: 100% !important;
}

body #wrapwrap .cod-post-tags,
body .cod-post-tags,
.cod-post-tags {
    justify-content: flex-start !important;
    width: 100% !important;
}

/* === CTA SECTION - TE GUSTO ESTE ARTICULO === */
body #wrapwrap .cod-cta-section,
body .cod-cta-section,
.cod-cta-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #242332 100%) !important;
}

body #wrapwrap .cod-cta-card h3,
body .cod-cta-card h3,
.cod-cta-card h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body #wrapwrap .cod-cta-card p,
body .cod-cta-card p,
.cod-cta-card p {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
    font-size: 18px !important;
}

body #wrapwrap .cod-cta-btn.primary,
body .cod-cta-btn.primary,
.cod-cta-btn.primary {
    background: linear-gradient(135deg, #F28C28 0%, #e07b1a 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body #wrapwrap .cod-cta-btn.outline,
body .cod-cta-btn.outline,
.cod-cta-btn.outline {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    background: transparent !important;
}

body #wrapwrap .cod-cta-btn.outline:hover,
body .cod-cta-btn.outline:hover,
.cod-cta-btn.outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================
   23. HAMBURGER MENU MOBILE - FIX VISIBILITY
   - Febrero 2026 - Actualizado a SVG
   ============================================ */

/* === BOTON HAMBURGUESA MÓVIL === */
@media (max-width: 991px) {
    body #wrapwrap .cod-hamburger,
    body .cod-hamburger,
    .cod-hamburger,
    button.cod-hamburger,
    #codHamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: #f5f5f5 !important;
        border: none !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10000 !important;
        position: relative !important;
        box-sizing: border-box !important;
        font-size: 0 !important;
    }
    
    /* ICONO con ::before - MÁS CONFIABLE */
    body #wrapwrap .cod-hamburger::before,
    body .cod-hamburger::before,
    .cod-hamburger::before,
    button.cod-hamburger::before,
    #codHamburger::before,
    header .cod-hamburger::before,
    header button.cod-hamburger::before {
        content: "☰" !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 28px !important;
        line-height: 44px !important;
        color: #1a1a2e !important;
        font-family: Arial, "Segoe UI Symbol", sans-serif !important;
        text-align: center !important;
    }
    
    /* Ocultar el span interno */
    body #wrapwrap .cod-hamburger .cod-hamburger-icon,
    body .cod-hamburger .cod-hamburger-icon,
    .cod-hamburger .cod-hamburger-icon,
    #codHamburger .cod-hamburger-icon,
    .cod-hamburger-icon {
        display: none !important;
    }
    
    /* Ocultar menú desktop y botón CTA en móvil */
    body #wrapwrap .cod-menu-desktop,
    body .cod-menu-desktop,
    .cod-menu-desktop {
        display: none !important;
    }
    
    body #wrapwrap .cod-btn-cta,
    body .cod-btn-cta,
    .cod-btn-cta {
        display: none !important;
    }
}

/* === Pantallas muy pequeñas === */
@media (max-width: 480px) {
    body #wrapwrap .cod-hamburger,
    body .cod-hamburger,
    .cod-hamburger,
    #codHamburger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
    }
    
    body .cod-hamburger span,
    .cod-hamburger span,
    #codHamburger span {
        width: 22px !important;
        height: 3px !important;
        min-height: 3px !important;
        background: #1a1a2e !important;
        background-color: #1a1a2e !important;
    }
}

/* ============================================
   25. HEADER ICONS VISIBILITY (ÚNICA SECCION)
   - Oculta navbar de Odoo
   - Muestra Mi Cuenta y Hamburguesa
   ============================================ */

/* === OCULTAR TODO EL NAVBAR DE ODOO === */
header .navbar,
header .navbar-collapse,
header .navbar-nav,
header .navbar-toggler,
header .o_navbar_toggler,
header nav.navbar,
header #top_menu_collapse,
header #top_menu_container,
header #top_menu,
body header .navbar,
body #wrapwrap header .navbar,
/* Ocultar íconos específicos de Odoo eCommerce */
header .o_wsale_my_cart,
header .my_cart_quantity,
header [href*="/shop/cart"],
header .js_show_cart,
header .o_header_affix .navbar,
header form[action*="/website/search"],
header .o_searchbar_form,
header input[name="search"],
header .oe_search_box,
header a[href="/shop/cart"],
header .fa-shopping-cart,
header .fa-search,
header [data-name="Cart"],
header [data-name="Search"],
/* Ocultar barra de acciones de Odoo */
header .o_menu_sections,
header .o_menu_systray,
header .o_mail_systray_item,
header .dropdown-toggle[data-bs-toggle="dropdown"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* === ASEGURAR VISIBILIDAD DE NUESTROS ICONOS === */
/* Icono Mi Cuenta - SIEMPRE visible */
html body header .cod-actions a[title="Mi cuenta"],
html body header .cod-actions a[href="/my/home"],
body header .cod-actions > a[title="Mi cuenta"],
body header .cod-actions > a[href="/my/home"],
header .cod-actions > a.cod-action-btn[title="Mi cuenta"],
.cod-actions a.cod-action-btn[title="Mi cuenta"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    position: relative !important;
    left: auto !important;
    pointer-events: auto !important;
    background: #f5f5f5 !important;
    border-radius: 10px !important;
}

/* SVG dentro de Mi Cuenta - visible */
html body header .cod-actions a[title="Mi cuenta"] svg,
header .cod-actions > a[title="Mi cuenta"] svg,
.cod-actions a.cod-action-btn[title="Mi cuenta"] svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    color: #4a5568 !important;
    stroke: currentColor !important;
}

/* Hamburguesa - SIEMPRE visible en móvil */
@media (max-width: 991px) {
    html body header .cod-hamburger,
    html body header button.cod-hamburger,
    html body header #codHamburger,
    body header .cod-actions .cod-hamburger,
    header .cod-actions > button.cod-hamburger,
    .cod-actions button.cod-hamburger,
    #codHamburger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        position: relative !important;
        left: auto !important;
        pointer-events: auto !important;
        background: #f5f5f5 !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10000 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        font-size: 0 !important;
    }
    
    /* ICONO ::before del hamburguesa ☰ */
    html body header .cod-hamburger::before,
    html body header button.cod-hamburger::before,
    html body header #codHamburger::before,
    body header .cod-actions .cod-hamburger::before,
    .cod-hamburger::before,
    #codHamburger::before {
        content: "☰" !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 28px !important;
        line-height: 44px !important;
        color: #1a1a2e !important;
        font-family: Arial, "Segoe UI Symbol", sans-serif !important;
    }
    
    /* Ocultar span */
    .cod-hamburger .cod-hamburger-icon,
    #codHamburger .cod-hamburger-icon,
    .cod-hamburger-icon {
        display: none !important;
    }
}

/* === ASEGURAR QUE BOTON CTA QUEDE VISIBLE EN DESKTOP === */
@media (min-width: 992px) {
    header .cod-actions > a.cod-btn-cta,
    header .cod-actions > .cod-btn-cta {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================
   26. SOPORTE CLASES RESPONSIVE ODOO/BOOTSTRAP
   - Permite usar d-none, d-lg-block, etc.
   - Para estilos diferentes en móvil vs desktop
   ============================================ */

/* Clases de visibilidad Bootstrap - respetarlas */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }

/* Media queries de Bootstrap */
@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-flex { display: flex !important; }
}
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-inline { display: inline !important; }
    .d-md-flex { display: flex !important; }
}
@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-flex { display: flex !important; }
}
@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-flex { display: flex !important; }
}

/* 
 * NOTA PARA EDITORES:
 * Para tener estilos diferentes en móvil vs desktop, usa estas clases:
 * 
 * - Solo en móvil: class="d-block d-lg-none"
 * - Solo en desktop: class="d-none d-lg-block"
 * - Ocultar en tablets: class="d-md-none d-lg-block"
 */