/* ============================================================
   SOCIOS ECOM — Tiendas ganadoras
   Estilos de la sección (assets/js/vistas/tiendasGanadoras.js).
   Los filtros reutilizan .wfiltros / .wfiltro de winners.css y la tabla
   parte de .tabla de app.css. Todo con tokens: el tema oscuro sale solo.
   ============================================================ */

/* ---------- Ancho de la hoja ----------
   Solo en esta sección (la vista pone y quita la clase): la tabla gana los
   márgenes vacíos que dejaba el tope de 1.240 px de las secciones anchas. */
.hoja__contenido.tg-hoja-ancha { max-width: 1760px; }

/* ---------- Filtros y barra de búsqueda ---------- */

.tg-filtros { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.tg-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--se-sp-2) var(--se-sp-3);
  margin-bottom: var(--se-sp-3);
}
.tg-buscar {
  flex: 1 1 260px;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  gap: 8px;
  cursor: text;
}
.tg-buscar__icono { display: grid; color: var(--se-tinta-3); }
.tg-buscar__icono svg { width: 16px; height: 16px; }
.tg-buscar input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--se-fs-body);
  color: var(--se-tinta);
  outline: none;
}
.tg-buscar input::placeholder { color: var(--se-tinta-3); }

/* «Ordenar por» en la barra: la etiqueta a la izquierda del desplegable */
.tg-orden { display: flex; align-items: center; gap: var(--se-sp-2); flex: 0 0 auto; }
.tg-orden__etiqueta { font-size: var(--se-fs-sm); font-weight: 600; color: var(--se-tinta-2); white-space: nowrap; }
.tg-orden .wfiltro__caja { height: 40px; min-width: 210px; }

/* El botón que abre y cierra el panel de filtros */
.tg-atajo {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--se-r-campo);
  border: 1px solid var(--se-linea-fuerte);
  background: var(--se-papel);
  color: var(--se-tinta-2);
  font-size: var(--se-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--se-trans), color var(--se-trans), border-color var(--se-trans);
}
.tg-atajo:hover { background: var(--se-papel-hundido); color: var(--se-tinta); }
.tg-plegar { display: inline-flex; align-items: center; gap: 6px; }
.tg-plegar svg { width: 15px; height: 15px; }
.tg-plegar[aria-expanded="true"] { background: var(--se-papel-hundido); color: var(--se-tinta); }
.tg-plegar__n {
  min-width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  padding: 0 5px;
  border-radius: var(--se-r-pill);
  background: var(--se-accion);
  color: var(--se-sobre-accion);
  font-size: var(--se-fs-label);
}
.tg-filtros[hidden] { display: none; }

/* ---------- Resumen y chips ---------- */

.tg-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--se-sp-2);
  min-height: 32px;
  margin-bottom: var(--se-sp-3);
}
.tg-resumen__cifra { margin: 0 var(--se-sp-2) 0 0; font-size: var(--se-fs-sm); }
.tg-resumen__cifra b { font-variant-numeric: tabular-nums; font-weight: 800; }
.tg-apagado { color: var(--se-tinta-3); }

.tg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--se-r-pill);
  border: .8px solid rgba(var(--se-verde-rgb), .45);
  background: var(--se-verde-tint);
  color: var(--se-verde-tinta);
  font-size: var(--se-fs-xs);
  font-weight: 700;
}
.tg-chip:hover { filter: brightness(.97); }
.tg-chip svg { width: 13px; height: 13px; }
.tg-chip__x { color: var(--se-tinta-3); font-size: 14px; line-height: 1; }

/* ---------- Tabla ---------- */

.tg-tabla-caja {
  overflow-x: auto;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
}
/* Las cifras tienen ancho fijo y la tienda se queda con el resto. El mínimo
   garantiza ~220 px al nombre: con la barra lateral de la plataforma, en un
   portátil la tabla se desplaza de lado antes que dejar el nombre en «pis…». */
.tg-tabla { min-width: 1130px; table-layout: fixed; }

.tg-tabla th { white-space: nowrap; }
.tg-tabla td { vertical-align: middle; padding: 10px 12px; }
.tg-col-tienda { width: auto; }
.tg-col-ingresos { width: 116px; }
.tg-col-visitas { width: 170px; }
.tg-col-ticket { width: 112px; }
.tg-col-productos { width: 140px; }
.tg-col-paises { width: 88px; }
.tg-col-facil { width: 120px; }
.tg-col-acciones { width: 128px; text-align: right; }

.tg-fila { cursor: pointer; height: 104px; }

/* Clonar, siempre a la vista. En un portátil la tabla se desplaza de lado y la
   última columna quedaba fuera: se queda pegada al borde derecho. Lleva fondo
   propio para que no se le transparente lo que pasa por debajo. */
.tg-tabla th.tg-col-acciones,
.tg-tabla td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--se-papel);
  border-left: .8px solid var(--se-linea-suave);
}
.tg-tabla th.tg-col-acciones { background: var(--se-papel-hundido); }
.tg-tabla tbody tr:hover td:last-child { background: var(--se-papel-hundido); }
.tg-fila:focus-visible { outline: 2px solid var(--se-verde); outline-offset: -2px; }

.tg-tienda { display: flex; align-items: center; gap: var(--se-sp-3); min-width: 0; }
.tg-tienda__foto {
  flex: none;
  width: 128px; height: 80px;
  overflow: hidden;
  border-radius: 6px;
  border: .8px solid var(--se-linea);
}
.tg-tienda__datos { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.tg-tienda__nombre {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 14px; font-weight: 700; color: var(--se-tinta);
}
.tg-tienda__nombre .etiqueta { flex: none; padding: 1px 6px; font-size: var(--se-fs-label); text-transform: none; }
.tg-etiqueta-ads { background: var(--se-info-tint); color: var(--se-info); }

.tg-recorte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-romper { overflow-wrap: anywhere; }
.tg-centrado { text-align: center; }

.tg-dominio {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px;
  color: var(--se-verde-tinta);
  text-decoration: none;
}
.tg-dominio:hover { text-decoration: underline; }
.tg-dominio svg { width: 12px; height: 12px; flex: none; }

.tg-sub { display: block; font-size: 11px; color: var(--se-tinta-3); line-height: 1.35; }

.tg-cifra {
  display: block;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--se-tinta);
}
.tg-cifra small { margin-left: 3px; font-size: 11px; font-weight: 600; color: var(--se-tinta-3); }
.tg-cifra--media { font-size: 14px; font-weight: 700; }
.tg-cifra--grande { font-size: 22px; font-weight: 800; line-height: 1; }

.tg-visitas { display: flex; align-items: center; gap: var(--se-sp-3); }
.tg-visitas > span { flex: none; min-width: 52px; }
.tg-curva { display: block; }

.tg-variacion {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--se-fs-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tg-variacion--sube { background: var(--se-verde-tint); color: var(--se-verde-tinta); }
.tg-variacion--baja { background: var(--se-error-tint); color: var(--se-error); }

.tg-productos { display: block; white-space: nowrap; font-size: 12px; color: var(--se-tinta-2); }
.tg-productos b { font-size: 13px; color: var(--se-tinta); font-variant-numeric: tabular-nums; }
.tg-un-producto { margin-left: 5px; font-weight: 700; color: var(--se-verde-tinta); }

.tg-minis { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 5px; }
.tg-minis img {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: 5px;
  border: .8px solid var(--se-linea);
  background: var(--se-papel-hundido);
}

.tg-paises { display: flex; flex-direction: column; gap: 3px; }
.tg-pais {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--se-tinta-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tg-bandera {
  display: inline-block;
  flex: none;
  width: 20px; height: 15px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 .8px var(--se-linea);
  vertical-align: -2px;
}
.tg-bandera--mundo { display: inline-grid; place-items: center; box-shadow: none; color: var(--se-tinta-3); }
.tg-bandera--mundo svg { width: 15px; height: 15px; }
.tg-mas-paises {
  width: fit-content;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--se-papel-hundido);
  color: var(--se-tinta-3);
  font-size: var(--se-fs-label);
  font-weight: 700;
}

.tg-facil { display: flex; align-items: center; gap: var(--se-sp-2); }
.tg-facil .tg-progreso { width: 60px; flex: none; }
.tg-facil b { width: 28px; text-align: right; font-size: var(--se-fs-sm); font-variant-numeric: tabular-nums; }

.tg-progreso {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--se-r-pill);
  background: var(--se-control-fondo);
}
.tg-progreso__fill { display: block; height: 100%; border-radius: inherit; transition: width .7s var(--se-salida); }
.tg-tono--verde { background: var(--se-verde); }
.tg-tono--dorado { background: var(--se-dorado); }
.tg-tono--gris { background: var(--se-linea-fuerte); }

.tg-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tg-btn-clonar { padding: 8px 12px; }

.tg-icono {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea-fuerte);
  background: var(--se-papel);
  color: var(--se-tinta-2);
  transition: background var(--se-trans), color var(--se-trans);
}
.tg-icono:hover { background: var(--se-papel-hundido); color: var(--se-tinta); }
.tg-icono svg { width: 16px; height: 16px; }

/* ---------- Esqueleto ---------- */

@keyframes tg-latido { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.tg-esqueleto td { height: 104px; }
.tg-sk {
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  background: var(--se-papel-hundido);
  animation: tg-latido 1.4s ease-in-out infinite;
}
.tg-sk--foto { width: 128px; height: 80px; margin-right: 12px; border-radius: 6px; }
.tg-sk--linea { width: 45%; height: 12px; }
.tg-sk--corta { width: 60%; height: 12px; }

/* ---------- Foto de la tienda ---------- */

.tg-portada {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--se-papel-hundido);
}
.tg-portada:not(.es-cargada):not(.es-vacia) { animation: tg-latido 1.4s ease-in-out infinite; }
.tg-portada img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity .4s ease, transform .5s var(--se-salida);
}
.tg-portada.es-cargada img { opacity: 1; }
.tg-fila:hover .tg-portada img, .tg-tarjeta:hover .tg-portada img { transform: scale(1.05); }

/* ---------- Tarjetas (móvil) ---------- */

.tg-tarjetas { display: none; gap: var(--se-sp-3); }
.tg-tarjeta {
  overflow: hidden;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: var(--se-sombra-papel);
  cursor: pointer;
}
.tg-tarjeta__cabeza { display: flex; gap: var(--se-sp-3); padding: var(--se-sp-3); }
.tg-tarjeta__foto {
  flex: none;
  width: 96px; height: 64px;
  overflow: hidden;
  border-radius: 6px;
  border: .8px solid var(--se-linea);
}
.tg-tarjeta__datos { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.tg-tarjeta__cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: .8px solid var(--se-linea);
  border-bottom: .8px solid var(--se-linea);
}
.tg-tarjeta__cifras span { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; }
.tg-tarjeta__cifras span + span { border-left: .8px solid var(--se-linea); }
.tg-tarjeta__cifras b { font-size: var(--se-fs-body); font-variant-numeric: tabular-nums; }
.tg-tarjeta__cifras small { font-size: var(--se-fs-xs); text-transform: none; letter-spacing: 0; color: var(--se-tinta-3);
  font-weight: 600;
}
.tg-tarjeta__pie { padding: var(--se-sp-3); }
.tg-tarjeta__pie .btn { min-height: 46px; }
.tg-tarjeta__pie .tg-sub { margin-top: 6px; }

/* ---------- Ver más y notas ---------- */

.tg-mas { display: grid; justify-items: center; gap: var(--se-sp-2); margin-top: var(--se-sp-6); }
.tg-mas:empty { display: none; }
.tg-nota { margin: var(--se-sp-5) 0 0; font-size: 11px; line-height: 1.5; color: var(--se-tinta-3); }
.tg-explica { margin: 8px 0 0; }
.tg-aviso-error {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: var(--se-r-campo);
  background: var(--se-error-tint);
  color: var(--se-error);
  font-size: 12px;
}

/* ---------- Capas: velo, ficha lateral y modal ---------- */

body.tg-sin-scroll { overflow: hidden; }

@keyframes tg-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes tg-entra-lado { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes tg-entra-centro { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.tg-capa { position: fixed; inset: 0; z-index: var(--se-z-drawer); display: flex; overflow: hidden; }
.tg-capa--clonar { z-index: var(--se-z-modal); align-items: center; justify-content: center; padding: var(--se-sp-3); }
.tg-capa--ficha { justify-content: flex-end; }
.tg-capa__velo {
  position: absolute; inset: 0;
  background: rgba(10, 12, 11, .6);
  backdrop-filter: blur(2px);
  animation: tg-velo .25s ease both;
}

.tg-ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--se-papel-calido);
  border-left: .8px solid var(--se-linea);
  box-shadow: -30px 0 70px -30px rgba(0, 0, 0, .7);
  animation: tg-entra-lado .32s var(--se-salida) both;
}
.tg-ficha__portada { position: relative; flex: none; aspect-ratio: 16 / 9; }
.tg-ficha__cerrar {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  color: var(--se-tinta);
  box-shadow: var(--se-sombra-suave);
}
.tg-ficha__cerrar svg { width: 16px; height: 16px; }
.tg-ficha__identidad { padding: var(--se-sp-4) var(--se-sp-5); border-bottom: .8px solid var(--se-linea); }
.tg-ficha__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--se-sp-2); }
.tg-ficha__nombre {
  margin: 0;
  font-family: var(--se-fuente-display);
  font-size: var(--se-fs-h2);
  line-height: 1.15;
  letter-spacing: var(--se-tracking-display);
}
.tg-ficha__cuerpo { display: flex; flex-direction: column; gap: var(--se-sp-5); padding: var(--se-sp-5); }
.tg-ficha__descripcion { margin: 0; font-size: var(--se-fs-sm); line-height: var(--se-lh-normal); color: var(--se-tinta-2); }
.tg-ficha__pie {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: var(--se-sp-4);
  background: var(--se-papel);
  border-top: .8px solid var(--se-linea);
}
.tg-ficha__pie .tg-sub { margin-top: 6px; }
.tg-btn-grande { min-height: 46px; font-size: 14px; }

.tg-metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tg-metrica {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
}
.tg-metrica b { font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tg-metrica small {
  font-family: var(--se-fuente);
  font-size: var(--se-fs-xs); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--se-tinta-3);
}
.tg-metrica--destacada { background: var(--se-verde-tint); border-color: rgba(var(--se-verde-rgb), .4); }

.tg-lectura {
  display: flex; flex-direction: column; gap: var(--se-sp-3);
  padding: var(--se-sp-4);
  background: var(--se-verde-tint);
  border: .8px solid rgba(var(--se-verde-rgb), .4);
  border-radius: var(--se-r-card);
}
.tg-lectura__titulo {
  display: flex; align-items: center; gap: 6px;
  margin: 0;
  font-family: var(--se-fuente);
  font-size: var(--se-fs-xs); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--se-verde-tinta);
}
.tg-lectura__titulo svg { width: 14px; height: 14px; }
.tg-lectura__texto { margin: 0; font-size: 12px; line-height: 1.55; color: var(--se-tinta-2); }
.tg-lectura__texto b { color: var(--se-tinta); }

.tg-indicador { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; }
.tg-indicador span { font-size: 11px; font-weight: 600; color: var(--se-tinta-2); }
.tg-indicador b { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tg-indicador .tg-progreso { grid-column: 1 / -1; }

.tg-bloque { display: flex; flex-direction: column; gap: 10px; }
.tg-bloque__titulo {
  margin: 0;
  font-family: var(--se-fuente);
  font-size: var(--se-fs-xs); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--se-tinta-3);
}

.tg-caja {
  padding: var(--se-sp-4);
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
}
.tg-caja--datos { padding-top: 4px; padding-bottom: 4px; }
.tg-caja__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tg-caja__cabeza .tg-sub { margin-top: 4px; }
.tg-caja__nota {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: .8px solid var(--se-linea);
  font-size: var(--se-fs-xs);
  color: var(--se-tinta-2);
}
.tg-bloque > div > .tg-caja__nota:first-child { margin: 0; padding: 10px 12px; border: 0; border-radius: var(--se-r-campo); background: var(--se-papel-hundido); }

.tg-meses { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--se-fs-label); color: var(--se-tinta-3); }

.tg-barras { display: flex; flex-direction: column; gap: 8px; }
.tg-barras__fila { display: grid; grid-template-columns: 104px 1fr 50px; align-items: center; gap: 10px; font-size: var(--se-fs-xs); color: var(--se-tinta-2); }
.tg-barras__fila .tg-progreso { height: 8px; }
.tg-barras__fila b { text-align: right; color: var(--se-tinta); font-variant-numeric: tabular-nums; }

.tg-columnas { display: flex; align-items: flex-end; gap: 8px; height: 100px; }
.tg-columnas__col { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 5px; }
.tg-columnas__col b { font-size: var(--se-fs-label); color: var(--se-tinta-2); font-variant-numeric: tabular-nums; }
.tg-columnas__barra { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--se-verde); }
.tg-columnas__barra.es-cero { opacity: .25; }
.tg-columnas__col small { font-size: var(--se-fs-label); line-height: 1.15; text-align: center; color: var(--se-tinta-3); }

.tg-minidatos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 12px; padding-top: 12px;
  border-top: .8px solid var(--se-linea);
  text-align: center;
}
.tg-minidatos b { display: block; font-size: var(--se-fs-body); font-variant-numeric: tabular-nums; }
.tg-minidatos small { font-size: var(--se-fs-xs); text-transform: none; letter-spacing: 0; color: var(--se-tinta-3);
  font-weight: 600;
}

.tg-estrellas { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.tg-estrella {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  color: var(--se-tinta);
  font-size: 12px;
  text-decoration: none;
}
a.tg-estrella:hover { background: var(--se-papel-hundido); }
.tg-estrella img { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: 6px; border: .8px solid var(--se-linea); }
.tg-estrella .tg-recorte { flex: 1; }
.tg-estrella b { font-size: var(--se-fs-sm); font-variant-numeric: tabular-nums; }

.tg-dato {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 8px 0;
  border-bottom: .8px solid var(--se-linea-suave);
  font-size: var(--se-fs-sm);
}
.tg-dato:last-child { border-bottom: 0; }
.tg-dato span { color: var(--se-tinta-3); }
.tg-dato b { text-align: right; font-weight: 600; }

.tg-pildoras { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-pildora {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: var(--se-r-campo);
  border: .8px solid var(--se-linea);
  background: var(--se-papel);
  color: var(--se-tinta);
  font-size: var(--se-fs-xs); font-weight: 600;
  text-decoration: none;
}
a.tg-pildora:hover { background: var(--se-papel-hundido); }
.tg-pildora b { color: var(--se-verde-tinta); font-variant-numeric: tabular-nums; }
.tg-pildora svg { width: 12px; height: 12px; color: var(--se-tinta-3); }
.tg-pildora img { width: 14px; height: 14px; border-radius: 3px; }
.tg-pildora--quieta { font-weight: 500; }

.tg-anuncios__cabeza { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 10px; }
.tg-creativos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tg-creativo {
  display: grid; place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--se-r-card);
  border: .8px solid var(--se-linea);
  background: var(--se-papel-hundido);
  font-size: var(--se-fs-label);
  color: var(--se-tinta-3);
}
.tg-creativo img { width: 100%; height: 100%; object-fit: cover; }

.tg-enlaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tg-enlaces .btn svg { width: 13px; height: 13px; }

/* Modal de clonado */
.tg-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(88vh, 900px);
  overflow: hidden;
  background: var(--se-papel);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-card);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
  animation: tg-entra-centro .25s var(--se-salida) both;
}
.tg-modal > div { display: flex; flex-direction: column; min-height: 0; }
.tg-modal__cabeza {
  display: flex; align-items: center; gap: var(--se-sp-3);
  padding: var(--se-sp-3) var(--se-sp-4);
  border-bottom: .8px solid var(--se-linea);
}
.tg-modal__foto {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  flex: none;
  overflow: hidden;
  border-radius: 6px;
  background: var(--se-verde-tint);
  color: var(--se-verde-tinta);
}
.tg-modal__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tg-modal__foto svg { width: 20px; height: 20px; }
.tg-modal__titulos { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tg-modal__titulos b { font-size: 16px; }

.tg-modal__espera {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 64px var(--se-sp-6);
  text-align: center;
}
.tg-modal__espera b { font-size: 16px; }
.tg-modal__espera .tg-sub { max-width: 360px; font-size: 13px; }

@keyframes tg-gira { to { transform: rotate(360deg); } }
.tg-giro {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid var(--se-verde-tint);
  border-top-color: var(--se-verde);
  animation: tg-gira .9s linear infinite;
}

.tg-modal__cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--se-sp-4); }
.tg-pide {
  margin: 0 0 var(--se-sp-3);
  padding: 12px 14px 12px 30px;
  background: var(--se-papel-hundido);
  border-radius: var(--se-r-campo);
  font-size: var(--se-fs-sm);
  line-height: 1.6;
  color: var(--se-tinta-2);
}
.tg-pide b { color: var(--se-tinta); }

.tg-prompt {
  padding: var(--se-sp-4);
  background: var(--se-papel-calido);
  border: .8px solid var(--se-linea);
  border-radius: var(--se-r-campo);
  font-family: var(--se-fuente-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--se-tinta-2);
}
.tg-prompt__linea { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.tg-prompt__titulo {
  display: block;
  margin: 14px 0 4px;
  padding-left: 8px;
  border-left: 2px solid var(--se-verde);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--se-verde-tinta);
}
.tg-prompt__titulo:first-child { margin-top: 0; }

.tg-modal__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--se-sp-3);
  padding: var(--se-sp-3) var(--se-sp-4);
  border-top: .8px solid var(--se-linea);
  background: var(--se-papel);
}
.tg-modal__paso { flex: 1 1 220px; margin: 0; font-size: 13px; }
.tg-modal__botones { display: flex; flex: 1 1 360px; gap: var(--se-sp-2); }
.tg-modal__botones .btn { flex: 1; }

/* ---------- Por ancho de pantalla ----------
   Al final a propósito: si van antes, las reglas base de más arriba los pisan. */

/* Con la hoja ancha, el sitio de sobra no se lo queda todo el nombre de la
   tienda (con 660 px quedaba media fila vacía): las cifras respiran también. */
/* A 1600 px la tabla aún mide ~1300: si las cifras se ensanchan ahí, a la tienda
   le quedan 190 px y los nombres salen en «N…». Desde 1800 ya sobra sitio. */
@media (min-width: 1800px) {
  .tg-col-ingresos { width: 150px; }
  .tg-col-visitas { width: 220px; }
  .tg-col-ticket { width: 140px; }
  .tg-col-productos { width: 170px; }
  .tg-col-paises { width: 120px; }
  .tg-col-facil { width: 160px; }
  .tg-col-acciones { width: 150px; }
  .tg-facil .tg-progreso { width: 90px; }
}

/* En portátil no caben las ocho columnas con las fotos grandes: la tabla se
   desplazaba y la columna fija de Clonar tapaba Países y Fácil de copiar. Se
   quita Ticket medio, que es la menos necesaria y sale en la ficha, y la foto
   baja un punto. Así cabe todo sin desplazar. */
@media (max-width: 1499px) {
  .tg-tabla { min-width: 940px; }
  .tg-tabla th.tg-col-ticket,
  .tg-tabla td:nth-child(4) { display: none; }
  .tg-col-ingresos { width: 104px; }
  .tg-col-visitas { width: 140px; }
  .tg-col-productos { width: 124px; }
  .tg-col-paises { width: 80px; }
  .tg-col-facil { width: 96px; }
  .tg-col-acciones { width: 116px; }
  .tg-tienda__foto, .tg-sk--foto { width: 104px; height: 65px; }
  .tg-minis img { width: 30px; height: 30px; }
  .tg-facil .tg-progreso { width: 40px; }
}

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 767px) {
  .tg-tabla-caja { display: none; }
  .tg-tarjetas { display: grid; }
  .tg-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-buscar { flex: 1 1 100%; }
  .tg-orden { flex: 1 1 auto; min-width: 0; }
  .tg-orden .wfiltro__caja { flex: 1; min-width: 0; }
  .tg-atajo { flex: 0 0 auto; }
  .tg-capa--clonar { padding: 0; align-items: stretch; }
  .tg-modal { max-height: none; height: 100%; border-radius: 0; }
  .tg-modal__botones { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .tg-capa__velo, .tg-ficha, .tg-modal, .tg-sk, .tg-portada, .tg-giro { animation: none !important; }
  .tg-portada img, .tg-progreso__fill { transition: none; }
}