/* ===========================================
   ESTILOS GLOBALES - DARK GLASS UI PREMIUM
   =========================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  background:radial-gradient(circle at top,#1b2a4b 0%,#0c1224 50%,#02010a 100%);
  color:#e5e9f0;
  min-height:100vh;
}

/* Links */
a{text-decoration:none;color:inherit;}

/* ===========================================
   HEADER VIDRIADO
   =========================================== */

.main-header{
  background:rgba(15,23,42,0.55);
  border-bottom:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(18px);
  padding:14px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 8px 35px rgba(0,0,0,0.5);
}

.logo{
  font-size:1.5rem;
  font-weight:800;
  color:white;
}
.logo span{
  background:linear-gradient(135deg,#ff5b8a,#ff0044);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-header nav a{
  margin-left:14px;
  padding:6px 12px;
  border-radius:8px;
  color:#e5e9f0;
  transition:0.2s;
}
.main-header nav a:hover{
  background:rgba(255,255,255,0.08);
}

/* ===========================================
   CONTENEDOR PRINCIPAL
   =========================================== */

.container{
  max-width:1250px;
  margin:20px auto;
  padding:0 14px;
}

/* ===========================================
   CAROUSEL PUBLICITARIO
   =========================================== */

.carousel{
  width:100%;
  margin:20px auto;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
}

.carousel img{
  width:100%;
  height:280px;
  object-fit:cover;
  animation:fade 10s infinite ease-in-out;
}

@keyframes fade{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}

/* ===========================================
   CARDS VIDRIADAS
   =========================================== */

.card{
  background:rgba(15,23,42,0.65);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:18px;
  margin-bottom:20px;
  box-shadow:0 10px 35px rgba(0,0,0,0.5);
}

/* ===========================================
   BOTONES
   =========================================== */

.btn{
  display:inline-block;
  padding:10px 18px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#ff5b8a,#ff0044);
  color:white;
  cursor:pointer;
  font-size:0.95rem;
  transition:0.2s;
}

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

.btn-secondary{
  background:linear-gradient(135deg,#3b82f6,#0ea5e9);
}

/* ===========================================
   INPUTS & FORMULARIOS
   =========================================== */

input,select,textarea{
  width:100%;
  padding:10px;
  background:rgba(15,23,42,0.85);
  border:1px solid rgba(148,163,184,0.5);
  border-radius:10px;
  color:#fff;
  margin:10px 0 18px;
}

/* ===========================================
   SIDEBAR IZQUIERDO (COMERCIOS)
   =========================================== */

.layout{
  display:flex;
  gap:20px;
  align-items:flex-start;
  margin-top:20px;
}

.sidebar{
  width:220px;
  background:rgba(15,23,42,0.55);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:16px;
  position:sticky;
  top:110px;
  box-shadow:0 10px 35px rgba(0,0,0,0.45);
}

.sidebar h3{
  margin-bottom:10px;
  font-size:1rem;
  font-weight:600;
}

.sidebar a{
  display:block;
  padding:10px;
  margin-bottom:10px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  color:#cbd5e1;
  font-size:0.93rem;
  transition:0.2s;
}

.sidebar a:hover{
  background:linear-gradient(135deg,#3b82f6,#0ea5e9);
  color:white;
}

.sidebar a.active{
  background:linear-gradient(135deg,#ff5b8a,#ff0044);
  color:white;
}

/* ===========================================
   GRID DE PRODUCTOS
   =========================================== */

.grid{
  flex:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}

/* CARD DE PRODUCTO */

.card-product{
  background:rgba(15,23,42,0.6);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 12px 38px rgba(0,0,0,0.5);
}

.card-product img{
  width:100%;
  height:170px;
  object-fit:cover;
}

.card-body{
  padding:14px;
}

.card-title{
  font-size:1.05rem;
  font-weight:700;
}

.card-desc{
  font-size:0.85rem;
  color:#cbd5e1;
  margin:6px 0 8px;
  height:40px;
  overflow:hidden;
}

.card-price{
  font-weight:700;
  margin-bottom:10px;
  font-size:1.05rem;
}

.card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
}

.card-footer input[type="number"]{
  width:60px;
  padding:6px;
  border-radius:8px;
}

/* ===========================================
   TABLAS
   =========================================== */

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:10px;
  border-bottom:1px solid rgba(148,163,184,0.2);
  color:#e5e9f0;
  font-size:0.95rem;
}

th{text-align:left;font-weight:600;}

/* ===========================================
   FOOTER
   =========================================== */

.main-footer{
  text-align:center;
  background:rgba(15,23,42,0.6);
  padding:18px;
  margin-top:40px;
  border-top:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(14px);
  font-size:0.9rem;
  box-shadow:0 -5px 30px rgba(0,0,0,0.4);
}