/**
 * Viviaza © 2026 — Todos los derechos reservados.
 *
 * Tipo de archivo: CSS
 * Nombre del archivo: tarjeta-anuncio.css
 * Versión nueva: 1.4.0
 * Tipo de cambio: minor (absorbe el contenedor .relacionados-block; el grid reusa .tarjetas-grid)
 * Fecha de creación: 21/05/2026
 * Fecha de modificación: 05/06/2026
 *
 * Descripción: Tarjeta de anuncio inmobiliario (propiedad). Componente
 *              específico del dominio que se reutiliza en home (recién
 *              publicados, destacados), búsqueda (lista de resultados),
 *              perfil del vendedor, anuncios relacionados, favoritos.
 *
 *              Usa exclusivamente tokens de _tokens.css. Pensada para
 *              Core Web Vitals: aspect-ratio en la foto (sin CLS),
 *              loading=lazy, dimensiones reservadas en pie.
 *
 *              Convención de naming: ESPAÑOL para componentes
 *              específicos del negocio. Modificadores con `--`,
 *              estados con `is-`. BEM ligero.
 *
 *              Bloque:           .tarjeta-anuncio
 *              Variantes:        .tarjeta-anuncio--horizontal
 *                                .tarjeta-anuncio--destacada
 *              Estados:          .tarjeta-anuncio.is-favorito
 *
 * Descripción del cambio v1.3.0:
 *   - El pie de TODAS las tarjetas (.tarjeta-pie) lleva un tinte teal muy
 *     sutil (color-mix de --c-action con blanco) en vez del crema del fondo,
 *     para que el chip blanco del vendedor resalte y el pie no se pierda.
 *   - .tarjeta-anuncio--color (paquete COLOR) ahora resalta totalmente:
 *     tinte del cuerpo/pie más fuerte + halo (box-shadow) del mismo color
 *     elegido por el vendedor, conservando el borde.
 *   - El chip .tarjeta-vendedor dentro de una tarjeta COLOR toma ese mismo
 *     tono (fondo, borde, avatar y nombre derivados de --c-tarjeta-borde
 *     vía color-mix). Los iconos de specs/ubicación NO cambian.
 *
 * Descripción del cambio v1.2.0:
 *   - El bloque .tarjeta-vendedor (avatar + nombre + tiempo) ahora se
 *     eleva del fondo como un "chip" redondeado: superficie blanca
 *     (var(--c-bg-alt)), borde fino (var(--c-border)) y sombra mínima
 *     (var(--shadow-xs)). Resalta del pie crema sin desentonar.
 *   - Solo tokens de _tokens.css (sin hex literales).
 *
 * Descripción del cambio v1.1.0:
 *   - Nuevo .tarjeta-categoria-fila (flex con categoría a izquierda
 *     y .rating dorado a derecha en la misma línea).
 *   - Eliminadas .tarjeta-rating y .tarjeta-pie-meta (el rating ya no
 *     vive en el pie; el pie regresa al layout simple
 *     vendedor + vistas).
 *   - El rating de calidad usa ahora el componente .rating.rating--sm
 *     de _components.css (mismo look que estrellas del vendedor).
 *
 * Estado: listo para producción
 */

/* ============================================================
   CONTENEDOR
============================================================ */

.tarjeta-anuncio {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition),
              box-shadow var(--transition),
              border-color var(--transition);
  height: 100%;
}

.tarjeta-anuncio:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-action);
}

/* ============================================================
   FOTO (con aspect-ratio reservado — sin CLS)
============================================================ */

.tarjeta-foto {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-card-photo);   /* 4:3 reservado */
  background: var(--c-bg-soft);
  overflow: hidden;
}

.tarjeta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.tarjeta-anuncio:hover .tarjeta-foto img {
  transform: scale(1.05);
}

/* ============================================================
   DISTINTIVO (badge superior izquierdo: Verificado, Nuevo, etc.)
============================================================ */

.tarjeta-distintivo {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

.tarjeta-distintivo--verificado {
  background: var(--c-bg-alt);
  color: var(--c-primary);
}

.tarjeta-distintivo--nuevo {
  background: var(--c-accent);
  color: var(--c-text-on-dark);
}

.tarjeta-distintivo--oportunidad {
  background: var(--c-accent);
  color: var(--c-text-on-dark);
}

.tarjeta-distintivo--premium {
  background: linear-gradient(135deg, #D4A574, #B8854A);
  color: var(--c-text-on-dark);
}

/* ============================================================
   BOTÓN FAVORITO (corazón circular arriba a la derecha)
============================================================ */

.tarjeta-favorito {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;     /* WCAG 2.5.5 — tap target mínimo 44x44 px */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg-alt);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--c-text-dim);
  font-size: var(--fs-base);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  z-index: 2;
}

.tarjeta-favorito:hover {
  color: var(--c-accent);
  transform: scale(1.1);
}

.tarjeta-favorito.is-activo {
  color: var(--c-accent);
}

.tarjeta-favorito.is-activo::before {
  /* Pequeño pulso al activar — sin afectar layout */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  animation: latido-favorito 0.6s ease-out;
}

@keyframes latido-favorito {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ============================================================
   CONTADOR DE FOTOS (esquina inferior derecha de la foto)
============================================================ */

.tarjeta-contador-fotos {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: rgba(27, 44, 79, 0.78);
  color: var(--c-text-on-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  z-index: 2;
  backdrop-filter: blur(4px);
}

.tarjeta-contador-fotos i {
  font-size: 0.9em;
}

/* ============================================================
   CUERPO (datos del anuncio debajo de la foto)
============================================================ */

.tarjeta-cuerpo {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* -------- Precio destacado -------- */

.tarjeta-precio {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: var(--space-2);
}

.tarjeta-moneda {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-text-dim);
  letter-spacing: 0.05em;
}

/* -------- Título (truncado a 2 líneas) -------- */

.tarjeta-titulo {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
  min-height: 2.6em;       /* reserva 2 líneas — sin CLS */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------- Ubicación con icono -------- */

.tarjeta-ubicacion {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarjeta-ubicacion i {
  color: var(--c-accent);
  flex-shrink: 0;
  font-size: 0.95em;
}

/* -------- Características (recámaras, baños, m²) -------- */

.tarjeta-specs {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
  margin-top: auto;          /* empuja hacia el pie */
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  font-weight: var(--fw-semibold);
}

.tarjeta-spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tarjeta-spec i {
  color: var(--c-action);
  font-size: 0.95em;
}

/* ============================================================
   PIE (vendedor + tiempo + vistas)
============================================================ */

.tarjeta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  /* Banda con un tinte sutil (no el crema del fondo de página) para que el
     chip blanco del vendedor resalte y el pie no se pierda con la página. */
  background: color-mix(in srgb, var(--c-action) 8%, var(--c-bg-alt));
  border-top: 1px solid var(--c-border);
}

/* El bloque del vendedor se eleva del fondo como un "chip" suave:
   superficie blanca, borde fino y sombra mínima. Resalta sin chillar. */
.tarjeta-vendedor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 4px 10px 4px 4px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
}

.tarjeta-vendedor img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--c-border-strong);
  flex-shrink: 0;
}

.tarjeta-vendedor-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.tarjeta-vendedor-nombre {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarjeta-vendedor-tiempo {
  font-size: 10px;
  color: var(--c-text-dim);
  font-weight: var(--fw-medium);
  text-transform: capitalize;
}

.tarjeta-vistas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}

.tarjeta-vistas i {
  font-size: 0.95em;
}

/* (eliminadas .tarjeta-pie-meta y .tarjeta-rating en v1.1.0 — el rating
   se movió a .tarjeta-categoria-fila y usa el componente .rating--sm
   global en lugar de un rating propio.) */

/* ============================================================
   VARIANTE — Horizontal (para resultados de búsqueda en lista)
============================================================ */

.tarjeta-anuncio--horizontal {
  flex-direction: row;
  height: auto;
}

.tarjeta-anuncio--horizontal .tarjeta-foto {
  width: 280px;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
}

.tarjeta-anuncio--horizontal .tarjeta-cuerpo {
  padding: var(--space-5);
}

.tarjeta-anuncio--horizontal .tarjeta-titulo {
  font-size: var(--fs-md);
}

.tarjeta-anuncio--horizontal .tarjeta-precio {
  font-size: var(--fs-2xl);
}

@media (max-width: 767px) {
  .tarjeta-anuncio--horizontal {
    flex-direction: column;
  }
  .tarjeta-anuncio--horizontal .tarjeta-foto {
    width: 100%;
  }
}

/* ============================================================
   GRID DE TARJETAS — contenedor estándar
============================================================ */

.tarjetas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

@media (max-width: 767px) {
  .tarjetas-grid {
    /* En móvil, scroll horizontal estilo carrusel (mockup) */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    margin-inline: calc(var(--container-padding-mobile) * -1);
    padding-inline: var(--container-padding-mobile);
    scrollbar-width: none;
  }
  .tarjetas-grid::-webkit-scrollbar {
    display: none;
  }
  .tarjetas-grid > .tarjeta-anuncio {
    flex: 0 0 85%;
    max-width: 300px;
    scroll-snap-align: start;
  }
}

/* ============================================================
   VARIANTES DE PAQUETE DESTACADO (refactor 21/05/2026)
   Solo el paquete COLOR (tipo 4) tiene impacto visual en el cuerpo.
   Las demás variantes (LISTADOS, REORDEN_DIARIO) solo agregan un
   badge de texto sobre la foto — el cuerpo de la tarjeta queda
   exactamente igual al de las tarjetas normales.
============================================================ */

/* COLOR — borde personalizado + cuerpo tintado del mismo color.
   Objetivo: que resalte TOTALMENTE del resto de anuncios. Conserva el borde
   y suma un tinte transparente del color elegido (verde/naranja/etc.) + un
   halo suave del mismo tono. Los iconos NO se tocan (siguen en teal/acción). */
.tarjeta-anuncio--color {
  border: 2px solid var(--c-tarjeta-borde, var(--c-accent));
  box-shadow: 0 6px 22px color-mix(in srgb, var(--c-tarjeta-borde, var(--c-accent)) 32%, transparent);
}
.tarjeta-anuncio--color:hover {
  border-color: var(--c-tarjeta-borde, var(--c-accent));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--c-tarjeta-borde, var(--c-accent)) 42%, transparent);
}
.tarjeta-anuncio--color .tarjeta-cuerpo {
  background: color-mix(in srgb, var(--c-tarjeta-borde, var(--c-accent)) 18%, #FFFFFF);
}
.tarjeta-anuncio--color .tarjeta-pie {
  background: color-mix(in srgb, var(--c-tarjeta-borde, var(--c-accent)) 26%, #FFFFFF);
  border-top-color: color-mix(in srgb, var(--c-tarjeta-borde, var(--c-accent)) 35%, transparent);
}

/* El chip del vendedor toma el mismo tono del destacado COLOR. */
.tarjeta-anuncio--color .tarjeta-vendedor {
  background: color-mix(in srgb, var(--c-tarjeta-borde, var(--c-accent)) 34%, #FFFFFF);
  border-color: color-mix(in srgb, var(--c-tarjeta-borde, var(--c-accent)) 60%, transparent);
}
.tarjeta-anuncio--color .tarjeta-vendedor img {
  border-color: color-mix(in srgb, var(--c-tarjeta-borde, var(--c-accent)) 60%, transparent);
}
.tarjeta-anuncio--color .tarjeta-vendedor-nombre {
  color: color-mix(in srgb, var(--c-tarjeta-borde, var(--c-accent)) 60%, var(--c-primary));
}

/* Badge "Destacado" — para anuncios con paquete LISTADOS activo */
.tarjeta-distintivo--destacado {
  background: linear-gradient(135deg, #F5C46B 0%, #E0A040 100%);
  color: #1F2937;
}

/* Badge "Reciente" arriba de la foto — para anuncios con REORDEN_DIARIO
   bumpeados en las últimas 24h. Va en posición top (no bottom) porque
   compite con "Destacado" — ambos van arriba pero uno se muestra a la vez. */
.tarjeta-distintivo--reciente-top {
  background: var(--c-action, #0EA5A0);
  color: #fff;
}

/* ============================================================
   BADGE "Comparte comisión" (solo visible a vendedores logueados)
   Se coloca abajo a la izquierda de la foto, contrastante.
============================================================ */
.tarjeta-comision {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-accent, #E07856);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(224, 120, 86, 0.30);
  pointer-events: none;
}
.tarjeta-comision i {
  font-size: .82rem;
}

/* ============================================================
   PARCHES 22/05/2026 — categoría, altura uniforme, favoritos
============================================================ */

/* --- Fila categoría + rating (v1.1.0) ---
   Wrapper flex que pone el badge de categoría a la izquierda y el
   rating dorado a la derecha en una sola línea, justo debajo del
   precio. Si no hay categoría, el primer hijo es un <span> vacío
   para que el rating quede pegado a la derecha. */
.tarjeta-categoria-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2, .5rem);
  min-height: 22px;            /* reserva alto aunque la fila esté vacía */
}

/* --- Bug 1: Categoría visible (badge encima del título) --- */
.tarjeta-categoria {
  display: inline-block;
  font-size: var(--fs-xxs, .68rem);
  font-weight: var(--fw-bold, 700);
  color: var(--c-action, #1B2C4F);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--azul-50, #eef1f8);
  padding: 2px 8px;
  border-radius: 4px;
  align-self: center;
  line-height: 1.4;
}

/* El componente .rating dentro de la fila — fuerza un poco de peso
   en el número para que se lea junto a la estrella. */
.tarjeta-categoria-fila .rating {
  font-weight: var(--fw-bold);
  color: var(--c-text);          /* el número en color texto, la estrella en dorado */
}

/* --- Bug 2: Altura uniforme en móvil ---
   El problema reportado: en móvil, tarjetas SIN íconos de specs (rec/baños/m²)
   quedaban más bajas porque .tarjeta-specs colapsaba. Garantizamos altura
   mínima del bloque para que todas las tarjetas tengan misma altura total. */
.tarjeta-specs {
  min-height: 32px;            /* reserva 1 línea aunque no haya specs */
  align-items: center;
}
.tarjeta-specs:empty::before {
  content: '\00a0';            /* nbsp invisible — mantiene la altura */
  color: transparent;
}

/* Refuerzo: que todas las celdas del grid tengan la misma altura. Si el
   contenedor del grid (.tarjetas-grid) usa display:grid, esto basta. Si
   alguien lo cambia a flex, este refuerzo evita el bug. */
.tarjetas-grid > .tarjeta-anuncio { height: 100%; }

/* --- Bug 3: Botón corazón favoritos en la tarjeta ---
   Posición: esquina superior derecha de la foto, en círculo blanco
   semitransparente con sombra suave. */

.tarjeta-favorito {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .94);
  color: var(--c-text, #333);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  transition: transform .15s ease, background .15s ease, color .15s ease;
  z-index: 3;
  font-size: 1rem;
}
.tarjeta-favorito:hover,
.tarjeta-favorito:focus-visible {
  background: #fff;
  transform: scale(1.08);
  color: #e11d48; /* rosa al hover */
  outline: none;
}
.tarjeta-favorito.is-activo {
  color: #e11d48;
  background: #fff;
}
.tarjeta-favorito.is-activo i {
  animation: tarjeta-fav-pop .35s ease;
}
@keyframes tarjeta-fav-pop {
  0%   { transform: scale(.7); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Mientras envía la petición (clase efímera vía JS) */
.tarjeta-favorito.is-loading {
  pointer-events: none;
  opacity: .6;
}

/* La .tarjeta-foto debe ser contenedor de posición para el corazón */
.tarjeta-foto { position: relative; }


/* ============================================================
   MODIFICADOR --OSCURECIDA (pausado / no disponible)
   Aplicado desde renderTarjetaAnuncio($a, ['oscurecer'=>true]).
   Foto en blanco y negro + opacidad reducida + badge centrado.
============================================================ */
.tarjeta-anuncio--oscurecida .tarjeta-foto img {
  filter: grayscale(100%);
  opacity: .6;
  transition: opacity .2s, filter .2s;
}
.tarjeta-anuncio--oscurecida .tarjeta-cuerpo,
.tarjeta-anuncio--oscurecida .tarjeta-pie {
  opacity: .7;
}
.tarjeta-anuncio--oscurecida:hover .tarjeta-foto img {
  filter: grayscale(60%);
  opacity: .8;
}

.tarjeta-no-disponible {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  pointer-events: none;
}

/* ============================================================
   BLOQUE "Inmuebles similares / unidades del desarrollo"
   Contenedor de la sección de relacionados. El grid reusa
   .tarjetas-grid (definido arriba); aquí solo el margen del
   bloque y el título. (Absorbido de relacionados.css.)
============================================================ */

.relacionados-block {
  margin-block: 3rem;     /* solo top/bottom — respeta el centrado del .container */
  width: 100%;
  overflow: hidden;       /* evita desbordamiento lateral en el carrusel móvil */
}

.relacionados-block .section-title {
  font-size: 1.8rem;
  font-weight: var(--fw-black);
  color: var(--c-primary);
  margin-bottom: 1.5rem;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-border);
}