/* ═══════════════════════════════════════════════
   LICORES MAYORISTA — CSS Principal
   ═══════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --negro:#162731;
  --negro2:#1f3540;
  --negro3:#2a4552;
  --dorado:#F1664F;
  --dorado2:#F58268;
  --rojo:#c0392b;
  --verde:#27ae60;
  --gris:#f4f4f4;
  --gris2:#e0e0e0;
  --texto:#222;
  --blanco:#fff;
  --sidebar-w:240px;
  --navbar-h:75px;
  --shadow:0 2px 12px rgba(0,0,0,0.13);
}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f5f5f5;color:var(--texto);min-height:100vh}

/* ── NAVBAR ── */
.navbar{
  position:fixed;top:0;left:0;right:0;height:var(--navbar-h);
  background:var(--negro);color:var(--blanco);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.4);
  gap:0.75rem;
}
.navbar-left{display:flex;align-items:center;gap:0.6rem;min-width:0}
.btn-hamburger{background:none;border:none;color:var(--blanco);font-size:1.3rem;cursor:pointer;padding:6px;border-radius:6px;transition:background 0.2s}
.btn-hamburger:hover{background:var(--negro3)}
.navbar-brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;color:var(--blanco);font-weight:800;font-size:1.25rem;white-space:nowrap;letter-spacing:0.5px}
.brand-icon{color:var(--dorado);font-size:1.5rem}
.brand-short{display:none}
.navbar-center{flex:0 0 220px;margin:0 0.5rem}
.search-box{position:relative;width:100%}
.search-box i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#888;font-size:0.85rem}
.search-box input{width:100%;padding:7px 12px 7px 32px;border-radius:20px;border:1px solid var(--negro3);background:var(--negro2);color:var(--blanco);font-size:0.88rem;outline:none;transition:border 0.2s}
.search-box input:focus{border-color:var(--dorado)}
.search-box input::placeholder{color:#666}
.navbar-right{display:flex;align-items:center;gap:0.6rem;flex-shrink:0}
.nav-user{display:flex;align-items:center;gap:0.4rem;cursor:pointer;padding:4px 8px;border-radius:20px;transition:background 0.2s;position:relative}
.nav-user:hover{background:var(--negro3)}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--dorado);color:var(--negro);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0}
.user-nombre-full{font-size:0.82rem;white-space:nowrap}
.user-badge{font-size:0.65rem;padding:2px 7px;border-radius:10px;font-weight:700;text-transform:uppercase}
.badge-bronce{background:#cd7f32;color:#fff}
.badge-plata{background:#c0c0c0;color:#333}
.badge-oro{background:var(--dorado);color:#333}
.badge-platino{background:#e5e4e2;color:#333;border:1px solid #999}
.perfil-dropdown{position:absolute;top:calc(var(--navbar-h) - 4px);right:80px;background:var(--negro2);border:1px solid var(--negro3);border-radius:10px;min-width:180px;padding:8px 0;z-index:1100;display:none;box-shadow:var(--shadow)}
.perfil-dropdown.show{display:block}
.perfil-dropdown a{display:flex;align-items:center;gap:8px;padding:9px 16px;color:var(--blanco);text-decoration:none;font-size:0.88rem;transition:background 0.2s}
.perfil-dropdown a:hover{background:var(--negro3)}
.perfil-dropdown hr{border-color:var(--negro3);margin:4px 0}
.logout-link{color:#e74c3c !important}
.btn-login,.btn-registro{text-decoration:none;padding:6px 12px;border-radius:20px;font-size:0.82rem;font-weight:600;transition:all 0.2s;display:flex;align-items:center;gap:5px;white-space:nowrap}
.btn-login{border:1px solid var(--dorado);color:var(--dorado)}
.btn-login:hover{background:var(--dorado);color:var(--negro)}
.btn-registro{background:var(--dorado);color:var(--negro)}
.btn-registro:hover{background:var(--dorado2)}
.btn-carrito{position:relative;background:none;border:none;color:var(--blanco);font-size:1.2rem;cursor:pointer;padding:6px 10px;border-radius:8px;transition:background 0.2s}
.btn-carrito:hover{background:var(--negro3)}
.carrito-badge{position:absolute;top:0;right:0;background:var(--dorado);color:var(--negro);font-size:0.65rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* ── SIDEBAR ── */
.sidebar{
  position:fixed;
  top:calc(var(--navbar-h) + 6px);
  left:0;bottom:0;width:var(--sidebar-w);
  background:var(--negro2);color:var(--blanco);overflow-y:auto;
  transition:transform 0.3s ease;z-index:900;
  border-right:1px solid var(--negro3);
}
.sidebar-header{
  padding:1rem 1.2rem;font-size:1.1rem;font-weight:700;
  color:var(--dorado);display:flex;align-items:center;gap:0.5rem;
  border-bottom:1px solid var(--negro3);letter-spacing:1px;text-transform:uppercase;
}
.sidebar-menu{padding:0.5rem 0}
.menu-item{
  display:flex;align-items:center;gap:0.7rem;
  padding:10px 1.2rem;color:#ccc;text-decoration:none;
  font-size:0.9rem;transition:all 0.2s;border-left:3px solid transparent;
}
.menu-item:hover,.menu-item.active{
  background:var(--negro3);color:var(--dorado);
  border-left-color:var(--dorado);
}
.menu-item i{width:18px;text-align:center;font-size:0.95rem}
.menu-divider{border-color:var(--negro3);margin:0.5rem 0}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:850}
.sidebar-overlay.show{display:block}

/* ── MAIN WRAPPER ── */
.main-wrapper{
  margin-left:var(--sidebar-w);
  margin-top:var(--navbar-h);
  min-height:calc(100vh - var(--navbar-h));
  padding:1.5rem;
  transition:margin-left 0.3s;
}

/* ── AGE GATE ── */
.age-gate-body{background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 50%,#0d0d0d 100%);min-height:100vh;display:flex;align-items:center;justify-content:center}
.age-gate-overlay{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.age-gate-card{background:rgba(30,30,30,0.97);border:1px solid var(--dorado);border-radius:20px;padding:2.5rem 2rem;max-width:460px;width:100%;text-align:center;box-shadow:0 0 40px rgba(201,168,76,0.2)}
.age-gate-logo{color:var(--dorado);margin-bottom:1.5rem}
.age-gate-logo i{font-size:3rem}
.age-gate-logo h1{font-size:1.5rem;color:var(--blanco);margin-top:0.5rem}
.age-gate-icon{font-size:2.5rem;color:var(--dorado);margin-bottom:1rem}
.age-gate-content h2{color:var(--blanco);font-size:1.3rem;margin-bottom:0.75rem}
.age-gate-content p{color:#aaa;font-size:0.92rem;margin-bottom:0.5rem}
.age-gate-question{color:var(--blanco) !important;font-size:1.05rem !important;margin:1.2rem 0 !important}
.age-gate-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.btn-edad-si{background:var(--dorado);color:var(--negro);padding:12px 28px;border-radius:25px;text-decoration:none;font-weight:700;font-size:0.95rem;transition:all 0.2s;display:flex;align-items:center;gap:6px}
.btn-edad-si:hover{background:var(--dorado2);transform:translateY(-2px)}
.btn-edad-no{background:transparent;color:#aaa;border:1px solid #555;padding:12px 28px;border-radius:25px;text-decoration:none;font-size:0.95rem;transition:all 0.2s;display:flex;align-items:center;gap:6px}
.btn-edad-no:hover{background:#333;color:#fff}
.age-gate-legal{margin-top:1.5rem;font-size:0.75rem;color:#666;line-height:1.6}

/* ── HERO BANNER ── */
.hero-banner{background:linear-gradient(135deg,var(--negro) 0%,var(--negro2) 60%,#1a1200 100%);border-radius:12px;padding:2.5rem 2rem;margin-bottom:1.5rem;border:1px solid var(--negro3)}
.hero-text h1{color:var(--dorado);font-size:1.8rem;margin-bottom:0.5rem}
.hero-text p{color:#aaa;font-size:1rem}
.categoria-banner{background:var(--negro2);border-radius:12px;padding:1.2rem 1.5rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;border-left:4px solid var(--dorado)}
.categoria-banner h2{color:var(--blanco);font-size:1.2rem}
.categoria-banner span{color:#aaa;font-size:0.85rem}

/* ── PRODUCTOS GRID ── */
.productos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.2rem;
  margin-bottom:2rem;
}
.producto-card{
  background:var(--blanco);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);position:relative;
  transition:transform 0.2s,box-shadow 0.2s;
  display:flex;flex-direction:column;
}
.producto-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.oferta-badge{position:absolute;top:10px;left:10px;background:var(--rojo);color:#fff;font-size:0.72rem;font-weight:700;padding:4px 10px;border-radius:12px;z-index:2;letter-spacing:0.5px}
.stock-badge{position:absolute;top:10px;right:10px;background:#e67e22;color:#fff;font-size:0.68rem;font-weight:700;padding:3px 8px;border-radius:10px;z-index:2}
.agotado-badge{position:absolute;top:10px;right:10px;background:#c0392b;color:#fff;font-size:0.7rem;font-weight:800;padding:4px 10px;border-radius:10px;z-index:2;letter-spacing:0.5px;text-transform:uppercase}
.producto-img-wrap{height:320px;overflow:hidden;background:#fff;display:flex;align-items:flex-start;justify-content:center;padding:0}
.producto-img-wrap img{width:100%;height:320px;object-fit:cover;object-position:center top;background:#fff;transition:transform 0.3s}
.producto-card:hover .producto-img-wrap img{transform:scale(1.05)}
.producto-info{padding:0.9rem;flex:1;display:flex;flex-direction:column;gap:0.3rem}
.producto-ref{font-size:0.7rem;color:#999;font-family:monospace}
.producto-nombre{font-size:0.92rem;font-weight:700;color:var(--negro);line-height:1.3;flex:1}
.producto-cat{font-size:0.72rem;color:var(--dorado);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.producto-precios{display:flex;flex-direction:column;gap:3px;margin:0.4rem 0;padding:0.5rem;background:#fafafa;border-radius:8px;border:1px solid #eee}
.precio-item{display:flex;justify-content:space-between;align-items:center;font-size:0.8rem}
.lista-label{color:#888;font-size:0.72rem}
.precio-val{font-weight:700;color:var(--negro)}
.precio-mejor{color:#27ae60}
.precio-top{color:var(--dorado);font-size:0.88rem}
.producto-acciones{display:flex;gap:0.5rem;align-items:center;margin-top:0.5rem}
.cantidad-ctrl{display:flex;align-items:center;gap:4px;border:1px solid var(--gris2);border-radius:8px;overflow:hidden}
.cantidad-ctrl button{background:#f0f0f0;border:none;padding:5px 8px;cursor:pointer;font-size:0.75rem;transition:background 0.2s}
.cantidad-ctrl button:hover{background:var(--dorado);color:var(--negro)}
.cantidad-ctrl input{width:38px;border:none;text-align:center;font-size:0.82rem;font-weight:700;padding:5px 0;outline:none}
.btn-agregar{flex:1;background:var(--negro);color:var(--blanco);border:none;padding:8px;border-radius:8px;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:5px}
.btn-agregar:hover{background:var(--dorado);color:var(--negro)}
.btn-agregar.disabled{background:#ccc;cursor:not-allowed}
.no-productos{grid-column:1/-1;text-align:center;padding:4rem;color:#aaa}
.no-productos i{font-size:3rem;margin-bottom:1rem;display:block}

/* ── PAGINACIÓN ── */
.paginacion{display:flex;justify-content:center;gap:0.5rem;margin:2rem 0;flex-wrap:wrap}
.pag-btn{padding:8px 14px;border-radius:8px;background:var(--blanco);border:1px solid var(--gris2);color:var(--texto);text-decoration:none;font-size:0.88rem;transition:all 0.2s}
.pag-btn:hover,.pag-btn.active{background:var(--negro);color:var(--blanco);border-color:var(--negro)}

/* ── CARRITO PANEL ── */
.carrito-panel{
  position:fixed;top:0;right:-400px;width:380px;height:100vh;
  background:var(--blanco);box-shadow:-4px 0 20px rgba(0,0,0,0.2);
  z-index:1200;transition:right 0.3s ease;display:flex;flex-direction:column;
}
.carrito-panel.open{right:0}
.carrito-header{padding:1rem 1.2rem;background:var(--negro);color:var(--blanco);display:flex;justify-content:space-between;align-items:center}
.carrito-header h3{font-size:1rem;display:flex;align-items:center;gap:8px}
.carrito-header button{background:none;border:none;color:var(--blanco);font-size:1.1rem;cursor:pointer}
.carrito-items{flex:1;overflow-y:auto;padding:1rem}
.carrito-vacio{text-align:center;padding:3rem 1rem;color:#aaa}
.carrito-vacio i{font-size:2.5rem;display:block;margin-bottom:0.75rem;color:#ddd}
.carrito-item{display:flex;gap:0.75rem;padding:0.75rem 0;border-bottom:1px solid #eee;align-items:center}
.carrito-item-img{width:50px;height:50px;object-fit:cover;border-radius:6px;background:#f5f5f5}
.carrito-item-info{flex:1;min-width:0}
.carrito-item-nombre{font-size:0.82rem;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carrito-item-precio{font-size:0.78rem;color:var(--dorado);font-weight:700}
.carrito-item-lista{font-size:0.68rem;color:#999}
.carrito-item-ctrl{display:flex;align-items:center;gap:4px}
.carrito-item-ctrl button{background:#f0f0f0;border:none;width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:0.75rem}
.carrito-item-ctrl span{font-size:0.82rem;font-weight:700;min-width:20px;text-align:center}
.carrito-item-del{background:none;border:none;color:#e74c3c;cursor:pointer;padding:4px;font-size:0.85rem}
.carrito-footer{padding:1rem 1.2rem;border-top:1px solid #eee;background:#fafafa}
.carrito-subtotal,.carrito-descuento,.carrito-total{display:flex;justify-content:space-between;font-size:0.88rem;margin-bottom:0.4rem}
.carrito-total{font-size:1rem;font-weight:700;padding-top:0.5rem;border-top:1px solid #eee;margin-top:0.5rem}
.carrito-lista-info{font-size:0.75rem;color:var(--dorado);margin-bottom:0.5rem;font-weight:600}
.carrito-acciones{display:flex;gap:0.75rem;margin-top:0.75rem}
.btn-seguir{flex:1;padding:10px;border:1px solid var(--negro);background:transparent;border-radius:8px;font-size:0.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all 0.2s}
.btn-seguir:hover{background:var(--negro);color:var(--blanco)}
.btn-comprar{flex:1;padding:10px;background:var(--dorado);border:none;border-radius:8px;font-size:0.85rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all 0.2s}
.btn-comprar:hover{background:var(--dorado2)}
.carrito-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1150}
.carrito-overlay.show{display:block}

/* ── FOOTER ── */
.footer{background:var(--negro);color:#aaa;padding:1.5rem;margin-left:var(--sidebar-w);margin-top:2rem;transition:margin-left 0.3s}
.footer-content{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;align-items:start}
.footer-brand strong{color:var(--dorado);display:flex;align-items:center;gap:6px;margin-bottom:0.4rem}
.footer-brand p{font-size:0.78rem}
.footer-links{display:flex;flex-direction:column;gap:0.5rem}
.footer-links a{color:#aaa;text-decoration:none;font-size:0.82rem;transition:color 0.2s}
.footer-links a:hover{color:var(--dorado)}
.footer-legal{font-size:0.75rem;line-height:1.7}
.footer-legal i{color:#e67e22;margin-right:4px}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-wrapper{margin-left:0}
  .footer{margin-left:0}
  .navbar-center{display:none}
  .btn-login-text,.btn-registro-text,.user-nombre-full{display:none}
  .brand-full{display:none}
  .brand-short{display:inline}
  .footer-content{grid-template-columns:1fr}
}
@media(max-width:600px){
  .productos-grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}
  .carrito-panel{width:100%}
  .main-wrapper{padding:0.75rem}
  .btn-registro{display:none}
}
@media(max-width:380px){
  .productos-grid{grid-template-columns:1fr}
}

/* Submenu de Licores en el sidebar */
.menu-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.menu-submenu.open {
    max-height: 500px;
}
.menu-subitem {
    padding-left: 32px;
    font-size: 0.9em;
}
.menu-group-toggle {
    cursor: pointer;
    justify-content: space-between;
}
.menu-group-arrow {
    margin-left: auto;
    font-size: 0.8em;
    transition: transform 0.2s ease;
}
.menu-group-arrow.rotated {
    transform: rotate(180deg);
}