/* =============================================
   TIENDA ONLINE - Estilos Globales
   Inspirado en MercadoLibre + AliExpress
   ============================================= */

:root {
    --color-primary:    #3483FA;
    --color-primary-dk: #2968C8;
    --color-green:      #00A650;
    --color-green-dk:   #008A44;
    --color-orange:     #FF6B00;
    --color-bg:         #EFEFEF;
    --color-card:       #FFFFFF;
    --color-text:       #333333;
    --color-text-sec:   #666666;
    --color-border:     #E0E0E0;
    --color-price:      #00A650;
    --color-old-price:  #999999;
    --color-badge-new:  #00A650;
    --color-badge-prm:  #FF6B00;
    --shadow-card:      0 1px 4px rgba(0,0,0,.12);
    --shadow-hover:     0 4px 16px rgba(0,0,0,.18);
    --radius:           4px;
    --radius-lg:        8px;
}

* { box-sizing: border-box; }

body {
    color: var(--color-text);
    background: var(--color-bg);
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

/* Secciones con fondo oscuro: todo el texto pasa a blanco automáticamente */
.bg-dark, .bg-dark *, [class*="bg-dark"] { color: #fff; }
.dark-section, .dark-section * { color: #fff !important; }

h1, h2, h3, h4, h5, h6 { color: inherit; }

a { color: var(--color-primary); transition: .2s; text-decoration: none; }
a:hover { color: var(--color-primary-dk); text-decoration: none; }

.no-href-decoration { text-decoration: none !important; color: inherit !important; }

/* ---- Back to top ---- */
.back-to-top {
    position: fixed;
    bottom: 24px; right: 24px;
    display: none;
    background: var(--color-primary);
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    z-index: 999;
    box-shadow: var(--shadow-card);
}

/* ---- Badges ---- */
.badge-new  { background: var(--color-badge-new); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:3px; text-transform:uppercase; }
.badge-promo{ background: var(--color-badge-prm); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:3px; text-transform:uppercase; }
.badge-discount{ background: var(--color-orange); color:#fff; font-size:11px; font-weight:700; padding:2px 7px; border-radius:3px; }
.badge-shipping{ color: var(--color-green); font-size:12px; font-weight:600; }

/* ---- Stars ---- */
.stars-wrap  { color:#F5A623; font-size:12px; }
.stars-count { color:var(--color-text-sec); font-size:11px; margin-left:4px; }

/* ---- Price ---- */
.price-current   { font-size:26px; font-weight:700; color:var(--color-price); }
.price-old       { font-size:13px; color:var(--color-old-price); text-decoration:line-through; }
.price-card      { font-size:17px; font-weight:700; color:var(--color-price); }
.price-card-old  { font-size:11px; color:var(--color-old-price); text-decoration:line-through; }

/* ---- Buttons ---- */
.btn-buy-now {
    background: var(--color-green); color:#fff; border:none;
    border-radius:var(--radius); padding:11px 20px;
    font-size:15px; font-weight:600; width:100%; cursor:pointer; transition:background .2s;
}
.btn-buy-now:hover { background:var(--color-green-dk); color:#fff; }

.btn-add-cart {
    background:#fff; color:var(--color-primary);
    border:2px solid var(--color-primary);
    border-radius:var(--radius); padding:9px 20px;
    font-size:15px; font-weight:600; width:100%; cursor:pointer; transition:all .2s;
}
.btn-add-cart:hover { background:var(--color-primary); color:#fff; }

/* ---- Qty selector ---- */
.qty-selector { display:flex; align-items:center; border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; width:fit-content; }
.qty-selector button { background:#f5f5f5; border:none; width:36px; height:36px; font-size:18px; cursor:pointer; font-weight:700; }
.qty-selector button:hover { background:var(--color-border); }
.qty-selector input { border:none; border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); width:48px; height:36px; text-align:center; font-size:15px; outline:none; }

/* ---- Sort bar ---- */
.sort-bar { background:#fff; border-radius:var(--radius); padding:10px 16px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-card); flex-wrap:wrap; gap:8px; }
.sort-bar .results-count { color:var(--color-text-sec); font-size:13px; }
.sort-bar .sort-select { border:1px solid var(--color-border); border-radius:var(--radius); padding:5px 10px; font-size:13px; color:var(--color-text); outline:none; cursor:pointer; }

/* ---- Section title ---- */
.section-title { font-size:18px; font-weight:700; color:var(--color-text); margin-bottom:16px; padding-bottom:8px; border-bottom:3px solid var(--color-primary); display:inline-block; }

/* ---- Checkout steps ---- */
.checkout-steps { display:flex; align-items:center; justify-content:center; padding:16px 0; background:#fff; border-radius:var(--radius); margin-bottom:20px; box-shadow:var(--shadow-card); flex-wrap:wrap; }
.checkout-step-item { display:flex; align-items:center; gap:8px; color:var(--color-text-sec); font-size:13px; font-weight:600; padding:6px 14px; }
.checkout-step-item.active { color:var(--color-primary); }
.checkout-step-item.done   { color:var(--color-green); }
.checkout-step-num { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--color-border); color:var(--color-text-sec); }
.checkout-step-item.active .checkout-step-num { background:var(--color-primary); color:#fff; }
.checkout-step-item.done   .checkout-step-num { background:var(--color-green); color:#fff; }
.checkout-step-arrow { color:var(--color-border); font-size:14px; margin:0 2px; }

/* ---- Tabs ---- */
.product-tabs .nav-tabs { border-bottom:2px solid var(--color-border); }
.product-tabs .nav-link { color:var(--color-text-sec); border:none; padding:10px 20px; font-weight:600; }
.product-tabs .nav-link.active { color:var(--color-primary); border-bottom:3px solid var(--color-primary); background:none; }

/* ---- Breadcrumb ---- */
.product-breadcrumb { background:none; padding:8px 0; font-size:12px; }
.product-breadcrumb a { color:var(--color-primary); }
.product-breadcrumb .sep { color:var(--color-text-sec); margin:0 4px; }

/* ---- Misc ---- */
.owl-prev, .owl-next { background-color:#ffffff !important; color:#000 !important; }
.owl-prev:hover, .owl-next:hover { background-color:var(--color-primary) !important; color:#fff !important; }
.container-fluid { max-width:1400px; }

@media (max-width:576px){
    .price-current { font-size:20px; }
    .btn-buy-now, .btn-add-cart { font-size:14px; padding:9px 16px; }
}