/* ============================================================
   PFS Realty — Favoritos: botón flotante, modal de registro/login y
   dashboard (/favoritos/). Hoja de estilos propia y aislada (en vez de
   sumar reglas a styles.css) para que toda la funcionalidad de favoritos
   viva localizable en una sola carpeta, como se pidió.
   Usa los mismos tokens de marca definidos en :root de styles.css
   (--midnight, --sand, --ivory, --white, --font, --radius, --shadow-card).
   ============================================================ */

/* ---- Marca "estás aquí" en el ícono del sidebar dentro de /favoritos/ ----
   .pfsrail__item no tiene estado activo en styles.css (el resto de items
   son secciones sin "página propia" que resaltar); se agrega aquí en vez de
   tocar el CSS compartido, ya que solo aplica en esta página. */
.pfsrail__item.is-active { color: #fff; }

/* ---- Botón flotante ---- */
.fav-float {
  position: fixed;
  right: 86px; /* a la izquierda del .wa-float (58px + 10px de aire + 18px) */
  bottom: 18px;
  z-index: 100000000;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--midnight);
  box-shadow: 0 8px 24px rgba(7, 32, 49, 0.28);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.fav-float[hidden] { display: none; }
.fav-float:not([hidden]) { display: flex; }
.fav-float svg { width: 26px; height: 26px; }
.fav-float:hover { transform: scale(1.08); }
.fav-float.is-saved { background: var(--midnight); color: var(--white); }
.fav-float.is-saved svg { fill: currentColor; }
body.pfsnav-open .fav-float,
body.nav-open .fav-float,
body.pfsintl-open .fav-float,
body.pfsfav-open .fav-float,
body.zficha-abierta .fav-float { display: none; }
@media (max-width: 640px) {
  /* En mobil pasa a ir ARRIBA del .wa-float (no a su izquierda) y con su
     mismo tamaño (58px) para que se vean como un par, pedido explícito.
     right:18px iguala el de .wa-float; bottom = 18 (bottom de .wa-float) +
     58 (su alto) + 10 (mismo aire que se usaba antes en horizontal) = 86. */
  .fav-float { right: 18px; bottom: 86px; width: 58px; height: 58px; }
}

/* ---- Botones "inline" dentro de la ficha (galería, encabezado, tarjeta de
   contacto) — el mismo botón flotante, pero repetido en varios puntos del
   contenido en vez de depender de un único lugar (pedido explícito).
   Todos comparten [data-fav-trigger] con el flotante — ver widget.js. ---- */
.fav-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* sin esto el ícono quedaba pegado a la izquierda dentro del círculo de la galería (que tiene ancho fijo, no se ajusta al contenido) */
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--midnight);
  font-family: var(--font);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.fav-inline svg { flex-shrink: 0; }
.fav-inline.is-saved svg { fill: currentColor; }
.fav-inline:disabled { opacity: 0.5; cursor: default; }

/* Encima de la foto principal, esquina superior derecha (mismo patrón que
   Zillow/Redfin: un corazón suelto sobre la imagen, sin texto). */
.fav-inline--gallery {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--midnight);
  box-shadow: 0 2px 10px rgba(7, 32, 49, 0.25);
}
.fav-inline--gallery svg { width: 22px; height: 22px; }
.fav-inline--gallery:hover { background: var(--white); }
.fav-inline--gallery.is-saved { background: var(--midnight); color: var(--white); }

/* Junto al precio, en el encabezado — icono + texto corto. */
.fav-inline--head {
  float: right;
  border: 1.5px solid var(--mist);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
}
.fav-inline--head svg { width: 18px; height: 18px; }
.fav-inline--head:hover { border-color: var(--sand); background: var(--ivory); }
.fav-inline--head.is-saved { background: var(--midnight); border-color: var(--midnight); color: var(--white); }
@media (max-width: 640px) {
  .fav-inline--head { float: none; margin-top: 10px; }
}

/* En la tarjeta de contacto, debajo del botón de llamar — mismo lenguaje
   visual que .pp-card__call (pill, borde midnight), full width. */
.fav-inline--card {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  padding: 13px;
  border: 1.5px solid var(--midnight);
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
}
.fav-inline--card svg { width: 20px; height: 20px; }
.fav-inline--card:hover { background: var(--midnight); color: var(--white); }
.fav-inline--card.is-saved { background: var(--midnight); color: var(--white); }

/* ---- Modal de registro/login (mismo lenguaje visual que .pfsintl) ---- */
.pfsfav-modal { position: fixed; inset: 0; z-index: 100000010; }
.pfsfav-modal[hidden] { display: none; }
.pfsfav-modal__scrim { position: absolute; inset: 0; background: rgba(7, 32, 49, 0.55); }
.pfsfav-modal__dialog {
  position: relative;
  max-width: 420px;
  width: calc(100% - 32px);
  margin: 8vh auto 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  padding: 32px 28px 28px;
  font-family: var(--font);
  max-height: 84vh;
  overflow-y: auto;
}
.pfsfav-modal__x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--midnight);
  cursor: pointer;
}
.pfsfav-modal__title {
  font-family: var(--font-head, var(--font));
  font-size: 1.3rem;
  color: var(--midnight);
  margin: 0 0 18px;
  padding-right: 24px;
}
.pfsfav-modal__error {
  background: #FBEAEA;
  color: #A32E2E;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.88rem;
  margin-bottom: 14px;
}
.pfsfav-form { display: flex; flex-direction: column; gap: 12px; }
.pfsfav-form[hidden] { display: none; }
.pfsfav-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: #5a7187;
  min-width: 0; /* si no, un <input> no se achica bajo su ancho intrinseco (~size=20) y desborda el grid/flex padre */
}
.pfsfav-form input {
  width: 100%;
  min-width: 0;
  font-family: var(--font);
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--mist);
  border-radius: 8px;
  color: var(--midnight);
}
.pfsfav-form input:focus { outline: 2px solid var(--sand); outline-offset: 1px; }
.pfsfav-form__row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pfsfav-form__submit {
  justify-content: center;
  border: none;
  cursor: pointer;
  margin-top: 4px;
}
.pfsfav-form__submit:disabled { opacity: 0.6; cursor: default; }
.pfsfav-form__switch {
  background: none;
  border: none;
  color: var(--midnight);
  text-decoration: underline;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 0;
  align-self: center;
}
.pfsfav-modal__success { text-align: center; padding: 12px 0 4px; color: var(--midnight); }
.pfsfav-modal__success p { margin-bottom: 10px; font-weight: 600; }
.pfsfav-modal__success a { color: var(--sand); font-weight: 600; }

/* ---- Dashboard (/favoritos/) ---- */
/* Ahora usa el .pfsnav / .pfsrail / drawer reales del sitio (copiados de
   propiedad.html) en vez de una barra propia, para que se sienta parte del
   sitio y no una pantalla aparte — pedido explícito. Botón de sesión en DOS
   sitios porque .pfsnav__actions no se oculta en móvil pero SUS HIJOS
   (.pfsnav__cta, .nav-share) sí, por reglas de especificidad ya documentadas
   en styles.css; en vez de pelear con esas reglas, el drawer da una salida
   garantizada en cualquier ancho. */
.pfsnav__logout {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.85rem;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pfsnav__logout:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }

/* .pfsnav-drawer__links a lleva el padding/tipografía real (selector por tag,
   no por clase) — como esta fila es un <button> (acción, no navegación) se
   replica a mano en vez de heredar. */
.pfsnav-drawer__logout {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 0;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--midnight);
  cursor: pointer;
}
.pfsnav-drawer__logout:hover { color: var(--sand); }

.favdash { max-width: 1100px; margin: 0 auto; padding: 40px 20px 80px; font-family: var(--font); }
.favdash__head { margin-bottom: 32px; }
.favdash__title { font-family: var(--font-head, var(--font)); color: var(--midnight); font-size: 2rem; margin-bottom: 6px; }
.favdash__sub { color: #5a7187; min-height: 1.2em; }

.favdash__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.favdash__grid[hidden] { display: none; }

.favdash__pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; }
.favdash__pager[hidden] { display: none; }
.favdash__pager-btn {
  background: none;
  border: 1px solid var(--mist);
  border-radius: 8px;
  padding: 9px 18px;
  font-family: var(--font);
  font-size: 0.88rem;
  color: var(--midnight);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.favdash__pager-btn:hover:not(:disabled) { background: var(--ivory); border-color: var(--sand); }
.favdash__pager-btn:disabled { opacity: 0.4; cursor: default; }
.favdash__pager-info { color: #5a7187; font-size: 0.88rem; }

/* Estados mutuamente excluyentes (cargando/error) — mismo tratamiento visual
   centrado, distinto del grid de tarjetas. */
.favdash__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 20px;
  color: #5a7187;
  text-align: center;
}
/* [hidden] y .favdash__state tienen la MISMA especificidad (0,1,0): sin esta
   regla, la de arriba gana por venir después en la hoja y el estado se queda
   visible pese al atributo hidden — los tres estados se veían apilados. */
.favdash__state[hidden] { display: none; }
.favdash__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--mist);
  border-top-color: var(--midnight);
  animation: favdash-spin 0.8s linear infinite;
}
@keyframes favdash-spin { to { transform: rotate(360deg); } }
.favdash__retry {
  background: var(--midnight);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
}
.favdash__retry:hover { background: #0d2f47; }

.favdash__empty { color: #5a7187; padding: 60px 0; text-align: center; }
.favdash__empty p { margin-bottom: 18px; }
.favdash__empty-cta { display: inline-flex; }

.fav-remove {
  margin-top: 10px;
  background: none;
  border: none;
  color: #A32E2E;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.favdash-login { max-width: 380px; margin: 60px auto 0; }
.favdash-login__title { font-family: var(--font-head, var(--font)); color: var(--midnight); font-size: 1.4rem; margin-bottom: 20px; text-align: center; }
.favdash-login .pfsfav-form { gap: 14px; }