/* =====================================================
BASE TOKENS
===================================================== */

:root{
--background:#f5f5f5;
--card:#ffffff;
--card-elevated:#ffffff;

--text:#111111;
--text-muted:#666666;
--text-inverse:#ffffff;

--primary:#111111;
--border:#e5e5e5;

--danger:#ff4d4d;

--radius:10px;
}

body{
background:var(--background);
color:var(--text);
font-family:system-ui,-apple-system,Segoe UI,Roboto;
}


/* =====================================================
GLOBAL FIXES
===================================================== */

button{
font-family:inherit;
}

input{
background:var(--background);
color:var(--text);
border:1px solid var(--border);
border-radius:6px;
outline:none;
}

input::placeholder{
color:var(--text-muted);
}

a{
color:var(--text);
text-decoration:none;
}


/* =====================================================
NAVBAR
===================================================== */

header{
background:var(--card);
border-bottom:1px solid var(--border);
color:var(--text);
}

header a{
color:var(--text);
transition:opacity .2s;
}

header a:hover{
opacity:.7;
}


/* =====================================================
PRODUCT CARDS
===================================================== */

.product-card{
background:var(--card);
border-radius:var(--radius);
overflow:hidden;
border:1px solid var(--border);
transition:.2s;
color:var(--text);
}

.product-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 20px rgba(0,0,0,.08);
}

.product-image{
width:100%;
aspect-ratio:1/1;
overflow:hidden;
background:var(--border);
}

.product-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.product-info{
padding:14px;
}

.product-title{
font-weight:600;
margin-bottom:6px;
}

.product-price{
font-weight:700;
}

.product-btn{
margin-top:10px;
width:100%;
background:var(--primary);
color:var(--text-inverse);
padding:10px;
border-radius:6px;
cursor:pointer;
transition:.2s;
border:none;
}

.product-btn:hover{
opacity:.9;
}


/* =====================================================
CATEGORIES
===================================================== */

.category-card{
background:var(--card);
border:1px solid var(--border);
padding:18px;
border-radius:8px;
text-align:center;
font-weight:600;
color:var(--text);
transition:.2s;
cursor:pointer;
}

/* 🔥 MEJORA UX */
.category-card:hover{
border-color:var(--primary);
box-shadow:0 8px 24px rgba(0,0,0,.2);
transform:translateY(-2px);
}


/* =====================================================
CART MODAL
===================================================== */

.cart-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
display:flex;
align-items:center;
justify-content:center;
z-index:999;
}

.hidden{
display:none;
}

.cart-box,
#cart-modal > div{
background:var(--card);
color:var(--text);
border:1px solid var(--border);
width:420px;
max-width:92%;
max-height:90vh;
display:flex;
flex-direction:column;
border-radius:10px;
box-shadow:0 20px 40px rgba(0,0,0,.3);
}

.cart-title{
font-size:20px;
font-weight:600;
padding:20px;
border-bottom:1px solid var(--border);
}

#cart-items{
flex:1;
overflow-y:auto;
padding:16px;
}

.cart-item{
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid var(--border);
padding:10px 0;
}

.cart-item a{
color:var(--danger);
font-size:14px;
}

.cart-footer{
padding:16px;
border-top:1px solid var(--border);
background:var(--card);
}

.cart-footer input{
width:100%;
padding:10px;
margin-bottom:10px;
}

.cart-total{
display:flex;
justify-content:space-between;
margin-bottom:12px;
font-weight:700;
}

.cart-actions{
display:flex;
gap:10px;
}

.cart-close{
flex:1;
border:1px solid var(--border);
padding:10px;
border-radius:6px;
cursor:pointer;
background:transparent;
color:var(--text);
}

.cart-checkout{
flex:1;
background:var(--primary);
color:var(--text-inverse);
padding:10px;
border-radius:6px;
cursor:pointer;
border:none;
}

@supports (height: 100dvh){
.cart-box{
max-height:90dvh;
}
}


/* =====================================================
CHECKOUT MODAL
===================================================== */

#checkout-modal > div{
background:var(--card);
color:var(--text);
border:1px solid var(--border);
border-radius:10px;
}

#checkout-modal input{
background:var(--background);
color:var(--text);
border:1px solid var(--border);
}

#checkout-modal button:first-of-type{
background:var(--primary);
color:var(--text-inverse);
}


/* =====================================================
🔥 PRODUCT MODAL (NUEVO FIX)
===================================================== */

#product-modal > div{
background:var(--card);
color:var(--text);
border:1px solid var(--border);
}

#product-modal select{
background:var(--background);
color:var(--text);
border:1px solid var(--border);
}


/* =====================================================
🔥 HERO CTA (BOTÓN VER CATÁLOGO)
===================================================== */

.hero a{
background:var(--text);
color:var(--background);
padding:12px 24px;
border-radius:8px;
font-weight:600;
display:inline-block;
}


/* =====================================================
CHATBOT
===================================================== */

.chatbot-fab{
position:fixed;
bottom:20px;
right:20px;
width:56px;
height:56px;
background:var(--primary);
color:var(--text-inverse);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
box-shadow:0 6px 20px rgba(0,0,0,.3);
cursor:pointer;
z-index:9999;
}

.chatbot-box{
position:fixed;
bottom:90px;
right:20px;
width:300px;
background:var(--card);
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.3);
overflow:hidden;
z-index:9999;
color:var(--text);
}

.chatbot-hidden{
display:none;
}


/* =====================================================
THEMES
===================================================== */

/* MODERN */
.theme-modern{
--background:#f5f5f5;
--card:#ffffff;
--card-elevated:#ffffff;

--text:#111;
--text-muted:#666;
--text-inverse:#fff;

--primary:#111;
--border:#e5e5e5;
}

/* DARK */
.theme-dark{
--background:#2b2b2b;
--card:#333;
--card-elevated:#3a3a3a;

--text:#f5f5f5;
--text-muted:#aaa;
--text-inverse:#000;

--primary:#f5f5f5;
--border:#444;
}

/* BLACK */
.theme-black{
--background:#000;
--card:#0a0a0a;
--card-elevated:#111;

--text:#f5f5f5;
--text-muted:#888;
--text-inverse:#000;

--primary:#ffffff;
--border:#1a1a1a;
}

/* LUXURY */
.theme-luxury{
--background:#0b0b0b;
--card:#161616;
--card-elevated:#1f1f1f;

--text:#f2f2f2;
--text-muted:#c0a96a;
--text-inverse:#000;

--primary:#e6c88c;
--border:rgba(200,169,106,.2);
}

/* =====================================================
VELOUR NOIR — Urban Premium (FIX COMPLETO)
===================================================== */

.theme-velour{

/* BASE */
--background:#0a0f0d;
--card:#121917;
--card-elevated:#18221f;

/* TEXTOS */
--text:#f4f1e8;
--text-muted:#9e8f6b;
--text-inverse:#000000;

/* COLORES PRINCIPALES */
--primary:#c2a46f;
--secondary:#1b3a33;
--accent:#5f432e;

/* UI */
--border:rgba(194,164,111,.18);
--glow:rgba(194,164,111,.25);

/* 🔥 FIX HERO OVERLAY */
--overlay-start: rgba(10,15,13,.4);
--overlay-end: rgba(10,15,13,.7);

/* 🔥 FIX BOTONES / CONTRASTE */
--button-bg: var(--primary);
--button-text: #000;

/* 🔥 FIX INPUTS */
--input-bg: #121917;
--input-border: rgba(194,164,111,.2);

}
/* GRAY */
.theme-gray{
--background:#e5e5e5;
--card:#d1d1d1;
--card-elevated:#c4c4c4;

--text:#1a1a1a;
--text-muted:#555;
--text-inverse:#ffffff;

--primary:#2b2b2b;
--border:#bdbdbd;
}

/* EARTH / NATURAL */
.theme-earth{
--background:#102601;
--card:#1B5948;
--card-elevated:#245f4e;

--text:#D9BFA0;
--text-muted:#C09465;
--text-inverse:#102601;

--primary:#C09465;
--border:#5F432E;
}

/* =====================================================
FORCE THEME
===================================================== */

body.theme-gray,
body.theme-black,
body.theme-dark,
body.theme-earth,
body.theme-modern,
body.theme-velour,
body.lujo,
body.tenis,
body.theme-luxury{
background:var(--background);
color:var(--text);
}

/* MODAL PRODUCTO */
.product-modal{
background:var(--card);
color:var(--text);
border:1px solid var(--border);
}

/* SELECTS */
.product-modal select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

background:var(--background);
color:var(--text);
border:1px solid var(--border);

padding:10px;
border-radius:6px;
width:100%;
}

.hero-overlay{
background:linear-gradient(
to bottom,
rgba(0,0,0,.4),
rgba(0,0,0,.7)
);
}

/* =====================================================
🔥 TENIS GAMA MX — STREET PREMIUM
===================================================== */

.theme-tenis{

/* BASE */
--background:#0a0a0f;
--card:#12121a;
--card-elevated:#1a1a24;

/* TEXTOS */
--text:#f5f7fa;
--text-muted:#9aa3b2;
--text-inverse:#000;

/* COLORES PRINCIPALES */
--primary:#1e6bff;   /* azul fuerte tipo deportivo */
--secondary:#ff2d2d; /* rojo Nike vibe */
--accent:#00d4ff;    /* brillo moderno */

/* UI */
--border:rgba(255,255,255,.06);
--glow:rgba(30,107,255,.3);

/* HERO */
--overlay-start: rgba(0,0,0,.3);
--overlay-end: rgba(0,0,0,.75);

/* BOTONES */
--button-bg: linear-gradient(135deg,#1e6bff,#00d4ff);
--button-text:#fff;

/* INPUTS */
--input-bg:#12121a;
--input-border:rgba(255,255,255,.08);

}

/* =====================================================
🔥 TENIS ELEGANTE — LUXURY STREET
===================================================== */

.theme-lujo{

/* BASE */
--background:#050505;
--card:#181818;          /* MÁS CLARO */
--card-elevated:#222222; /* AÚN MÁS CLARO */

/* TEXTOS */
--text:#ffffff;
--text-muted:#bfbfbf;
--text-inverse:#000;

/* COLORES */
--primary:#d4af37;
--secondary:#ffffff;
--accent:#3a86ff;

/* UI */
--border:rgba(255,255,255,.18); /* MÁS VISIBLE */
--glow:rgba(212,175,55,.45);

/* HERO */
--overlay-start: rgba(0,0,0,.2); /* MÁS LUZ */
--overlay-end: rgba(0,0,0,.7);

/* BOTONES */
--button-bg: linear-gradient(135deg,#d4af37,#f5d97a);
--button-text:#000;

/* INPUTS */
--input-bg:#1c1c1c;
--input-border:rgba(255,255,255,.2);

}

.theme-lujo .product-card{
background:var(--card-elevated); /* 🔥 usa elevated */
border:1px solid var(--border);
box-shadow:0 10px 40px rgba(0,0,0,.8);
}

.theme-lujo .product-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 60px rgba(212,175,55,.25);
}