/* =====================================================================
   LB Subastas — sitio público
   =====================================================================
   Secciones, cards, carrusel, filtros y detalle de publicación.
   Todos los valores salen de tokens.css.
   ===================================================================== */

/* =====================================================================
   Hero — carrusel del módulo de banners (posición home-top)
   =====================================================================
   Los colores del handoff: fondo verde claro con trama diagonal, título
   en verde institucional y subtítulo en verde oscuro. Cuando el banner
   trae imagen, la imagen reemplaza la trama.
   ===================================================================== */

.hero {
  position: relative;
  background: var(--verde-claro);
  overflow: hidden;
}

.hero__slide {
  display: none;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  padding: 32px 60px;
  background-size: cover;
  background-position: center;
  /* Sin imagen queda la trama diagonal del diseño. */
  background-color: var(--verde-claro);
  background-image: repeating-linear-gradient(
    45deg,
    var(--verde-claro), var(--verde-claro) 10px,
    var(--verde-claro-rayas) 10px, var(--verde-claro-rayas) 20px
  );
  position: relative;
}

.hero__slide--activo {
  display: flex;
}

.hero__contenido {
  text-align: center;
  max-width: 480px;
  position: relative;
  z-index: 1;
}

.hero__titulo {
  font-size: var(--tam-hero);
  line-height: 1.4;
  font-weight: var(--peso-fuerte);
  color: var(--verde);
  margin-bottom: 14px;
}

.hero__subtitulo {
  font-size: var(--tam-cuerpo);
  line-height: 1.4;
  color: var(--verde-texto);
  margin-bottom: 18px;
}

.hero__botones {
  display: flex;
  gap: var(--gap-medio);
  justify-content: center;
  flex-wrap: wrap;
}

/* Banner sin botones: toda la pieza es clickeable. */
.hero__link {
  position: absolute;
  inset: 0;
}

.hero__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  color: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hero__flecha:hover { background: rgba(255, 255, 255, 0.95); }
.hero__flecha--izq { left: 12px; }
.hero__flecha--der { right: 12px; }

.hero__dots {
  display: flex;
  justify-content: center;
  gap: var(--gap-chico);
  padding: 12px 0;
}

.hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--verde-punto-inactivo);
}

.hero__dot--activo { background: var(--verde); }

/* Banner promocional intermedio de la home */
.banner-medio {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  border-radius: var(--radio-card);
  background-size: cover;
  background-position: center;
  background-color: var(--fondo-imagen);
  overflow: hidden;
}

.banner-medio__texto {
  background: rgba(0, 0, 0, 0.55);
  color: var(--blanco);
  padding: 10px 18px;
  border-radius: var(--radio-boton);
  font-size: var(--tam-titulo);
  font-weight: var(--peso-fuerte);
}

/* --- Secciones ------------------------------------------------------ */

.seccion {
  padding: 28px 0 8px;
}

.seccion__titulo {
  font-size: var(--tam-seccion);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  display: flex;
  align-items: center;
  gap: var(--gap-chico);
  margin-bottom: var(--gap-cards);
}

/* --- Carrusel horizontal con scroll-snap ---------------------------- */

.carrusel {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: var(--gap-medio);
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--padding-lateral);
}

.carrusel__pista {
  display: flex;
  gap: var(--gap-cards);
  padding: 0 var(--padding-lateral);
}

.carrusel__pista > .card {
  flex: none;
  /* Acompaña la escala tipográfica nueva: con 200px el título de la
     publicación se partía en tres o cuatro renglones. */
  width: 240px;
  scroll-snap-align: start;
}

/*
  Flechas del carrusel.

  En una Mac la barra de scroll está oculta hasta que se scrollea, así
  que con un mouse común no había NINGUNA señal de que el carrusel se
  podía correr: parecía que estaba cortado. Con trackpad o en el
  teléfono siempre funcionó.

  El marco es `relative` y las flechas van encima de los bordes, para no
  robarle ancho a las tarjetas.
*/
.carrusel-marco {
  position: relative;
}

.carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--texto);
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

.carrusel__flecha:hover {
  background: var(--fondo);
}

.carrusel__flecha--izq { left: 4px; }
.carrusel__flecha--der { right: 4px; }

/* En mobile se arrastra con el dedo: las flechas sólo estorbarían. */
@media (max-width: 767px) {
  .carrusel__flecha { display: none; }
}

/* --- Card ----------------------------------------------------------- */

.card {
  border: 1px solid var(--borde);
  border-radius: var(--radio-card);
  overflow: hidden;
  background: var(--blanco);
  display: flex;
  flex-direction: column;
}

/* Las destacadas se distinguen por el borde verde institucional. */
.card--destacada {
  border-color: var(--verde);
}

.card__imagen {
  height: 180px;
  background: var(--fondo-imagen);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

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

.card__imagen i {
  font-size: 26px;
  color: var(--texto-terciario);
}

.card__badge {
  position: absolute;
  top: 6px;
}

.card__badge--izq { left: 6px; }
.card__badge--der { right: 6px; }

/* Corazón de favoritos: sobre la imagen, arriba a la izquierda, para no
   chocar con el badge de estado (arriba a la derecha) ni con el título
   (abajo, sobre el degradado). */
.card {
  position: relative;
}

.card__favorito {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--texto-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  z-index: 2;
  padding: 0;
}

.card__favorito:hover {
  color: var(--badge-vivo-texto);
}

.card__favorito[aria-pressed='true'] {
  color: var(--badge-vivo-texto);
}

.card__cuerpo {
  padding: var(--gap-medio) 12px;
  flex: 1;
  display: block;
  color: inherit;
}

.card__cuerpo:hover { color: inherit; }

.card__categoria {
  font-size: var(--tam-metadata);
  color: var(--texto-terciario);
  margin-bottom: 3px;
}

/* Título sobre la imagen: apoyado en un degradado oscuro al pie de la
   foto, para que se lea con foto real o con el placeholder claro. */
.card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 12px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  z-index: 1;
}

.card__titulo {
  font-size: var(--tam-card);
  font-weight: var(--peso-fuerte);
  color: var(--blanco);
  margin: 0;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  /* Máximo dos líneas: mantiene todas las cards parejas. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__etiqueta-precio {
  font-size: var(--tam-metadata);
  color: var(--texto-terciario);
}

.card__precio {
  font-size: var(--tam-seccion);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

/* Tiempo restante destacado: chip con ícono de reloj. El rojo institucional
   de "EN VIVO" transmite la urgencia de que la subasta está corriendo. */
.card__tiempo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--radio-badge);
  background: var(--badge-vivo-fondo);
  color: var(--badge-vivo-texto);
  font-size: var(--tam-secundario);
  font-weight: var(--peso-fuerte);
}

.card__tiempo i {
  font-size: var(--tam-card);
}

.card__meta {
  font-size: var(--tam-secundario);
  color: var(--texto-secundario);
  margin-top: 8px;
}

.card__pie {
  padding: 0 12px 12px;
}

/* --- Grilla del listado --------------------------------------------- */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--gap-cards);
}

/* --- Listado con panel de filtros ----------------------------------- */

.listado {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  align-items: start;
  padding: 20px 0 48px;
}

@media (max-width: 860px) {
  .listado {
    grid-template-columns: 1fr;
  }
}

.filtros {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-card);
  padding: 16px;
  position: sticky;
  top: 90px;
}

.filtros__titulo {
  font-size: var(--tam-secundario);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
}

.filtros__titulo:first-child { margin-top: 0; }

.filtros__grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Las subcategorías se anidan bajo su categoría (decisión #22). */
.filtros__hijas {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 18px;
  margin-top: 5px;
}

.filtros__opcion {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--tam-aviso);
  color: var(--texto-secundario);
  cursor: pointer;
}

.filtros__opcion input { accent-color: var(--verde); }

.filtros__precio {
  display: flex;
  gap: var(--gap-chico);
}

.filtros__precio input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-input);
  font-size: var(--tam-aviso);
}

.listado__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gap-medio);
  margin-bottom: var(--gap-cards);
}

.listado__titulo {
  font-size: var(--tam-hero);
  font-weight: var(--peso-fuerte);
}

.listado__conteo {
  font-size: var(--tam-aviso);
  color: var(--texto-secundario);
}

/* --- Paginación ----------------------------------------------------- */

.paginacion {
  display: flex;
  justify-content: center;
  gap: var(--gap-chico);
  margin-top: 28px;
}

.paginacion a,
.paginacion span {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tam-aviso);
  color: var(--texto);
  background: var(--blanco);
}

.paginacion .actual {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
  font-weight: var(--peso-medio);
}

/* --- Breadcrumb (patrón de 3 niveles, doc 10) ----------------------- */

.breadcrumb {
  font-size: var(--tam-secundario);
  color: var(--texto-terciario);
  padding: 14px 0;
}

.breadcrumb a { color: var(--texto-secundario); }

/* --- Detalle de publicación ----------------------------------------- */

.detalle {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
  padding-bottom: 48px;
}

@media (max-width: 860px) {
  .detalle {
    grid-template-columns: 1fr;
  }
}

.galeria__principal {
  background: var(--fondo-imagen);
  border-radius: var(--radio-card);
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.galeria__principal i {
  font-size: 56px;
  color: var(--texto-terciario);
}

.galeria__miniaturas {
  display: flex;
  gap: var(--gap-chico);
  margin-top: var(--gap-medio);
  flex-wrap: wrap;
}

.galeria__miniatura {
  width: 62px;
  height: 48px;
  border-radius: var(--radio-badge);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--fondo-imagen);
  padding: 0;
  cursor: pointer;
}

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

.galeria__miniatura[aria-current='true'] {
  border-color: var(--verde);
  border-width: 2px;
}

.detalle__subtitulo {
  font-size: var(--tam-seccion);
  font-weight: var(--peso-fuerte);
  margin: 26px 0 var(--gap-medio);
}

/* Ficha técnica: atributos flexibles por categoría (doc 03) */
.ficha {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-card);
  overflow: hidden;
}

.ficha__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-cards);
  padding: 9px 14px;
  border-bottom: 1px solid var(--borde-suave);
  font-size: var(--tam-card);
}

.ficha__fila:last-child { border-bottom: none; }
.ficha__nombre { color: var(--texto-secundario); }
.ficha__valor { font-weight: var(--peso-medio); }

.detalle__descripcion {
  font-size: var(--tam-card);
  color: var(--texto-secundario);
  line-height: 1.7;
  white-space: pre-line;
}

.video {
  margin-top: 20px;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radio-card);
  overflow: hidden;
  background: var(--texto);
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Panel lateral de la subasta ------------------------------------ */

.panel-puja {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-card);
  padding: 20px;
  position: sticky;
  top: 90px;
}

.panel-puja__badges {
  display: flex;
  gap: var(--gap-chico);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--gap-medio);
}

.panel-puja__titulo {
  font-size: var(--tam-hero);
  font-weight: var(--peso-fuerte);
  line-height: 1.3;
  margin-bottom: var(--gap-cards);
}

/* Countdown DD/HH/MM/SS (doc 03) */
.countdown {
  background: var(--fondo);
  border-radius: var(--radio-boton);
  padding: 12px;
  text-align: center;
  margin-bottom: var(--gap-cards);
}

.countdown__etiqueta {
  font-size: var(--tam-metadata);
  color: var(--texto-terciario);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.countdown__reloj {
  font-size: var(--tam-hero);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}

.countdown__cierre {
  font-size: var(--tam-secundario);
  color: var(--texto-secundario);
}

.panel-puja__etiqueta {
  font-size: var(--tam-secundario);
  color: var(--texto-secundario);
}

.panel-puja__precio {
  font-size: 26px;
  font-weight: var(--peso-fuerte);
  color: var(--verde);
  line-height: 1.2;
}

.panel-puja__minimo {
  font-size: var(--tam-aviso);
  color: var(--texto-secundario);
  margin-top: 2px;
}

.panel-puja__form {
  display: flex;
  gap: var(--gap-chico);
  margin: var(--gap-cards) 0;
}

.panel-puja__form input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-input);
  font-size: var(--tam-cuerpo);
  font-weight: var(--peso-medio);
}

/* Desglose obligatorio del precio final (doc 03) */
.desglose {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-boton);
  overflow: hidden;
  margin: var(--gap-cards) 0;
}

.desglose > summary {
  padding: 10px 14px;
  font-size: var(--tam-aviso);
  font-weight: var(--peso-medio);
  cursor: pointer;
  background: var(--fondo);
}

.desglose__fila {
  display: flex;
  justify-content: space-between;
  padding: 7px 14px;
  font-size: var(--tam-aviso);
  color: var(--texto-secundario);
}

.desglose__fila--total {
  border-top: 1px solid var(--borde-total);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  font-size: var(--tam-card);
}

/* Historial de pujas: colapsado por defecto y siempre anonimizado */
.historial > summary {
  font-size: var(--tam-card);
  font-weight: var(--peso-medio);
  cursor: pointer;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: var(--gap-chico);
}

.historial__tabla {
  width: 100%;
  font-size: var(--tam-aviso);
}

.historial__tabla th {
  text-align: left;
  color: var(--texto-secundario);
  font-weight: var(--peso-medio);
  padding: 7px 10px;
  border-bottom: 1px solid var(--borde-suave);
}

.historial__tabla td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde-suave);
}

.historial__codigo {
  font-family: var(--fuente-mono);
  color: var(--texto-secundario);
}


/* --- Mapa (Nosotros) ------------------------------------------------ */
/*
  Mantiene el borde sólido y el radio 12px del handoff, pero MÁS ALTO
  que el espacio reservado original (280px). Con esa altura el mapa
  entraba tan comprimido que casi no se distinguía el pueblo: un mapa
  necesita aire para servir de algo. En mobile vuelve a 280px, donde el
  ancho es chico y un alto grande obligaría a hacer scroll de más.

  El `overflow:hidden` recorta las esquinas del iframe, que no respeta
  el radio por su cuenta.
*/
.mapa {
  height: 460px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 44px;
  background: var(--fondo-imagen);
}

@media (max-width: 860px) {
  .mapa { height: 280px; }
}

.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Marcador de posición del mapa (Nosotros) ----------------------- */
/*
  Calcado del handoff: la misma trama diagonal verde del hero, borde
  sólido y una píldora blanca al centro. En el diseño no hay mapa real
  embebido; esto reserva el espacio con el lenguaje visual del sitio.
*/
.mapa-lugar {
  height: 280px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 44px;
  background: repeating-linear-gradient(
    45deg,
    var(--verde-claro), var(--verde-claro) 12px,
    var(--verde-claro-rayas) 12px, var(--verde-claro-rayas) 24px
  );
}

.mapa-lugar__etiqueta {
  font-family: var(--fuente-mono);
  font-size: var(--tam-secundario);
  color: var(--badge-clasificado-texto);
  background: var(--blanco);
  padding: 8px 14px;
  border-radius: 8px;
  margin: 0;
}


/* --- "¿Listo para vender?" ------------------------------------------ */
/*
  Medidas del handoff: panel gris de 960px CENTRADO, con el título y la
  bajada al medio, y el formulario blanco adentro alineado a la
  izquierda. Sin este contenedor el formulario colgaba pegado al borde
  izquierdo de la página.
*/
.vender-cta {
  max-width: 960px;
  margin: 36px auto 0;
  background: var(--fondo-panel-suave);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
}

.vender-cta__titulo {
  font-size: var(--tam-hero);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  margin: 0 0 8px;
}

.vender-cta__bajada {
  font-size: var(--tam-card);
  color: var(--texto-secundario);
  margin: 0 0 22px;
}

/*
  El formulario se centra dentro del panel, pero su CONTENIDO va
  alineado a la izquierda: un formulario con las etiquetas centradas es
  incómodo de completar.
*/
.vender-cta__form {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

@media (max-width: 860px) {
  .vender-cta { padding: 24px 16px; }
}