/* Custom Theme - Updated: 2026-07-01 00:57:57 */
:root {
    --primary-color: #ed0202 !important;
    --secondary-color: #ffae00 !important;
    --accent-color: #16a34a !important;
    --page-bg-color: #ffffff !important;
    --surface-bg-color: #ffffff !important;
    --text-color: #111827 !important;
    --muted-text-color: #4b5563 !important;
    --border-color: #e5e7eb !important;
    --header-bg-color: #ffffff !important;
    --header-text-color: #374151 !important;
    --header-link-hover-color: #ede502 !important;
    --footer-bg-color: #1f0000 !important;
    --footer-text-color: #ffffff !important;
    --button-bg-color: #ed0202 !important;
    --button-text-color: #ffffff !important;
    --button-soft-bg-color: #ffffff !important;
    --button-hover-bg-color: #ffae00 !important;
    --button-radius: 9999px !important;
    --card-bg-color: #ffffff !important;
    --card-text-color: #111827 !important;
    --card-radius: 8px !important;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.10) !important;
    --category-radius: 8px !important;
    --category-bg-color: #ffffff !important;
    --category-text-color: #1f2937 !important;
    --category-border-color: #e5e7eb !important;
    --category-active-bg-color: #fee2e2 !important;
    --category-active-text-color: #ed0202 !important;
    --category-hover-bg-color: #fff5f5 !important;
    --price-color: #ed0202 !important;
    --promo-badge-bg-color: #ef4444 !important;
    --promo-badge-text-color: #ffffff !important;
    --promo-banner-button-bg-color: #8f0000 !important;
    --promo-banner-button-text-color: #ffffff !important;
    --promo-banner-button-hover-bg-color: #d40000 !important;
    --input-bg-color: #ffffff !important;
    --input-text-color: #111827 !important;
    --input-border-color: #d1d5db !important;
    --modal-bg-color: #ffffff !important;
    --modal-text-color: #111827 !important;
    --carousel-nav-bg-color: rgba(0, 0, 0, 0.70) !important;
    --carousel-nav-hover-bg-color: rgba(0, 0, 0, 0.90) !important;
    --carousel-legend-bg-color: rgba(0, 0, 0, 0.70) !important;
    --link-color: #ed0202 !important;
    --link-hover-color: #ffae00 !important;
    --toast-bg-color: #38c742 !important;
    --toast-text-color: #ffffff !important;
}

body {
    background-color: var(--page-bg-color) !important;
    color: var(--text-color) !important;
}

.floating-header {
    background-color: var(--header-bg-color) !important;
    border-color: var(--border-color) !important;
}
.floating-header a, .floating-header span, .floating-header i {
    color: var(--header-text-color) !important;
}
.floating-header a:hover {
    color: var(--header-link-hover-color) !important;
}

main, section, .content {
    color: var(--text-color) !important;
}
h1, h2, h3, .text-gray-900, .text-gray-800 {
    color: var(--text-color) !important;
}
p, .text-gray-600, .text-gray-500, .text-gray-400 {
    color: var(--muted-text-color) !important;
}

.comprar-btn {
    background-color: var(--button-bg-color) !important;
    color: var(--button-text-color) !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--button-radius) !important;
    font-weight: 600 !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.comprar-btn:hover {
    background-color: var(--button-hover-bg-color) !important;
}
.site-header .site-actions .desktop-nav a {
    background-color: var(--button-soft-bg-color) !important;
    border-color: var(--button-soft-bg-color) !important;
    color: var(--button-bg-color) !important;
}
.site-header .site-actions .desktop-nav a:hover,
.site-header .site-actions .desktop-nav a[aria-current="page"] {
    background-color: var(--button-bg-color) !important;
    border-color: var(--button-bg-color) !important;
    color: var(--button-text-color) !important;
}
.site-header .site-actions .desktop-nav a i,
.site-header .site-actions .desktop-nav a span,
.site-header .site-actions .desktop-nav a:hover i,
.site-header .site-actions .desktop-nav a:hover span,
.site-header .site-actions .desktop-nav a[aria-current="page"] i,
.site-header .site-actions .desktop-nav a[aria-current="page"] span {
    color: inherit !important;
}
.fixed.right-6.bottom-6 .comprar-btn {
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
}

.product-card, article.bg-white, .grid > .border, .grid > .bg-white, section .rounded-lg, section .shadow-md {
    background-color: var(--card-bg-color) !important;
    color: var(--card-text-color) !important;
    border-color: var(--border-color) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
}
.product-card h3, .product-card h2, .grid > .border h2, .grid > .bg-white h2 {
    color: var(--card-text-color) !important;
}
.product-card p, .grid > .border p, .grid > .bg-white p {
    color: var(--muted-text-color) !important;
}
.product-card img, .grid > .border img, .grid > .bg-white img {
    border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
}
.category-link, a.flex.flex-col.items-center > div {
    background-color: var(--category-bg-color) !important;
    border-color: var(--category-border-color) !important;
    border-radius: var(--category-radius) !important;
}
a.flex.flex-col.items-center h3, .category-link {
    color: var(--category-text-color) !important;
}
.category-link:hover {
    background-color: var(--category-hover-bg-color) !important;
    border-color: var(--category-active-text-color) !important;
    color: var(--category-active-text-color) !important;
}
.category-link.border-black, .category-link.font-bold, .category-link.text-white {
    background-color: var(--category-active-bg-color) !important;
    border-color: var(--category-active-text-color) !important;
    color: var(--category-active-text-color) !important;
}
.text-red-600, .text-green-600, .text-\[var\(--primary-color\)\] {
    color: var(--price-color) !important;
}
.bg-red-500 {
    background-color: var(--promo-badge-bg-color) !important;
    color: var(--promo-badge-text-color) !important;
}

a.promotional-banner-btn,
.promotional-banner-btn {
    background-color: var(--promo-banner-button-bg-color) !important;
    color: var(--promo-banner-button-text-color) !important;
    border-radius: var(--button-radius) !important;
}
.promotional-banner-btn span,
.promotional-banner-btn i {
    color: inherit !important;
}
a.promotional-banner-btn:hover,
.promotional-banner-btn:hover {
    background-color: var(--promo-banner-button-hover-bg-color) !important;
    color: var(--promo-banner-button-text-color) !important;
}

input, textarea, select {
    background-color: var(--input-bg-color) !important;
    color: var(--input-text-color) !important;
    border-color: var(--input-border-color) !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
}

#cartModal .bg-white, #checkoutModal .bg-white {
    background-color: var(--modal-bg-color) !important;
    color: var(--modal-text-color) !important;
}
#cartModal .comprar-btn, #checkoutModal .comprar-btn {
    width: 100% !important;
    padding: 0.75rem !important;
    margin-top: 0.5rem !important;
    border-radius: var(--card-radius) !important;
}

.carousel .prev, .carousel .next, .mobile-carousel .prev, .mobile-carousel .next {
    background: var(--carousel-nav-bg-color) !important;
}
.carousel .prev:hover, .carousel .next:hover, .mobile-carousel .prev:hover, .mobile-carousel .next:hover {
    background: var(--carousel-nav-hover-bg-color) !important;
}
.carousel-legend {
    background: var(--carousel-legend-bg-color) !important;
}

a:not(.btn):not(.comprar-btn):not(.promotional-banner-btn):not(.mobile-app-nav-link) {
    color: var(--link-color) !important;
}
a:not(.btn):not(.comprar-btn):not(.promotional-banner-btn):not(.mobile-app-nav-link):hover {
    color: var(--link-hover-color) !important;
}
footer.bg-gray-800 {
    background-color: var(--footer-bg-color) !important;
    color: var(--footer-text-color) !important;
}
footer.bg-gray-800 * {
    color: var(--footer-text-color) !important;
}
.toast, .fixed.top-1\/2.left-1\/2 {
    background-color: var(--toast-bg-color) !important;
    color: var(--toast-text-color) !important;
}