/* ===== FUENTES ===== */





.nav-center{
  display:flex;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}

.nav-right{
  position:absolute;
  right:20px;
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-banner{
  background:#ffffff42;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 16px;
  gap:12px;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
  border-bottom:1px solid #eee;
  font-family:'Delius';

}

.nav-link{
  color:#181616;
  text-decoration:none;
  padding:6px 8px;
  border-radius:8px;
  white-space:nowrap;
  transition:background-color .3s ease;
  font-size:17px;
}

.nav-link:hover{
  background-color:#e49292;
}

.cart-btn{
  background:#fff;
  border:1px solid #ddd;
  color:#ebc10a;
  padding:6px 10px;
  border-radius:10px;
  font-size:18px;
  cursor:pointer;
  transition:background .3s ease;
}

.cart-btn:hover{
  background:#555;
}

.busqueda{
  position:relative;
  display:inline-block;
}

.busqueda input{
  width:0;
  opacity:0;
  padding:8px;
  border-radius:8px;
  transition:all .3s ease;
  position:absolute;
  right:25px;
  background-color:#ffffff;
  font-family:'Delius';
  font-size:15px;
}

.busqueda.activa input{
  width:180px;
  opacity:1;
}

#icono-busqueda{
  cursor:pointer;
  font-size:20px;
  color:#97979c;
  transition:color .3s;
  margin-top:10px;
}

#cart-toggle{
  position:relative;
}

.cart-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ff4757;
  color:#fff;
  font-size:12px;
  line-height:18px;
  text-align:center;
  display:none;
}

.user-pill{
  visibility:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  min-height:34px;
  background:#f3b1c5;
  transition:background-color .3s ease,color .3s ease;
}

.user-pill:hover{
  background:#ecd0d9;
  color:#fff;
}

.user-pill a{
  color:#fff;
  text-decoration:none;
  filter:drop-shadow(3px 3px 5px rgba(0,0,0,0.5));
}

.pill{
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:999px;
  text-decoration:none;
}

@media (max-width:768px){

  .nav-banner{
    flex-wrap:wrap;
    gap:10px;
    font-size:18px;
  }

  .nav-center{
    flex-wrap:wrap;
    justify-content:center;
  }

  .nav-right{
    position:static;
    width:100%;
    justify-content:center;
    margin-top:8px;
  }

  #input-busqueda{
    width:100%;
  }
}

@media (max-width:600px){
  .perfil-username input{
    width:100%;
  }
}

@media (max-width:480px){

  .nav-banner{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }

  .nav-link{
    padding:6px 12px;
    font-size:16px;
  }
}
.staff-mini-nav{

display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;

gap:10px;

padding:8px 12px;

background:#f3b1c556;

border-bottom:1px solid #eee;

font-size:12px;
font-weight:600;

position:relative;
z-index:50;

}

.staff-mini-nav a{

display:inline-flex;

align-items:center;
justify-content:center;

padding:5px 12px;

border-radius:999px;

text-decoration:none;

color:#444;

cursor:pointer;

transition:0.2s;

position:relative;


}

.staff-mini-nav a:hover{

background:#f3b1c5;

color:#000;

}

/* ===== nav / categorias ===== */

.dark .categorias-barra,
.dark .panel-categorias,
.dark .nav-banner{

  background:rgba(25,20,20,0.95);

  border-color:rgba(255,255,255,0.06);
}



.dark .nav-banner{

  background:
    linear-gradient(
      to right,
      rgba(26,20,20,0.88),
      rgba(36,26,26,0.88)
    );

  backdrop-filter: blur(14px);

  border-bottom:
    1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 8px 25px rgba(0,0,0,0.35);
}

/* ===== links ===== */

.dark .nav-link{

  color:#f8e9e9;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease;
}

.dark .nav-link:hover{

  background:
    rgba(255,182,217,0.14);

  color:#ffcae2;

  transform:translateY(-1px);
}

/* ===== búsqueda ===== */

.dark .busqueda input{

  background:
    rgba(40,30,30,0.92);

  border:
    1px solid rgba(255,255,255,0.08);

  color:white;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.25);
}

.dark .busqueda input::placeholder{
  color:#d6bcbc;
}

/* ===== icono búsqueda ===== */

.dark #icono-busqueda{
  color:#f3d4e1;
}

.dark #icono-busqueda:hover{
  color:#ffb8d8;
}

/* ===== carrito ===== */

.dark .cart-btn{

  background:
    rgba(45,35,35,0.92);

  border:
    1px solid rgba(255,255,255,0.06);

  color:#ffd36f;

  box-shadow:
    0 4px 14px rgba(0,0,0,0.25);
}

.dark .cart-btn:hover{

  background:
    rgba(70,50,50,0.95);
}

/* ===== user pill ===== */

.dark .user-pill{

  background:
    linear-gradient(
      135deg,
      #7c5a67,
      #9b6f7e
    );

  color:white;

  box-shadow:
    0 6px 16px rgba(0,0,0,0.22);
}

.dark .user-pill:hover{

  background:
    linear-gradient(
      135deg,
      #9a7180,
      #b98999
    );
}

.dark .user-pill a{
  color:white;
}

/* ===== badge carrito ===== */

.dark .cart-badge{

  background:#ff5f87;

  color:white;

  box-shadow:
    0 0 14px rgba(255,95,135,0.45);
}

/* ===== mini nav staff ===== */

.dark .staff-mini-nav{

  background:
    rgba(30,22,22,0.85);

  border-bottom:
    1px solid rgba(255,255,255,0.05);
}

.dark .staff-mini-nav a{

  color:#f3dede;
}

.dark .staff-mini-nav a:hover{

  background:
    rgba(255,182,217,0.12);

  color:#ffcae2;
}