/* ============================================================
   SOCIOS ECOM — Productos ganadores (Shopify)
   Filtros, resumen y la tarjeta: la foto del producto arriba,
   su precio, la tienda que lo vende y los tres números de esa
   tienda (factura, pedidos y visitas con su tendencia).
   ============================================================ */

/* ---------- Filtros ---------- */

.wfiltros {
  display: grid;
  /* 150 px: diez filtros y el buscador caben en dos filas en vez de tres */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--se-sp-3);
  align-items: end;
  margin-bottom: var(--se-sp-5);
  padding: 14px var(--se-sp-4) var(--se-sp-4);
  background: var(--se-papel);
  border: 1px solid var(--se-linea);
  border-radius: var(--se-r-card);
}

.wfiltro { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wfiltro--buscar { grid-column: span 2; }
.wfiltro__etiqueta {
  font-family: var(--se-fuente);
  font-size: var(--se-fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-2);
}

.wfiltro__caja {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  background: var(--se-papel);
  border: 1px solid var(--se-linea-fuerte);
  border-radius: var(--se-r-campo);
  transition: border-color var(--se-trans), box-shadow var(--se-trans);
}
.wfiltro__caja:hover { border-color: var(--se-borde-marcado); }
.wfiltro__caja:focus-within {
  border-color: var(--se-verde-tinta);
  box-shadow: var(--se-anillo-foco);
}
/* El desplegable nativo, sin su flecha: se pinta la de la casa. */
.wfiltro__caja select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%; height: 100%;
  padding: 0 28px 0 10px;
  border: 0;
  background: transparent;
  font-size: var(--se-fs-sm);
  font-weight: 600;
  color: var(--se-tinta);
  cursor: pointer;
  outline: none;
  text-overflow: ellipsis;
}
.wfiltro__caja select option { background: var(--se-papel); color: var(--se-tinta); }
.wfiltro__caja:has(select)::after {
  content: "";
  position: absolute;
  right: 11px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--se-tinta-2);
  border-bottom: 1.5px solid var(--se-tinta-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.wfiltro__buscar { display: flex; gap: var(--se-sp-2); }
.wfiltro__texto {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  font-size: var(--se-fs-sm);
  color: var(--se-tinta);
  outline: none;
}
.wfiltro__texto::placeholder { color: var(--se-tinta-3); }
.wfiltro__buscar .btn { height: 36px; padding: 0 16px; }

/* ---------- Resumen ---------- */

.winners-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--se-sp-2) var(--se-sp-4);
  margin-bottom: var(--se-sp-4);
  font-size: var(--se-fs-sm);
  color: var(--se-tinta-2);
}
.winners-resumen__cifras { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--se-sp-2); }
.winners-resumen__cifras > span:first-child { font-size: 15px; color: var(--se-tinta); font-weight: 600; }
.winners-resumen b { font-family: var(--se-fuente-mono); color: var(--se-verde-tinta); font-size: 17px; }
.winners-resumen__embudo { color: var(--se-tinta-3); }
.winners-resumen__fuente { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--se-tinta-3); }

.winners-pulso {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--se-verde);
  box-shadow: 0 0 0 0 rgba(var(--se-verde-rgb), .6);
  animation: winners-pulso 1.6s ease-out infinite;
}
@keyframes winners-pulso {
  to { box-shadow: 0 0 0 8px rgba(var(--se-verde-rgb), 0); }
}

.winners-nota {
  margin: var(--se-sp-6) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--se-tinta-3);
}

/* ---------- Rejilla ---------- */

.winners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--se-sp-5);
  align-items: stretch;
}

.winners-mas { display: flex; justify-content: center; margin-top: var(--se-sp-6); }
.winners-mas span { font-family: var(--se-fuente-mono); color: var(--se-tinta-3); font-weight: 500; }

/* ---------- Tarjeta ---------- */

.winner {
  display: flex;
  flex-direction: column;
  background: var(--se-papel);
  border: .8px solid var(--se-linea-fuerte);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
  overflow: hidden;
  transition: transform .15s var(--se-salida), box-shadow var(--se-trans);
  animation: winner-entra .3s var(--se-salida) both;
}
.winner:hover { transform: translateY(-2px); }
@keyframes winner-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* La foto del producto manda: grande y sin recortar, que es lo que se vende. */
.winner__foto {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-bottom: .8px solid var(--se-linea);
  color: var(--se-tinta-3);
  overflow: hidden;
}
.winner__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--se-sp-2);
  z-index: 1;
  transition: transform .3s var(--se-salida);
}
.winner__foto:hover img { transform: scale(1.04); }
.winner__foto-vacia svg { width: 32px; height: 32px; opacity: .5; }

.winner__ads {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--se-r-pill);
  background: rgba(18, 23, 26, .82);
  color: #fff;
  font-size: var(--se-fs-label);
  font-weight: 700;
  cursor: help;
}
.winner__ads svg { width: 12px; height: 12px; }

.winner__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--se-sp-4) var(--se-sp-4) 0;
  flex: 1;
}

.winner__categoria {
  font-size: var(--se-fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-verde-tinta);
}

.winner__nombre {
  margin: 0;
  min-height: calc(2 * 1.32em);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.winner__fila-precio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-sp-2);
  /* Alto fijo, con o sin beneficio: si no, unas tarjetas se descuadran 3 px. */
  height: 32px;
}
.winner__precio {
  min-width: 0;
  font-family: var(--se-fuente-mono);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.winner__beneficio {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--se-r-pill);
  background: var(--se-verde-tint);
  border: .8px solid rgba(var(--se-verde-rgb), .45);
  color: var(--se-verde-tinta);
  font-family: var(--se-fuente-mono);
  font-size: var(--se-fs-body);
  font-weight: 700;
  cursor: help;
}
.winner__beneficio small { font-family: var(--se-fuente); font-size: var(--se-fs-label); opacity: .85; }
.winner__beneficio.es-perdida { background: var(--se-error-tint); border-color: rgba(185, 28, 28, .35); color: var(--se-error); }

/* Lo máximo por venta en anuncios para quedarse un 20 % */
.winner__cpa {
  margin: 0;
  font-size: var(--se-fs-label);
  color: var(--se-tinta-2);
  cursor: help;
}
.winner__cpa b { font-family: var(--se-fuente-mono); color: var(--se-tinta); }
.winner__cpa.es-perdida b { color: var(--se-error); }

/* La tienda que lo vende */
.winner__tienda {
  display: flex;
  align-items: center;
  gap: var(--se-sp-2);
  margin-top: auto;
  padding-top: var(--se-sp-3);
  border-top: .8px dashed var(--se-linea-fuerte);
  min-width: 0;
}
.winner__tienda-foto {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--se-r-campo);
  overflow: hidden;
  background: var(--se-papel-hundido);
  border: .8px solid var(--se-linea);
  color: var(--se-tinta-3);
}
.winner__tienda-foto svg { width: 16px; height: 16px; }
.winner__tienda-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.winner__tienda-datos { display: flex; flex-direction: column; min-width: 0; }
.winner__tienda-datos b { font-size: var(--se-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winner__tienda-datos small { font-size: 11px; color: var(--se-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winner__tienda-datos a { color: var(--se-info); }
.winner__tienda-datos a:hover { text-decoration: underline; }

/* Las tres métricas de la tienda: tres fichas iguales, la cifra grande y
   debajo lo que la matiza (al mes, el ticket o hacia dónde van las visitas). */
.winner__metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}
.winner__metrica {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 9px 10px 8px;
  border-radius: var(--se-r-campo);
  background: var(--se-papel-hundido);
}
.winner__metrica dt {
  font-size: var(--se-fs-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--se-tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.winner__metrica dd {
  margin: 0;
  font-family: var(--se-fuente-mono);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--se-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.winner__metrica small {
  font-size: var(--se-fs-label);
  font-weight: 600;
  color: var(--se-tinta-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.winner__metrica.es-destacada { background: var(--se-verde-tint); }
.winner__metrica.es-destacada dt,
.winner__metrica.es-destacada dd,
.winner__metrica.es-destacada small { color: var(--se-verde-tinta); }

.winner__tendencia { font-weight: 700; }
.winner__tendencia.es-sube { color: var(--se-ok) !important; }
.winner__tendencia.es-baja { color: var(--se-error) !important; }

/* ---------- Acciones ---------- */

.winner__acciones {
  display: grid;
  /* Producto y tienda a medias; crear el anuncio, debajo y a todo el ancho:
     en tres columnas el botón principal no cabía en tarjetas estrechas. */
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: var(--se-sp-3) var(--se-sp-4) var(--se-sp-4);
}
.winner__acciones .ficha__btn { min-height: 36px; font-size: 12px; padding: 7px 10px; }
.winner__acciones .ficha__btn svg { width: 13px; height: 13px; }
.winner__acciones .btn { grid-column: 1 / -1; min-height: 38px; font-size: var(--se-fs-sm); }
.winner__acciones .btn svg { width: 14px; height: 14px; }

/* ---------- Esqueleto de carga ---------- */

.winner--esqueleto {
  min-height: 460px;
  border-style: dashed;
  box-shadow: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%) var(--se-papel-hundido);
  background-size: 250% 100%;
  animation: winner-brillo 1.3s linear infinite;
}
[data-tema="oscuro"] .winner--esqueleto {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .04) 50%, transparent 70%) var(--se-papel-hundido);
  background-size: 250% 100%;
}
@keyframes winner-brillo {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .winner, .winner--esqueleto, .winners-pulso { animation: none; }
  .winner:hover, .winner__foto:hover img { transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .wfiltros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--se-sp-3); }
  .wfiltro--buscar { grid-column: 1 / -1; }
  .winners { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .winner__cuerpo { padding: var(--se-sp-3) var(--se-sp-3) 0; }
  .winner__metrica { padding: 8px 7px; }
  .winner__metrica dd { font-size: 15px; }
  .winner__acciones { grid-template-columns: 1fr 1fr; padding: var(--se-sp-3); }
  .winner__acciones .btn { grid-column: 1 / -1; min-height: 44px; }
  .wfiltro__caja, .wfiltro__buscar .btn { height: 40px; }
}

/* El equivalente en dólares de un precio en otra moneda: acompaña, no compite. */
.winner__precio-usd {
  margin-left: 4px;
  font-family: var(--se-fuente);
  font-size: 12px;
  font-weight: 600;
  color: var(--se-tinta-3);
}


/* ---------- Proveedor en CJ ---------- */

/* Misma altura con proveedor, sin él o sin revisar: las filas no se descuadran. */
.winner__proveedor {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--se-sp-2);
  height: 56px;
  padding: 8px 10px;
  border-radius: var(--se-r-campo);
  background: var(--se-ok-tint);
  border: .8px solid rgba(22, 101, 52, .25);
}
.winner__proveedor.es-sin,
.winner__proveedor.es-pendiente {
  background: var(--se-papel-hundido);
  border-color: var(--se-linea);
}
.winner__proveedor-foto,
.winner__proveedor-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--se-r-sello);
  overflow: hidden;
  background: #fff;
  border: .8px solid var(--se-linea);
  color: var(--se-tinta-3);
}
.winner__proveedor-foto img { width: 100%; height: 100%; object-fit: cover; }
.winner__proveedor-foto svg, .winner__proveedor-icono svg { width: 16px; height: 16px; }
.winner__proveedor-icono { background: transparent; border-color: transparent; }
.winner__proveedor-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.winner__proveedor-texto b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--se-ok);
  white-space: nowrap;
}
.winner__proveedor-texto b svg { width: 12px; height: 12px; }
.winner__proveedor-texto a:hover b { text-decoration: underline; text-underline-offset: 2px; }
.winner__proveedor.es-sin .winner__proveedor-texto b,
.winner__proveedor.es-pendiente .winner__proveedor-texto b { color: var(--se-tinta-2); }
.winner__proveedor-texto small {
  font-family: var(--se-fuente-mono);
  font-size: 11px;
  color: var(--se-tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.winner__proveedor.es-sin small,
.winner__proveedor.es-pendiente small { font-family: var(--se-fuente); color: var(--se-tinta-3); }
.winner__proveedor-accion {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--se-info);
}
.winner__proveedor-accion svg { width: 11px; height: 11px; }

.winner__desglose-caja { flex: none; }
.winner__desglose-caja summary {
  padding: 3px 8px;
  border-radius: var(--se-r-pill);
  border: .8px solid var(--se-linea-fuerte);
  background: var(--se-papel);
  font-size: 11px;
  font-weight: 600;
  color: var(--se-tinta-2);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.winner__desglose-caja summary::-webkit-details-marker { display: none; }
.winner__desglose-caja[open] summary { border-color: var(--se-verde); color: var(--se-verde-tinta); }

/* El desglose flota encima: abierto dentro del flujo estiraba la tarjeta. */
.winner__calculo {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  width: min(300px, 100%);
  background: var(--se-papel);
  border: .8px solid var(--se-verde);
  border-radius: var(--se-r-campo);
  box-shadow: var(--se-sombra-suave);
}
.winner__desglose { display: grid; gap: 4px; margin: 0; padding: var(--se-sp-3) var(--se-sp-3) 0; }
.winner__desglose div { display: flex; justify-content: space-between; gap: var(--se-sp-2); font-size: 12px; }
.winner__desglose dt { color: var(--se-tinta-2); }
.winner__desglose dd { margin: 0; font-family: var(--se-fuente-mono); font-weight: 600; color: var(--se-tinta); white-space: nowrap; }
.winner__detalle { display: block; font-size: var(--se-fs-label); color: var(--se-tinta-3); }
.winner__desglose .winner__desglose-total { margin-top: 3px; padding-top: 6px; border-top: .8px solid var(--se-linea); font-weight: 700; }
.winner__desglose-total dt, .winner__desglose-total dd { color: var(--se-verde-tinta); }
.winner__nota { margin: 0; padding: var(--se-sp-2) var(--se-sp-3) var(--se-sp-3); font-size: var(--se-fs-label); line-height: 1.45; color: var(--se-tinta-3); }

.winners-resumen b.winners-resumen__cj { font-size: 13px; color: var(--se-ok); }