body{
font-family:Arial;
background:#f3f4f6;
margin:0;
padding:20px;
}

header{
margin-bottom:30px;
}

.controles{
display:flex;
gap:10px;
margin-top:10px;
}

input,select{
padding:10px;
border-radius:6px;
border:1px solid #ccc;
}

#catalogo{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

gap:20px;

}

.card{

background:white;

padding:15px;

border-radius:10px;

box-shadow:0 4px 10px rgba(0,0,0,0.08);

text-align:center;

}

.card img{

width:100%;

height:150px;

object-fit:contain;

}

.marca{
color:#888;
}

.precio{

font-weight:bold;

margin-top:5px;

}

.estado{

padding:4px 8px;

border-radius:6px;

color:white;

font-size:12px;

}

.verde{background:#16a34a}
.naranja{background:#f59e0b}
.rojo{background:#dc2626}