body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f4f4;
color: #333;
transition: background 0.3s, color 0.3s;

}

header {
background-color: #cfabe7;
color: white;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-links button {
margin-left: 1rem;
border: none;
color: rgb(255, 255, 255);
font-weight: bold;
cursor: pointer;
}

main {
padding: 1rem;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}

.product-card {
background: white;
border: 1px solid #ccc;
padding: 1rem;
border-radius: 10px;
}

.actions {
margin-top: 1rem;
}

input, button {
padding: 0.5rem;
margin: 0.25rem 0;
width: 100%;
box-sizing: border-box;
}

button {
    padding: 0.5rem;
    margin: 0.25rem 0;
    width: 100%;
    box-sizing: border-box;
    background-color: rgb(194, 104, 194);
}

.dark {
background: #1c1c1c;
color: #eee;
}

.dark .product-card {
background: #333;
border-color: #555;
}

.dark header {
background-color: #cfabe7;
}

button:hover {
opacity: 0.85;
}


/* Estilo que se iba a usar para poner el nav-bar de forma lateral

/* header 
Sidebar vertical #sidebar { 
width: 220px; 
background-color: #e5f5e0; 
padding: 20px; 
display: flex; 
flex-direction: column; 
align-items: flex-start; 
gap: 15px; 
box-shadow: 2px 0 5px rgba(0,0,0,0.1); 
font-family: 'Segoe UI', sans-serif; 
} */