/* RESET */
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:Arial,sans-serif;
  background:#f5f7fa;
  color:#222;
}

/* CONTENEDOR */
.container-main{
  max-width:1500px;
  margin:auto;
  padding:20px;
}

/* HEADER */
.header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* 🔥 FILTRO + BUSCADOR (MISMA LINEA REAL) */
.top-bar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}

/* BOTON FILTRO */
.btn-filtro{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  color:#fff;
  border:none;
  height:48px;
  padding:0 14px;
  border-radius:10px;
  cursor:pointer;
}

/* 🔍 BUSCADOR ORIGINAL (PRO COMO TENIAS) */
.buscador-pro{
  flex:1;
}

.buscador-pro form{
  display:flex;
  align-items:center;
  height:48px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
  overflow:hidden;
}

.buscador-pro form:focus-within{
  box-shadow:0 8px 20px rgba(22,163,74,0.25);
}

/* INPUT */
.buscador-pro input{
  flex:1;
  padding:0 18px;
  border:none;
  font-size:14px;
  outline:none;
}



/* 🔥 BOTON ORIGINAL PRO */
.buscador-pro button{
  width:50px;
  height:100%;
  background:#16a34a;
  border:none;
  cursor:pointer;
  position:relative;

  transition:background .2s;
}

/* 🔍 CIRCULO */
.buscador-pro button::before{
  content:"";
  position:absolute;

  width:13px;
  height:13px;

  border:3px solid #fff;
  border-radius:50%;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);
}

/* 🔍 MANGO MÁS PRO */
.buscador-pro button::after{
  content:"";
  position:absolute;

  width:10px;     /* 🔥 más largo */
  height:3px;     /* 🔥 más grueso */

  background:#fff;
  border-radius:2px;

  top:65%;
  left:50%;

  transform:rotate(45deg);
}
/* LAYOUT */
.layout{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:25px;
}

/* SIDEBAR */
.sidebar{
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  position:sticky;
  top:20px;
}

/* INPUTS */
.sidebar select,
.sidebar input{
  width:100%;
  padding:12px;
  margin-bottom:12px;
  border:1px solid #ddd;
  border-radius:10px;
}

/* BOTON SIDEBAR */
.sidebar button{
  width:100%;
  background:#16a34a;
  color:#fff;
  border:none;
  padding:12px;
  border-radius:10px;
  font-weight:bold;
}

/* MANZANAS (IGUAL ESTILO ORIGINAL) */
.manzanas{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:10px 0;
}

.manzanas label{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:8px;
  background:#f1f5f9;
  border-radius:8px;
  border:1px solid #ddd;
  cursor:pointer;
  font-size:13px;
}

.manzanas input{display:none}

.manzanas label:hover,
.manzanas label:has(input:checked){
  background:#16a34a;
  color:#fff;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

/* CARD */
.card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
}

.card:hover{transform:translateY(-5px)}

.img img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.info{padding:14px}

.precio{
  font-size:17px;
  font-weight:bold;
  color:#16a34a;
}

/* BOTON */
.btn-ver{
  display:block;
  text-align:center;
  background:#111;
  color:#fff;
  padding:8px;
  border-radius:6px;
}

/* PAGINACION */
.pagination{
  margin:40px 0;
  text-align:center;
}

.pagination a{
  padding:8px 12px;
  margin:4px;
  background:#eee;
  border-radius:6px;
}

.pagination a.active{
  background:#111;
  color:#fff;
}

/* 📱 TABLET */
@media(max-width:1024px){

  .layout{grid-template-columns:1fr}

  .grid{grid-template-columns:repeat(3,1fr)}

  .sidebar{
    position:fixed;
    left:-100%;
    top:0;
    width:280px;
    height:100%;
    z-index:9999;
    transition:.3s;
  }

  .sidebar.active{left:0}
}

/* 📱 MOBILE */
@media(max-width:600px){

  .container-main{padding:10px}

  .top-bar{gap:8px}

  .btn-filtro{
    height:40px;
    font-size:12px;
  }

  .buscador-pro form{
    height:40px;
  }

  .grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .img img{height:130px}

  .precio{font-size:14px}

  .manzanas{
    grid-template-columns:repeat(3,1fr);
  }

  /* limitar a 10 */
  .grid .card:nth-child(n+11){
    display:none;
  }
}
/* 🔥 FIX FINAL REAL */

/* contenido derecho */
.content{
  display:flex;
  flex-direction:column;
}

/* buscador alineado PERFECTO con cards */
.buscador-pro{
  width:100%;
  margin-bottom:15px;
}

/* asegura misma linea visual */
.layout{
  align-items:start;
}

/* ajuste fino */
.content > .buscador-pro{
  margin-top:0;
}

/* 🔥 BOTON CERRAR SOLO CELULAR */
.sidebar-header button{
  display:none;
}

@media(max-width:600px){
  .sidebar-header button{
    display:flex;
  }
}


/* 🔥 ETIQUETAS (MANZANAS PRO ESTILO IMAGEN) */
.manzanas{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.manzanas label{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e5e7eb;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  transition:.25s;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* efecto hover */
.manzanas label:hover{
  background:#16a34a;
  color:#fff;
  transform:translateY(-2px);
}

/* activo */
.manzanas label:has(input:checked){
  background:#16a34a;
  color:#fff;
  box-shadow:0 4px 12px rgba(22,163,74,0.3);
}

.manzanas input{display:none}


/* 🔥 TEXTO MÁS PRO */
.info h3{
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
}

.ubicacion{
  font-size:13px;
  color:#64748b;
}

.precio{
  font-size:18px;
  font-weight:700;
  color:#16a34a;
}


/* 🔥 BOTON VER PRO */
.btn-ver{
  margin-top:8px;
  font-size:13px;
  padding:9px;
  border-radius:8px;
  transition:.2s;
}

.btn-ver:hover{
  background:#16a34a;
}

/* 🔥 quitar subrayado */
.btn-ver,
.pagination a{
  text-decoration:none !important;
}

/* hover limpio */
.btn-ver:hover,
.pagination a:hover{
  text-decoration:none;
}

/* 🔥 ETIQUETA ESTADO ARRIBA DERECHA */
.estado{
  position:absolute;
  top:10px;
  right:10px; /* 🔥 CAMBIO AQUÍ */

  background:#16a34a;
  color:#fff;

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

  padding:5px 10px;
  border-radius:6px;

  z-index:2;

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

/* 🔥 si es vendido (ya lo manejas en PHP) */
.estado[style*="dc2626"]{
  background:#dc2626;
}

/* 🔥 CONTENEDOR ICONOS DERECHA */
.header-actions{
  display:flex;
  align-items:center;
  gap:6px;
}


/* 🔥 HEADER DERECHA EN UNA SOLA FILA */
.header-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

/* 🔥 AGRUPAR TODO EN UNA FILA */
.header-actions > *{
  display:flex;
  align-items:center;
}

/* 🔥 BOTON FILTRO */
.btn-filtro{
  display:none;
  width:36px;
  height:36px;
  border-radius:8px;
  background:#111;
  color:#fff;
  align-items:center;
  justify-content:center;
  font-size:0;
}

/* icono */
.btn-filtro::before{
  content:"⚙️";
  font-size:16px;
}

/* 🔥 GRID / LISTA */
.vista-toggle{
  display:flex;
  gap:4px;
}

.vista-toggle a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  background:#eee;
  text-decoration:none;
  font-size:16px;
}

.vista-toggle a.active{
  background:#111;
  color:#fff;
}

/* 📱 CELULAR */
@media(max-width:600px){

  /* 🔥 TODO EN UNA FILA */
  .header-actions{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
  }

  /* 🔥 MOSTRAR FILTRO */
  .btn-filtro{
    display:flex;
  }

}

/* 🔥 BOTON FILTRO OCULTO EN PC */
.btn-filtro{
  display:none;
}

/* 📱 SOLO CELULAR */
@media(max-width:600px){

  /* 🔥 mostrar filtro */
  .btn-filtro{
    display:flex;
    width:36px;
    height:36px;
    border-radius:8px;
    background:#111;
    color:#fff;
    align-items:center;
    justify-content:center;
    font-size:0; /* oculta texto */
  }

  /* icono ⚙ */
  .btn-filtro::before{
    content:"⚙️";
    font-size:16px;
  }

}



/* 📱 SOLO CELULAR */
@media(max-width:600px){

  .sidebar-header{
    position:relative;
  }

  .sidebar-header button{
    position:absolute;
    top:0;
    right:0;

    width:34px;
    height:34px;

    border:none;
    background:rgba(0,0,0,0.05);
    border-radius:50%;

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

    cursor:pointer;
    transition:.25s;
  }

  /* ❌ ICONO FINO */
  .sidebar-header button::before,
  .sidebar-header button::after{
    content:"";
    position:absolute;
    width:16px;
    height:2px;
    background:#111;
    border-radius:2px;
  }

  .sidebar-header button::before{
    transform:rotate(45deg);
  }

  .sidebar-header button::after{
    transform:rotate(-45deg);
  }

  /* 🔥 HOVER PRO */
  .sidebar-header button:hover{
    background:#111;
  }

  .sidebar-header button:hover::before,
  .sidebar-header button:hover::after{
    background:#fff;
  }

  /* CLICK */
  .sidebar-header button:active{
    transform:scale(.9);
  }

}

/* 🔥 ESPACIADO GENERAL SIDEBAR */
.sidebar form{
  display:flex;
  flex-direction:column;
  gap:14px; /* espacio entre todos los elementos */
}

/* 🔥 SEPARAR SELECT (PROYECTO) */
.sidebar select{
  margin-bottom:0; /* quitamos margen viejo */
}

/* 🔥 BLOQUE MANZANAS MÁS RESPIRADO */
.manzanas{
  margin:10px 0 5px;
}

/* 🔥 INPUTS MÁS LIMPIOS */
.sidebar input{
  margin-bottom:0;
}

/* 🔥 BOTON FILTRAR SEPARADO */
.sidebar button{
  margin-top:10px;
}

/* 🔥 OPCIONAL (más elegante) */
.sidebar{
  line-height:1.4;
}

/* 🔥 TITULO GENERAL */
.header-top h1{
  font-size:22px; /* antes 22 */
  font-weight:600;
}

/* 📱 CELULAR */
@media(max-width:600px){
  .header-top h1{
    font-size:18px;
  }
}

/* 📱 SOLO CELULAR */
@media(max-width:600px){

  /* 🔥 HEADER CON ESPACIO REAL */
  .sidebar-header{
    position:sticky;
    top:0;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:10px 5px 15px; /* 🔥 espacio abajo */
    margin-bottom:10px;    /* 🔥 separa del contenido */

    border-bottom:1px solid #f1f5f9;
    z-index:10;
  }

  /* 🔥 BOTON CERRAR */
  .sidebar-header button{
    position:absolute;
    top:8px;
    right:8px;
  }

}

/* 📱 SOLO CELULAR */
@media(max-width:600px){

  /* 🔥 HEADER DEL SIDEBAR */
  .sidebar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:10px 5px;
    margin-bottom:10px;

    border-bottom:1px solid #f1f5f9;
  }

  /* 🔥 TITULO */
  .sidebar-header h3{
    font-size:16px;
    font-weight:600;
    margin:0;
  }

  /* 🔥 BOTON CERRAR */
  .sidebar-header button{
    position:static; /* 🔥 importante */
    
    width:32px;
    height:32px;

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

    background:transparent;
    border:none;
    cursor:pointer;
  }

  /* ❌ ICONO LIMPIO */
  .sidebar-header button::before,
  .sidebar-header button::after{
    content:"";
    position:absolute;
    width:16px;
    height:2px;
    background:#111;
  }

  .sidebar-header button::before{
    transform:rotate(45deg);
  }

  .sidebar-header button::after{
    transform:rotate(-45deg);
  }

}



/* 🔥 CODIGO PLomo CLARO PRO */
.codigo{
  display:inline-flex;
  align-items:center;
  gap:4px;

  background:#e2e8f0; /* plomo claro */
  color:#334155;

  font-size:12.5px;
  font-weight:600;
  letter-spacing:.4px;

  padding:4px 10px;
  border-radius:999px;

  margin-bottom:6px;

  border:1px solid #cbd5e1; /* 🔥 detalle pro */
}

/* 🔥 CONTENEDOR IMAGEN */
.img{
  position:relative;
}



/* 🔥 MENSAJE SIN RESULTADOS */
.no-resultados{
  grid-column:1/-1;
  text-align:center;
  padding:40px 20px;
  color:#64748b;
  font-size:15px;
}

/* 🔥 MANZANAS GRID 4 COLUMNAS PRO */
.filtro-manzanas{
  display:grid;
  grid-template-columns:repeat(4, 1fr); /* 🔥 4 columnas */
  gap:8px;
  margin:10px 0;
}

/* ITEM */
.filtro-manzanas label{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:10px;
  border-radius:10px;

  background:#f1f5f9;
  border:1px solid #e5e7eb;

  cursor:pointer;
  font-size:13px;
  font-weight:500;

  transition:.2s;
  text-align:center;
}

/* HOVER */
.filtro-manzanas label:hover{
  background:#16a34a;
  color:#fff;
  transform:translateY(-2px);
}

/* CHECK OCULTO */
.filtro-manzanas input{
  display:none;
}

/* ACTIVO (MULTI SELECCION) */
.filtro-manzanas label:has(input:checked){
  background:#16a34a;
  color:#fff;
  box-shadow:0 4px 10px rgba(22,163,74,0.3);
}/* 📱 TABLET */
@media(max-width:900px){
  .filtro-manzanas{
    grid-template-columns:repeat(3,1fr);
  }
}

/* 📱 CELULAR */
@media(max-width:600px){
  .filtro-manzanas{
    grid-template-columns:repeat(3,1fr);
  }
}