:root{
--rojo:#c31618;--gris:#8a8a8a;--gris-claro:#f2f2f2;--negro:#111;--blanco:#ffffff;
}

body {
margin:0;
font-family:'Segoe UI',system-ui,sans-serif;
background:var(--gris-claro);
color:var(--negro);
}

/* BARRA */
.topbar{
background:linear-gradient(90deg,#000,#1a1a1a);
display:flex;
align-items:center;
padding:12px 22px;
}
.topbar img{height:52px;}

/* TITULO */
header{text-align:center;padding:28px 20px 10px;}
header h1{margin:0;font-size:2.3rem;font-weight:700;color:var(--rojo);}
header p{margin-top:6px;color:#555;}

/* BUSCADOR */
.search-box{max-width:520px;margin:20px auto 10px;padding:0 15px;}
.search-box input{width:100%;padding:14px;border-radius:12px;border:1px solid #ccc;font-size:1.05rem;}

/* CONTROLES */
.controls{
max-width:900px;
margin:10px auto 0;
padding:0 15px;
display:flex;
flex-direction:column;
gap:12px;
align-items:center;
}


.filters{
max-width:900px;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
gap:10px;
justify-content:center;
}


.filters button{
border:none;
padding:10px 14px;
border-radius:14px;
background:white;
box-shadow:0 3px 8px rgba(0,0,0,.12);
cursor:pointer;
font-weight:600;
transition:.2s;
}




.filters button:hover{
transform:translateY(-2px);
}

.filters button.active{
background:var(--rojo);
color:white;
}

/*
.sort{
align-self:flex-start;
}
*/

.sort {
  display: none;
}

.filters button.active{background:var(--rojo);color:white;}


/*
.sort select{
padding:8px 12px;
border-radius:10px;
border:1px solid #ccc;
}

*/

/* CONTENEDOR */
.container{max-width:900px;margin:auto;padding:10px 15px 40px;}

.card{
background:white;
border-left:8px solid var(--rojo);
border-radius:14px;
padding:16px 18px;
margin-bottom:12px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 8px 16px rgba(0,0,0,.08);
}

.info{display:flex;flex-direction:column;gap:3px;}
.name{font-size:1.05rem;font-weight:600;}
.area{font-size:.85rem;color:#666;}
.ext{font-size:1.6rem;font-weight:800;color:var(--rojo);}

.card.no-name .area{font-size:1.05rem;font-weight:600;color:var(--negro);}
.card.no-name .name{display:none;}

#noResults{display:none;text-align:center;padding:30px;color:#666;}

/* MOVIL */

@media(max-width:600px){

.controls{
    flex-direction:column;
}

.card{
    flex-direction:column;
    text-align:center;
    border-left:none;
    border-top:6px solid var(--rojo);
}

.ext{
    font-size:2rem;
}

/* 👉 AÑADE ESTO */
.filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    padding:0 10px;
}

.filters button{
    font-size:0.85rem;
    padding:7px 12px;
    white-space:nowrap;
}

}