/* ==========================================================================
   Inmobiliaria Berasueta — Theme "Azul Fresco"
   Página nueva de favoritos (contacto/favoritos.php). Replica tal cual
   el mockup aprobado rediseño/mockups/favoritos-layout-C.html -mismas
   clases, mismos valores de color/spacing/tipografía. Colores hardcodeados
   (no variables --*) a propósito: el mockup define su propio :root con
   algunos valores que difieren de los de theme.css (ej. --gray-100 acá
   es un beige #F1EFE8, en theme.css es un gris azulado #F1F3F7) -pisar
   esas variables globalmente en :root afectaría también al header/footer
   reales que comparte esta página, así que se copian los hex directo en
   cada regla en vez de reabrir :root.
   Todo esto es exclusivo de esta página, no pensado para reusarse.
   ========================================================================== */

/* escritorio = 80% del ancho de pantalla (pedido explícito, sin tope de
   max-width); mobile vuelve a un layout de ancho completo con padding, ver
   @media(max-width:640px) más abajo -80% de una pantalla de celular sería
   demasiado angosto. */
.favoritos-wrap{ width:80%; margin:0 auto; padding:32px 24px 120px; }

.page-title{ font-family:'Sora', sans-serif; font-weight:600; font-size:24px; color:#1F2A5C; margin-bottom:4px; }
.page-subtitle{ font-size:13px; color:#65707A; margin-bottom:24px; }

/* ---- controles globales (seleccionar todos / vaciar) ---- */
.controles-globales{ display:flex; align-items:center; justify-content:space-between; padding:12px 0;
  border-bottom:0.5px solid #E7E5DE; margin-bottom:8px; flex-wrap:wrap; gap:10px; }
.select-todos{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#1F2A5C; cursor:pointer; user-select:none; }
.select-todos input{ width:16px; height:16px; accent-color:#2F8FCC; cursor:pointer; }
.vaciar-link{ font-size:13px; color:#65707A; text-decoration:underline; cursor:pointer; background:none; border:none; font-family:'Inter', sans-serif; }
.vaciar-link:hover{ color:#1F2A5C; }

/* ---- mini-encabezado por sección ---- */
.seccion-header{ font-family:'Sora', sans-serif; font-weight:600; font-size:12px; letter-spacing:0.02em;
  color:#0C447C; background:#F7FAFD; padding:8px 14px; border-radius:8px; margin:20px 0 10px; }

/* ---- fila de propiedad ---- */
.fila-propiedad{ display:flex; align-items:center; gap:14px; padding:12px 6px; border-bottom:0.5px solid #E7E5DE; }
.fila-propiedad input[type=checkbox]{ width:17px; height:17px; accent-color:#2F8FCC; flex-shrink:0; cursor:pointer; }
.fila-link{ display:flex; align-items:center; gap:14px; flex:1; min-width:0; text-decoration:none; color:inherit; }
/* foto + letras: tamaño base = escritorio, 30% más grande que el mockup
   original (64px->84px foto, 14px->18px título, 12px->16px sub/precio,
   pedido explícito) -mobile los vuelve a bajar en el media query de abajo. */
.foto-thumb{ width:84px; height:84px; border-radius:10px; flex-shrink:0; object-fit:cover; background:#F1EFE8; display:block; }
.info-propiedad{ flex:1; min-width:0; }
.info-titulo{ font-family:'Sora', sans-serif; font-weight:600; font-size:18px; color:#1F2A5C;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.info-sub{ font-size:16px; color:#65707A; margin-top:2px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.info-sub .sep{ color:#A7B8E8; }
.info-precio{ font-family:'Sora', sans-serif; font-weight:700; color:#1F2A5C; }
.btn-eliminar{ width:32px; height:32px; border-radius:50%; border:none; background:none; display:flex; align-items:center; justify-content:center;
  color:#B4B2A9; flex-shrink:0; cursor:pointer; transition:background .15s ease, color .15s ease; }
.btn-eliminar:hover{ background:#F1EFE8; color:#1F2A5C; }

/* ---- adicionales (comodidades): solo escritorio, ver
   @media(max-width:640px) más abajo -pedido explícito, no en mobile. ---- */
.info-adicionales{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.adic-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; color:#65707A;
  background:#F7FAFD; padding:3px 9px; border-radius:100px; white-space:nowrap; }
.adic-chip svg{ flex-shrink:0; width:11px; height:11px; }

/* ---- estado vacío ---- */
.estado-vacio{ text-align:center; padding:60px 20px; }
.estado-vacio-icono{ margin-bottom:14px; opacity:.4; display:flex; justify-content:center; }
.estado-vacio-titulo{ font-family:'Sora', sans-serif; font-weight:600; font-size:17px; color:#1F2A5C; margin-bottom:6px; }
.estado-vacio-txt{ font-size:13px; color:#65707A; margin-bottom:18px; max-width:420px; margin-left:auto; margin-right:auto; }
.estado-vacio-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.estado-vacio-links a{ font-size:12px; font-weight:600; color:#0C447C; background:#E6F1FB; padding:7px 14px; border-radius:100px; text-decoration:none; }
.estado-vacio-links a:hover{ background:#D8E9F8; }

/* ---- barra flotante ---- */
.barra-flotante{ position:fixed; bottom:20px; right:20px; z-index:50;
  background:linear-gradient(135deg, rgba(120,133,163,0.9) 0%, rgba(31,42,92,0.92) 100%);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:0.5px solid rgba(255,255,255,0.3); border-radius:100px;
  padding:10px 10px 10px 20px; display:flex; align-items:center; gap:14px;
  box-shadow:0 6px 20px rgba(31,42,92,0.25); }
.barra-flotante[hidden]{ display:none; }
.barra-flotante .conteo{ color:#fff; font-family:'Sora', sans-serif; font-size:13px; font-weight:500; white-space:nowrap; }
.barra-flotante .btn-consultar{ display:flex; align-items:center; gap:6px; background:#fff; color:#1F2A5C;
  font-family:'Sora', sans-serif; font-weight:700; font-size:13px; padding:9px 18px; border-radius:100px;
  white-space:nowrap; border:none; cursor:pointer; transition:transform .2s ease; }
.barra-flotante .btn-consultar:hover{ transform:scale(1.05); }

@media(max-width:640px){
  .favoritos-wrap{ width:auto; padding:20px 16px 110px; }
  .foto-thumb{ width:52px; height:52px; }
  .info-titulo{ font-size:13px; }
  .info-sub{ font-size:12px; }
  .info-adicionales{ display:none; }
  .barra-flotante{ left:14px; right:14px; bottom:14px; justify-content:space-between; }
}