body{
  margin:0;
  background:#020617;
  color:white;
  font-family:Arial;
}

.sidebar .inventory-special-link{
  display:flex;align-items:center;gap:8px;color:#fde68a!important;
  border-color:rgba(245,158,11,.42)!important;
  background:linear-gradient(135deg,rgba(245,158,11,.17),rgba(124,58,237,.12))!important;
  box-shadow:inset 0 0 18px rgba(245,158,11,.05);
}
.sidebar .inventory-special-link:hover{border-color:#f59e0b!important;box-shadow:0 0 16px rgba(245,158,11,.22)}

/* HEADER */
.header{
  background:#0f172a;
  padding:15px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.header h2{
  color:var(--primary);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}

.logo-img{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:8px;
}
.about-link{
color:white;
text-decoration:none;
font-weight:600;
transition:.25s;
padding:10px 16px;
border-radius:12px;
background:rgba(var(--primary-rgb),.08);
border:1px solid rgba(var(--primary-rgb),.15);
}

.about-link:hover{
background:rgba(var(--primary-rgb),.18);
box-shadow:0 0 15px rgba(var(--primary-rgb),.25);
}

@media(max-width:700px){
.header{
flex-direction:column;
align-items:center;
gap:12px;
padding:16px 20px;
}

.header h2{
font-size:22px;
}

.header-links{
justify-content:center;
width:100%;
}

.about-link{
padding:8px 12px;
font-size:13px;
}
}
/* SEARCH */

.search{
display:flex;
gap:14px;
margin:25px 0 30px;
align-items:center;
}

.search input{
flex:1;
height:56px;
padding:0 20px;
border-radius:16px;
border:1px solid rgba(var(--primary-rgb),.18);
background:rgba(15,23,42,.85);
color:white;
font-size:15px;
outline:none;
transition:.25s;
backdrop-filter:blur(10px);
box-shadow:
0 0 0 rgba(var(--primary-rgb),0),
inset 0 0 0 1px rgba(255,255,255,.02);
}

.search input::placeholder{
color:#94a3b8;
}

.search input:focus{
border-color:var(--primary);
box-shadow:
0 0 20px rgba(var(--primary-rgb),.18),
0 0 0 3px rgba(var(--primary-rgb),.08);
background:#0f172a;
}

.search button{
height:56px;
padding:0 24px;
border:none;
border-radius:16px;
background:var(--primary);
color:white;
font-weight:600;
cursor:pointer;
transition:.25s;
box-shadow:0 0 18px rgba(var(--primary-rgb),.25);
}

.search button:hover{
transform:translateY(-2px);
box-shadow:0 0 22px rgba(var(--primary-rgb),.45);
}


/* LAYOUT */
.container-main{
  display:grid;
  grid-template-columns:250px 1fr;
  gap:20px;
  padding:20px;
}

/* SIDEBAR */
.sidebar{
  background:#0b1220;
  padding:20px;
  border-radius:12px;
}

.sidebar h4{
  margin-bottom:10px;
}

.sidebar ul{
  list-style:none;
  padding:0;
}

.sidebar li{
  padding:8px 0;
}

.sidebar a{
  color:white;
  text-decoration:none;
}

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

/* HERO */
.hero{
  background:linear-gradient(135deg,#1e1b4b,#020617);
  padding:40px;
  border-radius:16px;
  margin-bottom:20px;
}

/* GRID */
.products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
align-items:start;
}
.products.search-active{
grid-template-columns:repeat(auto-fit,minmax(250px,320px));
justify-content:flex-start;
}
.products.search-active .card{
max-width:320px;
width:100%;
}
/* GRID CONTROLS */

.grid-controls{
display:flex;
justify-content:flex-end;
gap:10px;
margin-bottom:18px;
}

.grid-btn{
min-width:58px;
height:46px;
padding:0 14px;
border:none;
border-radius:12px;
background:#111827;
color:white;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:.25s;
border:1px solid rgba(var(--primary-rgb),.15);
}

.grid-btn:hover{
transform:translateY(-2px);
border-color:var(--primary);
box-shadow:0 0 15px rgba(var(--primary-rgb),.25);
}

.grid-btn.active{
background:var(--primary);
box-shadow:0 0 18px rgba(var(--primary-rgb),.35);
}
/* CARD */
.card{
  background:#080e20;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:16px;
  padding:15px;
  border:1px solid rgba(var(--primary-rgb),0.2);
  transition:0.3s;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 0 20px var(--primary);
}

.card img{
width:94%;
aspect-ratio:1/1;
object-fit:contain;
background:#fff;
border-radius:14px;
padding:10px;
display:block;
}

.card a{
  text-decoration:none;
  color:inherit;
  display:block;
}
/* CARD FOOTER */
.card-footer{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
margin-top:18px;
}

/* PRICE */
.card-price{
padding:8px 14px;
border-radius:999px;
font-size:15px;
font-weight:700;
background:rgba(var(--primary-rgb),.12);
border:1px solid rgba(var(--primary-rgb),.22);
color:var(--primary-light);
backdrop-filter:blur(10px);
box-shadow:0 0 12px rgba(var(--primary-rgb),.12);
}

/* STOCK */

.card-stock{
padding:8px 12px;
border-radius:999px;
font-size:13px;
font-weight:600;
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.06);
}

/* DISPONIBLE */

.stock-ok{
background:rgba(34,197,94,.12);
border-color:rgba(34,197,94,.25);
color:#22c55e;
}

/* AGOTADO */

.stock-no{
background:rgba(239,68,68,.12);
border-color:rgba(239,68,68,.25);
color:#ef4444;
}
/* STOCK */
.ok{color:#22c55e;}
.no{color:#ef4444;}

/* MOBILE */
@media(max-width:800px){
  .container-main{
    grid-template-columns:1fr;
  }
}
.card{
  position:relative;
}

.card a{
  position:relative;
  z-index:2;
}

.out-badge{
    position:absolute;
    top:12px;
    left:12px;
    z-index:999;

    background:#ef4444;
    color:#fff;

    padding:7px 14px;
    border-radius:8px;

    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;

    box-shadow:0 4px 12px rgba(239,68,68,.35);
}

.search-result-box{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:14px;
background:rgba(var(--primary-rgb),.08);
border:1px solid rgba(var(--primary-rgb),.15);
margin:10px 0 25px;
backdrop-filter:blur(10px);
}

.result-label{
color:#94a3b8;
font-weight:500;
}

.result-query{
color:var(--primary-light);
font-weight:700;
text-transform:capitalize;
}
.sidebar ul{
list-style:none;
padding:0;
margin:0;
}
.sidebar ul{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:12px;
}
/* ===== MOBILE CATEGORIES ===== */

.mobile-cat-btn{
display:none;
background:var(--primary);
padding:14px;
border-radius:12px;
margin-bottom:15px;
font-weight:bold;
cursor:pointer;
text-align:center;
box-shadow:0 0 15px rgba(var(--primary-rgb),.5);
}

/* SOLO MÓVIL */
@media(max-width:800px){

.mobile-cat-btn{
display:block;
}

.sidebar{
display:none;
animation:fadeDown .3s ease;
}

.sidebar.active{
display:block;
}

}

/* ANIMATION */
@keyframes fadeDown{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}
.sidebar a{
  display:block;
  padding:8px 12px;          /* antes 10px 14px */
  margin-bottom:6px;         /* antes 8px */
  border-radius:8px;         /* antes 10px */
  background:rgba(var(--primary-rgb),0.08);
  border:1px solid rgba(var(--primary-rgb),0.15);
  color:white;
  text-decoration:none;
  font-size:14px;            /* más compacto */
  transition:0.2s;
}

/* hover más sutil */
.sidebar a:hover{
  background:rgba(var(--primary-rgb),0.2);
  transform:translateX(3px);
}
body.light .sidebar a{
  background:#ffffff;
  color:#0f172a;
  border:1px solid #e2e8f0;
}

body.light .sidebar a:hover{
  background:#ede9fe;
  color:var(--primary);
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

#themeToggle{
  position:fixed;
  right:20px;
  bottom:20px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--primary);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  cursor:pointer;
  z-index:999999;
}

/* LIGHT MODE */
body.light{
  background:#f1f5f9 !important;
  color:#000 !important;
}

body.light .card{
  background:white !important;
  color:#000 !important;
}

body.light .sidebar{
  background:white !important;
}

body.light .header{
  background:white !important;
}

   LIGHT MODE PROFESIONAL
========================= */

body.light{
  background:#f8fafc !important;
  color:#0f172a !important;
}

/* HEADER */
body.light .header{
  background:#ffffff !important;
  border-bottom:1px solid #e2e8f0;
}

/* INPUT BUSCADOR */
body.light .search input{
  background:#ffffff !important;
  color:#000 !important;
  border:1px solid #ddd;
}

/* BOTÓN */
body.light .search button{
  background:var(--primary);
  color:white;
}

/* SIDEBAR */
body.light .sidebar{
  background:#ffffff !important;
  border:1px solid #e2e8f0;
}

body.light .sidebar a{
  color:#0f172a !important;
}

/* HERO */
body.light .hero{
  background:linear-gradient(135deg,#e0e7ff,#f1f5f9);
  color:#0f172a !important;
}

/* CARDS */
body.light .card{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #e2e8f0;
}

/* PRODUCT TEXT */
body.light .card h4,
body.light .card p{
  color:#0f172a !important;
}

/* STOCK */
body.light .ok{
  color:#16a34a;
}

body.light .no{
  color:#dc2626;
}

/* FOOTER */
body.light .footer{
  background:#ffffff !important;
  color:#0f172a !important;
  border-top:1px solid #e2e8f0;
}

/* LINKS */
body.light a{
  color:var(--primary);
}
/* CURRENCY BUTTON */
.currency-btn{
position:fixed;
bottom:160px;
right:20px;
z-index:9999;
background:#0f172a;
color:white;
padding:12px 16px;
border-radius:14px;
cursor:pointer;
font-weight:bold;
border:1px solid rgba(var(--primary-rgb),.3);
box-shadow:0 0 15px rgba(var(--primary-rgb),.3);
transition:.3s;
}

.currency-btn:hover{
transform:scale(1.05);
}