/* ═══════════════════════════════════════════════════════════
   TEMA AMAZON — runazcorp
   Carga ENCIMA de style.css, sobreescribe los estilos base
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #EAEDED;
  --surface: #ffffff;
  --surface2: #f3f3f3;
  --border: #DDD;
  --text: #0F1111;
  --text2: #565959;
  --text3: #888C8C;
  --accent: #FF9900;
  --accent-hover: #E47911;
  --accent-light: #FFF3E0;
  --success: #007600;
  --danger: #B12704;
  --radius: 6px;
  --radius-sm: 3px;
  --shadow: 0 2px 5px rgba(15,17,17,.12);
  --shadow-lg: 0 4px 14px rgba(15,17,17,.18);
  --transition: 0.12s ease;
}

/* ─── Base ────────────────────────────────────────────────── */
body { background: #EAEDED !important; color: #0F1111 !important; }

/* ─── Header ─────────────────────────────────────────────── */
.header {
  background: #131921 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.header::before { display: none; }

.logo-charger { color: #ffffff !important; }
.logo-tech {
  background: linear-gradient(90deg, #FF9900, #FFB84D) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.logo svg { filter: drop-shadow(0 0 6px rgba(255,153,0,.5)) !important; }

.header-nav a { color: #fff !important; border-radius: 3px !important; }
.header-nav a:hover { color: #fff !important; background: rgba(255,255,255,.12) !important; outline: 1px solid rgba(255,255,255,.5); }
.header-nav a.active { color: #FF9900 !important; background: rgba(255,153,0,.12) !important; }

.header-search {
  background: #fff !important;
  border: 2px solid #FF9900 !important;
  border-radius: 4px !important;
}
.header-search input { color: #0F1111 !important; }
.header-search input::placeholder { color: #888 !important; }
.header-search:focus-within { box-shadow: 0 0 0 3px rgba(255,153,0,.3) !important; }
.search-icon { color: #555 !important; }

.cart-btn {
  background: linear-gradient(to bottom, #f0c14b, #daa520) !important;
  color: #111 !important;
  border: 1px solid #a88734 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.cart-btn:hover {
  background: linear-gradient(to bottom, #daa520, #c8941a) !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}

.cart-count { background: #FF9900 !important; color: #111 !important; font-weight: 800 !important; }

.theme-toggle {
  background: transparent !important;
  border-color: rgba(255,255,255,.3) !important;
  color: #fff !important;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.1) !important;
  color: #FF9900 !important;
  transform: none !important;
}

.search-toggle, .menu-toggle { color: #fff !important; }
.search-toggle:hover, .menu-toggle:hover { background: rgba(255,255,255,.1) !important; }

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, #1a2332 0%, #131921 70%, #1c1408 100%) !important;
}
.hero h1 { color: #fff !important; }
.hero h1 em {
  background: linear-gradient(90deg, #FF9900, #FFB84D) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.hero p { color: #ccc !important; opacity: 1 !important; }
.hero-badge { background: rgba(255,153,0,.12) !important; border-color: rgba(255,153,0,.3) !important; color: #FF9900 !important; }
.hero-badge-dot { background: #FF9900 !important; box-shadow: 0 0 8px rgba(255,153,0,.6) !important; }
.hero-stats { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; box-shadow: none !important; }
.hero-stat strong {
  background: linear-gradient(90deg, #FF9900, #FFD280) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.hero-stat span { color: #aaa !important; opacity: 1 !important; }
.hero-stat-divider { background: rgba(255,255,255,.12) !important; }
.hero-cta-primary {
  background: linear-gradient(to bottom, #f0c14b, #daa520) !important;
  color: #111 !important;
  border: 1px solid #a88734 !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 8px rgba(255,153,0,.35) !important;
  font-weight: 700 !important;
}
.hero-cta-primary:hover {
  background: linear-gradient(to bottom, #daa520, #c8941a) !important;
  box-shadow: 0 4px 16px rgba(255,153,0,.45) !important;
  transform: none !important;
}

/* ─── Barra de marcas ────────────────────────────────────── */
.brands-bar { background: #232f3e !important; border-color: transparent !important; }
.brands-label { color: #aaa !important; }
.brand-pill {
  border-color: rgba(255,255,255,.2) !important;
  color: #ddd !important;
  background: transparent !important;
}
.brand-pill:hover { border-color: #FF9900 !important; color: #FF9900 !important; background: rgba(255,153,0,.1) !important; }
.brand-pill.active { background: #FF9900 !important; border-color: #FF9900 !important; color: #111 !important; }
.brand-logo { filter: brightness(0) invert(1) !important; }
.brand-pill.active .brand-logo { filter: brightness(0) !important; }

/* ─── Sección productos ──────────────────────────────────── */
.section-bg, .products-section { background: #EAEDED !important; }
.section-header { border-color: #DDD !important; }
.section-title { color: #0F1111 !important; }

.cat-tab { color: #565959 !important; background: #fff !important; border-color: #DDD !important; }
.cat-tab:hover { border-color: #FF9900 !important; color: #FF9900 !important; }
.cat-tab.active { background: #FF9900 !important; border-color: #FF9900 !important; color: #111 !important; box-shadow: none !important; }

/* ─── Tarjetas de producto ───────────────────────────────── */
.product-card {
  border-radius: 4px !important;
  border-color: #DDD !important;
  box-shadow: none !important;
  background: #fff !important;
}
.product-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
  border-color: #FF9900 !important;
  transform: translateY(-2px) !important;
}

.product-img-wrap { background: #fff !important; }

.product-brand {
  background: #f3f3f3 !important;
  color: #565959 !important;
  border: 1px solid #DDD !important;
  font-size: .7rem !important;
}

.product-name { color: #007185 !important; font-size: .9rem !important; font-weight: 400 !important; }
.product-name:hover { color: #C7511F !important; text-decoration: underline !important; }

.product-price { color: #B12704 !important; font-weight: 700 !important; font-size: 1.05rem !important; }
.product-original { color: #565959 !important; }
.product-discount { background: #CC0C39 !important; border-radius: 3px !important; }

/* Estrellas en naranja Amazon */
.star.filled polygon { fill: #FF9900 !important; stroke: #FF9900 !important; }
.star.half polygon { fill: #FF9900 !important; stroke: #FF9900 !important; }
.star polygon { fill: #e0e0e0 !important; stroke: #ccc !important; }
.reviews-count { color: #007185 !important; }

.btn-add-cart {
  background: linear-gradient(to bottom, #f0c14b, #daa520) !important;
  color: #111 !important;
  border: 1px solid #a88734 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.btn-add-cart:hover { background: linear-gradient(to bottom, #daa520, #c8941a) !important; transform: none !important; box-shadow: 0 2px 5px rgba(0,0,0,.2) !important; }

/* ─── Producto destacado ─────────────────────────────────── */
.featured-section { background: #fff !important; border-top: 3px solid #FF9900 !important; border-bottom: 1px solid #DDD !important; }
.featured-title::after { background: #FF9900 !important; }

/* ─── Página de producto ─────────────────────────────────── */
.breadcrumb-bar { background: #fff !important; border-color: #DDD !important; }
.breadcrumb-inner a { color: #007185 !important; }
.breadcrumb-inner a:hover { color: #C7511F !important; text-decoration: underline !important; }
.detail-main { background: #fff !important; }
.detail-img-wrap { background: #fff !important; border: 1px solid #DDD !important; }
.gallery-thumb { border-color: #DDD !important; }
.gallery-thumb.active { border-color: #FF9900 !important; }
.gallery-thumb:hover { border-color: #FF9900 !important; }

.detail-brand { border: 1px solid #DDD !important; }
.detail-name { color: #0F1111 !important; font-weight: 600 !important; }
.detail-price { color: #B12704 !important; font-weight: 700 !important; font-size: 1.6rem !important; }
.detail-original { color: #565959 !important; }
.detail-save { color: #007600 !important; background: transparent !important; border: none !important; font-weight: 600 !important; }

.checklist-icon { color: #007600 !important; }
.checklist-title { color: #0F1111 !important; }

.detail-tag { background: #f3f3f3 !important; border: 1px solid #DDD !important; color: #565959 !important; }
.detail-tag:hover { border-color: #FF9900 !important; color: #FF9900 !important; }

.qty-control button { background: #f0f0f0 !important; border: 1px solid #DDD !important; color: #0F1111 !important; }
.qty-control button:hover { background: #FF9900 !important; color: #111 !important; border-color: #FF9900 !important; }

.btn-detail-cart {
  background: linear-gradient(to bottom, #f0c14b, #daa520) !important;
  color: #111 !important;
  border: 1px solid #a88734 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.btn-detail-cart:hover { background: #E47911 !important; box-shadow: 0 2px 8px rgba(0,0,0,.2) !important; }
.btn-detail-back { border-color: #DDD !important; color: #565959 !important; }
.btn-detail-back:hover { border-color: #FF9900 !important; color: #FF9900 !important; background: #FFF3E0 !important; }

.detail-features { border-top: 1px solid #DDD !important; }
.feat-item { color: #565959 !important; }

/* Variantes */
.variant-btn { border-color: #DDD !important; background: #fff !important; color: #0F1111 !important; }
.variant-btn:hover { border-color: #FF9900 !important; }
.variant-btn.active { border-color: #FF9900 !important; background: #FFF3E0 !important; color: #B12704 !important; }
.variant-btn.active small { color: #B12704 !important; }

/* ─── Carrito ─────────────────────────────────────────────── */
.cart-drawer { border-left-color: #DDD !important; }
.cart-header { border-bottom-color: #DDD !important; }
.cart-header h2 { color: #0F1111 !important; }
.cart-item { border-bottom-color: #EEE !important; }
.cart-item-brand { color: #007185 !important; }
.cart-item-name { color: #0F1111 !important; }
.cart-item-price { color: #B12704 !important; font-weight: 700 !important; }
.cart-item-controls button { background: #f0f0f0 !important; border-color: #DDD !important; color: #0F1111 !important; }
.cart-item-controls button:hover { background: #FF9900 !important; border-color: #FF9900 !important; }
.btn-checkout {
  background: linear-gradient(to bottom, #f0c14b, #daa520) !important;
  color: #111 !important;
  border: 1px solid #a88734 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.btn-checkout:hover { background: #E47911 !important; }
.cart-total-row { color: #0F1111 !important; border-top-color: #DDD !important; }
#cart-total { color: #B12704 !important; font-weight: 700 !important; }

/* ─── Toast ──────────────────────────────────────────────── */
#toast { background: #232f3e !important; border-left: 3px solid #FF9900 !important; }

/* ─── Footer ─────────────────────────────────────────────── */
.footer { background: #232f3e !important; border-top-color: #374151 !important; }
.footer-col h4 { color: #ddd !important; }
.footer-col a { color: #aaa !important; }
.footer-col a:hover { color: #FF9900 !important; }
.footer-bottom { background: #131921 !important; border-top-color: #374151 !important; color: #888 !important; }
.footer-bottom .logo-charger { color: #fff !important; }

/* ─── Móvil nav ───────────────────────────────────────────── */
.mobile-nav { background: #232f3e !important; border-right-color: #374151 !important; }
.mobile-nav a { color: #ddd !important; border-bottom-color: #374151 !important; }
.mobile-nav a:hover { color: #FF9900 !important; background: rgba(255,153,0,.08) !important; }

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: #FF9900 !important; }
::-webkit-scrollbar-track { background: #f3f3f3 !important; }

/* ─── Autocomplete ────────────────────────────────────────── */
.autocomplete-list { border-color: #DDD !important; background: #fff !important; }
.autocomplete-item { color: #0F1111 !important; }
.autocomplete-item:hover, .autocomplete-item.ac-selected { background: #FFF3E0 !important; color: #B12704 !important; }
mark { background: rgba(255,153,0,.25) !important; color: #B12704 !important; }

/* ─── Back to top ─────────────────────────────────────────── */
#back-to-top { background: #FF9900 !important; color: #111 !important; box-shadow: 0 2px 8px rgba(255,153,0,.4) !important; }

/* ─── Modo día compatible ─────────────────────────────────── */
:root.light { --bg: #EAEDED; }
:root.light .hero { background: linear-gradient(160deg, #1a2332 0%, #131921 70%, #1c1408 100%) !important; }
:root.light .brands-bar { background: #232f3e !important; }
:root.light .header { background: #131921 !important; }