/* ==========================================================================
   CAV Anuncios Destacados - cav-destacados.css
   Estilo basado en el layout del listado (con botón tipo "Ver anuncio")
   ========================================================================== */

/* GRID */
.cav-dest-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
  margin:14px 0 !important;
}

@media (max-width:1100px){
  .cav-dest-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width:820px){
  .cav-dest-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }
}

@media (max-width:520px){
  .cav-dest-grid{
    grid-template-columns:repeat(1, minmax(0, 1fr)) !important;
    gap:12px !important;
  }
}

/* CARD */
.cav-dest-card{
  background:#fff !important;
  border:1px solid #e7e7e7 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04) !important;
  text-decoration:none !important; /* por si la card es <a> */
  color:inherit !important;
}

.cav-dest-card:hover{
  border-color:#d9d9d9 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
  transform:translateY(-1px);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}

/* IMAGEN */
a.cav-dest-img{
  display:block !important;
  text-decoration:none !important;
  line-height:0 !important;
  background:#f6f6f6 !important;
}

a.cav-dest-img img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:190px !important;
  object-fit:cover !important;
  border:0 !important;
  margin:0 !important;
}

/* BODY */
.cav-dest-body{
  padding:12px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  min-width:0 !important;
}

/* TITULO */
.cav-dest-title{
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  margin:0 !important;
  padding:0 !important;
}

.cav-dest-title a{
  color:#222 !important;
  text-decoration:none !important;
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* PRECIO */
.cav-dest-price{
  font-size:18px !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
}

.cav-dest-price strong{ font-weight:800 !important; }

.cav-dest-moneda{
  font-size:13px !important;
  opacity:.75 !important;
  margin-left:6px !important;
}

/* UBICACION */
.cav-dest-loc{
  font-size:13px !important;
  opacity:.9 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.cav-dest-loc span{
  font-weight:700 !important;
  opacity:.9 !important;
}

/* ✅ BOTON "VER ANUNCIO" */
.cav-dest-actions{
  margin-top:6px !important;
}

.cav-dest-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 12px !important;
  border-radius:8px !important;
  background:#1e73be !important; /* azul del sitio */
  color:#fff !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;
  text-decoration:none !important;
  user-select:none !important;
}

/* Hover del botón cuando pasas por la tarjeta */
.cav-dest-card:hover .cav-dest-btn{
  filter:brightness(.95);
}

/* MÓVIL: título en 2 líneas */
@media (max-width:768px){
  .cav-dest-title a{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    white-space:normal !important;
  }

  a.cav-dest-img img{
    height:auto !important;
  }
}
/* ✅ BOTÓN "VER ANUNCIO" (CLASES REALES DEL HTML) */
.cav-la-card-actions.cav-destacados-card-actions{
  margin-top:10px !important;
  padding-top:10px !important;
  border-top:1px solid #eee !important; /* separador suave */
}

/* el botón es un <span>, lo convertimos en botón bonito */
.cav-la-btn.cav-destacados-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 12px !important;
  border-radius:8px !important;
  background:#1e73be !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;
  text-decoration:none !important;
  user-select:none !important;
  cursor:pointer !important;
}

/* Hover al pasar por la tarjeta */
.cav-la-card:hover .cav-la-btn.cav-destacados-btn{
  filter:brightness(.95);
}

/* Opcional: al tocar/click (sensación táctil) */
.cav-la-btn.cav-destacados-btn:active{
  transform:scale(.98);
}
/* ===== BOTÓN "VER ANUNCIO" (igual al de abajo, full width) ===== */

/* Asegura que el body de la card empuje el botón hacia abajo */
.cav-destacados-card-body{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

/* Zona de acciones como franja al final */
.cav-destacados-card-actions{
  margin-top:auto !important;
  padding:12px !important;
  border-top:1px solid #eee !important;
}

/* Botón ancho completo, centrado, más “pro” */
.cav-la-btn.cav-destacados-btn{
  display:flex !important;
  width:100% !important;
  justify-content:center !important;
  align-items:center !important;

  padding:12px 14px !important;
  border-radius:8px !important;

  background:#1e73be !important;
  color:#fff !important;

  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;

  text-decoration:none !important;
  cursor:pointer !important;
}

/* Hover */
.cav-la-card:hover .cav-la-btn.cav-destacados-btn{
  filter:brightness(.95) !important;
}
/* ===== FIX MÓVIL: botón que ocupe TODO el ancho ===== */
@media (max-width:768px){

  /* La tarjeta y el body no deben “encoger” el contenido */
  .cav-la-card,
  .cav-destacados-card,
  .cav-la-card-body,
  .cav-destacados-card-body{
    min-width:0 !important;
    width:100% !important;
  }

  /* La franja de acciones a ancho completo */
  .cav-destacados-card-actions,
  .cav-la-card-actions{
    width:100% !important;
    display:block !important;
    padding:12px !important;
    box-sizing:border-box !important;
  }

  /* Botón: bloque completo (sin “encoger”) */
  .cav-la-btn.cav-destacados-btn,
  .cav-destacados-btn{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
}
/* =========================================================
   FIX FINAL: Botón "Ver anuncio" estilo listado (full width)
   SOLO para destacados (no afecta otros listados)
   ========================================================= */

/* 1) Asegura estructura columna y que el botón quede abajo */
.cav-destacados-wrapper .cav-destacados-card-body{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-width:0 !important;
}

/* 2) Franja de acciones como “footer” de la card */
.cav-destacados-wrapper .cav-destacados-card-actions{
  margin-top:auto !important;
  padding:12px !important;
  border-top:1px solid #eee !important;
  width:100% !important;
  box-sizing:border-box !important;
  display:block !important;
}

/* 3) Botón full width real (ganándole al tema/listado) */
.cav-destacados-wrapper .cav-destacados-card-actions .cav-la-btn.cav-destacados-btn{
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;

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

  padding:12px 14px !important;
  border-radius:8px !important;

  background:#1e73be !important;
  color:#fff !important;

  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;

  text-decoration:none !important;
  cursor:pointer !important;
}

/* Hover/active */
.cav-destacados-wrapper .cav-destacados-card:hover .cav-la-btn.cav-destacados-btn{
  filter:brightness(.95) !important;
}
.cav-destacados-wrapper .cav-destacados-card-actions .cav-la-btn.cav-destacados-btn:active{
  transform:scale(.99) !important;
}

/* 4) Móvil: asegura que nada “encoj(a)” el ancho */
@media (max-width:768px){
  .cav-destacados-wrapper .cav-destacados-card,
  .cav-destacados-wrapper .cav-destacados-card-body{
    width:100% !important;
    min-width:0 !important;
  }

  .cav-destacados-wrapper .cav-destacados-card-actions{
    width:100% !important;
  }
}
/* ===============================
   FIX REAL: usar TODO el ancho en móvil
   =============================== */
@media (max-width:768px){

  /* Rompemos el contenedor del theme */
  .cav-destacados-wrapper{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:8px !important;
    padding-right:8px !important;
    box-sizing:border-box !important;
  }

  /* Grid bien ancho */
  .cav-destacados-grid{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  /* Las cards ocupan TODO su espacio */
  .cav-destacados-card{
    width:100% !important;
    margin:0 !important;
  }
}