/**
 * Fresh Theme - Colores Cálidos y Modernos
 * Amarillo, Dorado, Rojo, Madera
 */

:root {
    /* Colores Principales */
    --primary-yellow: #fbbf24;
    --primary-gold: #f59e0b;
    --primary-red: #ef4444;
    --primary-orange: #f97316;
    
    /* Tonos Madera */
    --wood-light: #d4a574;
    --wood-medium: #c08552;
    --wood-dark: #8b5a3c;
    
    /* Gradientes */
    --gradient-warm: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    --gradient-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --gradient-sunset: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    --gradient-wood: linear-gradient(135deg, #d4a574 0%, #8b5a3c 100%);
    
    /* Fondos */
    --bg-cream: #fef3c7;
    --bg-light: #fffbeb;
    --bg-white: #ffffff;
    --bg-warm: #fed7aa;
    
    /* Textos */
    --text-dark: #292524;
    --text-medium: #57534e;
    --text-light: #78716c;
    
    /* Bordes */
    --border-light: #fde68a;
    --border-medium: #fcd34d;
    
    /* Sombras */
    --shadow-warm: 0 4px 16px rgba(251, 191, 36, 0.25);
    --shadow-gold: 0 8px 24px rgba(245, 158, 11, 0.3);
    --shadow-red: 0 4px 16px rgba(239, 68, 68, 0.25);
}

/* Body y Fondo General */
body,
body.app-body,
.site {
    background: var(--bg-light) !important;
    color: var(--text-dark) !important;
}

/* Shop Page */
.shop-app-page,
.shop-page,
main {
    background: linear-gradient(to bottom, var(--bg-cream) 0%, var(--bg-light) 100%) !important;
}

/* Contenedores */
.container,
.container-app {
    background: transparent !important;
}

/* Headers y Top Bars */
.top-bar {
    background: var(--wood-dark) !important;
    color: var(--bg-cream) !important;
}

.main-nav,
.delivery-header {
    background: white !important;
    border-bottom: 2px solid var(--border-light) !important;
}

.delivery-logo,
.brand-link {
    color: var(--text-dark) !important;
}

.logo-icon,
.brand-icon {
    filter: none !important;
}

.logo-text strong,
.brand-name {
    background: var(--gradient-warm) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Search Bar */
.search-bar-sticky {
    background: white;
    box-shadow: 0 2px 12px rgba(251, 191, 36, 0.15);
}

.search-input-app {
    border: 2px solid var(--border-light);
    background: var(--bg-light);
}

.search-input-app:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.1);
    background: white;
}

.search-clear {
    background: var(--primary-yellow);
    color: white;
}

.search-clear:hover {
    background: var(--primary-gold);
}

/* Categories Chips */
.categories-scroll {
    background: white;
    border-bottom: 2px solid var(--border-light);
}

.category-chip {
    background: var(--bg-cream);
    color: var(--wood-dark);
    border: 2px solid var(--border-light);
}

.category-chip:hover {
    background: var(--bg-warm);
    color: var(--wood-dark);
    border-color: var(--primary-gold);
}

.category-chip.active {
    background: var(--gradient-warm);
    color: white;
    border-color: transparent;
    box-shadow: var(--shadow-warm);
}

/* Product Cards */
.product-card-app {
    background: white;
    border: 2px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(139, 90, 60, 0.08);
    transition: all 0.3s ease;
}

.product-card-app:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-gold);
    border-color: var(--primary-gold);
}

.product-image-wrapper {
    background: var(--bg-cream);
}

.product-badge {
    background: var(--gradient-sunset);
    box-shadow: var(--shadow-red);
}

.product-name-app {
    color: var(--text-dark);
}

.product-stock-app {
    color: #16a34a;
    font-weight: 600;
}

.product-stock-app.low {
    color: var(--primary-orange);
}

.product-stock-app.out {
    color: #78716c;
}

.product-price-app {
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-add-to-cart-app {
    background: var(--gradient-warm);
    box-shadow: var(--shadow-warm);
}

.btn-add-to-cart-app:hover {
    background: var(--gradient-gold);
    box-shadow: var(--shadow-gold);
}

.btn-add-to-cart-app:disabled {
    background: #d6d3d1;
    box-shadow: none;
}

/* Category Headers */
.category-header-app {
    padding: 0.5rem;
}

.category-title-app {
    color: var(--wood-dark);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-icon {
    font-size: 1.75rem;
}

.category-count {
    background: var(--bg-warm);
    color: var(--wood-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* App Header */
.app-header-simple {
    background: white;
    border-bottom: 2px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.1);
}

.brand-name {
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.user-avatar-small {
    background: var(--gradient-warm);
}

.btn-login-header {
    background: var(--gradient-warm);
    box-shadow: var(--shadow-warm);
}

.btn-login-header:hover {
    background: var(--gradient-gold);
    box-shadow: var(--shadow-gold);
}

/* Floating Cart */
.floating-cart-button {
    background: var(--gradient-sunset);
    box-shadow: var(--shadow-red);
}

.floating-cart-button:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 12px 32px rgba(239, 68, 68, 0.4);
}

.cart-count {
    background: var(--wood-dark);
}

/* Bottom Navigation */
.bottom-nav {
    background: white;
    border-top: 2px solid var(--border-light);
    box-shadow: 0 -2px 12px rgba(251, 191, 36, 0.1);
}

.nav-item-bottom.active {
    color: var(--primary-gold);
}

.nav-item-bottom.active::before {
    background: var(--gradient-warm);
}

.nav-badge {
    background: var(--primary-red);
}

/* Cart Sidebar */
.cart-sidebar-header {
    background: var(--gradient-warm);
}

.cart-sidebar-footer {
    background: var(--bg-cream);
}

/* User Dropdown */
.dropdown-header {
    background: var(--gradient-warm);
}

.dropdown-avatar {
    background: white;
    color: var(--primary-gold);
}

/* Promo Banner */
.promo-banner-app {
    background: var(--gradient-sunset);
    box-shadow: var(--shadow-red);
}

/* Login Page */
.login-body {
    background: var(--gradient-warm);
}

.logo-circle {
    background: white;
}

.btn-continue {
    background: var(--gradient-warm);
    box-shadow: var(--shadow-warm);
}

.btn-continue:hover:not(:disabled) {
    background: var(--gradient-gold);
    box-shadow: var(--shadow-gold);
}

.tab-btn.active {
    background: white;
    color: var(--primary-gold);
}

.input-group input:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.1);
}

.btn-detect-gps {
    background: var(--primary-gold);
}

.btn-detect-gps:hover {
    background: var(--primary-orange);
}

/* Mi Cuenta */
.account-hero-app {
    background: var(--gradient-warm);
}

.profile-avatar-large {
    background: white;
    color: var(--primary-gold);
}

.btn-goto-shop {
    background: white;
    color: var(--primary-gold);
}

.btn-goto-shop:hover {
    background: var(--bg-cream);
    color: var(--primary-gold);
}

.stat-card {
    background: white;
    border: 2px solid var(--border-light);
}

.stat-card:hover {
    border-color: var(--primary-gold);
    box-shadow: var(--shadow-warm);
}

.stat-value {
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.order-card {
    background: white;
    border: 2px solid var(--border-light);
}

.order-card:hover {
    border-color: var(--primary-gold);
    box-shadow: var(--shadow-gold);
}

.order-status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.order-status-badge.processing {
    background: #fed7aa;
    color: #9a3412;
}

.order-status-badge.on_delivery {
    background: #fecaca;
    color: #991b1b;
}

.order-status-badge.delivered {
    background: #d1fae5;
    color: #065f46;
}

.btn-track-order {
    background: var(--gradient-warm);
    box-shadow: var(--shadow-warm);
}

.btn-track-order:hover {
    background: var(--gradient-gold);
    box-shadow: var(--shadow-gold);
}

.btn-reorder {
    background: #16a34a;
}

.btn-reorder:hover {
    background: #15803d;
}

/* Checkout */
.checkout-page {
    background: var(--bg-light);
}

.page-hero {
    background: var(--gradient-warm);
}

.accordion-step.active {
    border-color: var(--primary-gold);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.accordion-number {
    background: var(--gradient-warm);
}

.btn-next-step {
    background: var(--gradient-warm);
    box-shadow: var(--shadow-warm);
}

.btn-next-step:hover {
    background: var(--gradient-gold);
    box-shadow: var(--shadow-gold);
}

/* Badges y Pills */
.badge-featured {
    background: var(--gradient-gold);
}

.badge-low-stock {
    background: var(--gradient-sunset);
}

/* Links */
.link-primary {
    color: var(--primary-gold);
}

.link-primary:hover {
    color: var(--primary-orange);
}

/* Alerts */
.alert.success {
    background: #d1fae5;
    border-color: #16a34a;
}

.alert.error {
    background: #fee2e2;
    border-color: var(--primary-red);
}

/* Empty States */
.empty-state {
    background: white;
    border: 2px solid var(--border-light);
}

.btn-primary-large {
    background: var(--gradient-warm);
    box-shadow: var(--shadow-warm);
}

.btn-primary-large:hover {
    background: var(--gradient-gold);
    box-shadow: var(--shadow-gold);
}

/* Carrito Page */
.cart-page {
    background: var(--bg-light);
}

.cart-item-card {
    background: white;
    border: 2px solid var(--border-light);
}

.cart-item-card:hover {
    border-color: var(--primary-gold);
}

/* Tracking Page */
.tracking-page {
    background: var(--bg-light);
}

.tracking-card {
    background: white;
    border: 2px solid var(--border-light);
    box-shadow: var(--shadow-warm);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .product-card-app {
        box-shadow: 0 2px 6px rgba(139, 90, 60, 0.1);
    }
}

/* Loading States */
.skeleton {
    background: linear-gradient(90deg, var(--bg-cream) 25%, var(--bg-warm) 50%, var(--bg-cream) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* Sobrescribir Estilos Antiguos */
.page-hero,
.hero-section {
    background: var(--gradient-warm) !important;
    color: white !important;
}

.btn,
button[type="submit"]:not(.cart-sidebar-close):not(.search-clear),
.button,
.btn-primary {
    background: var(--gradient-warm) !important;
    color: white !important;
    box-shadow: var(--shadow-warm) !important;
    border: none !important;
}

.btn:hover,
button[type="submit"]:hover {
    background: var(--gradient-gold) !important;
    box-shadow: var(--shadow-gold) !important;
}

/* Títulos y Textos */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark) !important;
}

.section-title,
.category-title {
    color: var(--wood-dark) !important;
}

/* Links */
a {
    color: var(--primary-gold);
}

a:hover {
    color: var(--primary-orange);
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    border-color: var(--border-light) !important;
    background: white !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-gold) !important;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.1) !important;
}

/* Todos los gradientes morados a cálidos */
*[style*="667eea"],
*[style*="764ba2"],
*[style*="8b5cf6"],
*[style*="7c3aed"] {
    background: var(--gradient-warm) !important;
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-warm);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-gold);
}

/* Eliminar fondos oscuros */
.site,
#page {
    background: var(--bg-light) !important;
}

/* Grid pattern overlay - eliminar o cambiar color */
.shop-page::before,
.tienda::before,
main::before {
    display: none !important;
}