/**
 * Europa 3G Barcelona · Selector de modelos de las landings de categoría.
 *
 * Hoja propia y NO `custom.css`, por la misma razón que `megamenu.css` (ver el
 * comentario del `config/theme.yml`): PrestaShop sirve `custom.css` sin versión
 * en la URL y con `max-age=604800`, así que un cambio allí tarda hasta 7 días en
 * llegar a quien ya haya pasado por la web. Y además `custom.css` lo reescribe
 * el personalizador del tema: el 2026-09-05 se llevó por delante este bloque
 * entero y dejó las 19 landings sin estilos, porque sus `<style>` ya no lo
 * traían.
 *
 * La declara `config/theme.yml` con priority 1100, por detrás del 1000 con el
 * que el core registra `custom.css`.
 */

/* -----------------------------------------------------------------------------
 * §SELECTOR DE MODELOS — «Selecciona el modelo de tu …». Bloque ÚNICO de todas
 * las landings de categoría.
 *
 * Portado del theme de PrestaShop 9, con la paleta de Barcelona. Antes cada
 * plantilla traía el suyo: acordeones plegables con `series-header`/`series-toggle`
 * (iPhone, iPad, Xiaomi, Motorola, Oppo, Realme, Samsung Tab), un carrusel con
 * `models-track` (LG), pastillas (Samsung, Huawei, Honor, Pixel, Surface…) y
 * rejillas planas sin agrupar (Honor Pad, Lenovo Tab, MacBook). Cuatro
 * maquetaciones, veintitrés copias del CSS y una función `toggleSeries` distinta
 * repetida en cada `<style>`.
 *
 * Las reglas viven SÓLO aquí; las plantillas ya no declaran nada de `.models-*`,
 * `.series-*` ni `.model-*` dentro del selector. Si reaparece una copia en un
 * `<style>` de plantilla pisará a ésta en silencio: no las devuelvas.
 *
 * TODO cuelga de `.e3g-model-selector`, y es obligatorio: `models-section`,
 * `models-title`, `models-grid` y `series-badge` son nombres que también usan
 * las categorías 6307/6308/6309 (índices de enlaces de texto) y la 736
 * (variantes del Watch GT2) con OTRO significado. Sin el ámbito, este bloque les
 * cambiaría el diseño a plantillas que no participan de la unificación.
 *
 * `.e3g-model-selector` es además el ámbito del JS (delegación en `document`,
 * en `assets/js/custom.js`): sin esa clase las pastillas no hacen nada.
 * -------------------------------------------------------------------------- */
.e3g-model-selector {
  padding: 20px 0 40px 0;
  background: var(--europa-white);
}

.e3g-model-selector .models-content {
  margin: 0 auto;
}

.e3g-model-selector .models-not-found-cta {
  text-align: center;
  margin-bottom: 1.5rem;
}

.e3g-model-selector .models-not-found-cta p {
  display: inline-block;
  margin: 0;
  font-size: 0.95rem;
  color: var(--europa-dark);
  background: #f8f9fa;
  border-radius: 25px;
  padding: 0.6rem 1.25rem;
  border: 1px solid #dee2e6;
}

/* Verde oscuro de WhatsApp: el claro de la marca (#25D366) no llega a AA como
   texto sobre el gris de la pastilla. */
.e3g-model-selector .whatsapp-link {
  color: #128C7E;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

.e3g-model-selector .whatsapp-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.e3g-model-selector .whatsapp-link i {
  margin-right: 0.25rem;
}

.e3g-model-selector .models-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: var(--europa-dark);
  margin-bottom: 3rem;
}

/* Sólo la traen las plantillas que declaran `$selector_intro`. Si hay
   subtítulo, el margen grande lo pone él y no el encabezado. */
.e3g-model-selector .models-intro {
  text-align: center;
  max-width: 720px;
  margin: -2rem auto 3rem;
  color: var(--europa-dark);
}

.e3g-model-selector .models-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--europa-white);
  border-radius: 16px;
}

.e3g-model-selector .series-badges-wrapper {
  width: 100%;
  position: relative;
}

.e3g-model-selector .series-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* La pastilla inactiva se distingue por opacidad, no por otro color. */
.e3g-model-selector .series-badge {
  padding: 10px 20px;
  background: var(--europa-primary);
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--europa-white);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  opacity: 0.7;
  line-height: 1rem;
}

.e3g-model-selector .series-badge:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.e3g-model-selector .series-badge.active {
  opacity: 1;
}

.e3g-model-selector .e3g-series-container {
  margin-top: 1.5rem;
}

.e3g-model-selector .e3g-series {
  display: none;
}

.e3g-model-selector .e3g-series.active {
  display: block;
}

/* `auto-fit` + un ancho MÁXIMO, no `1fr`: es lo que centra las filas que no se
   llenan. Con `auto-fill` y `1fr` —lo que había en las 23 plantillas— las
   columnas sobrantes se crean igual y estiran la tarjeta hasta llenar la fila,
   así que una serie de dos o tres modelos quedaba pegada a la izquierda con
   cientos de píxeles de hueco a la derecha. `auto-fit` colapsa esas columnas y
   `justify-content: center` reparte el sobrante a los dos lados.

   El tope de 200 px además fija el ancho de la tarjeta, que antes variaba con
   el ancho de la ventana. */
.e3g-model-selector .series-models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 200px));
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

.e3g-model-selector .model-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: var(--europa-white);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.e3g-model-selector .model-card:hover {
  border-color: var(--europa-dark);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Las tarjetas ofuscadas (`.datatext`) son `<span>`, no `<a>`: el puntero lo
   tiene que poner el CSS. */
.e3g-model-selector .model-card.datatext {
  cursor: pointer;
}

.e3g-model-selector .model-image {
  width: 100%;
  margin-bottom: 1rem;
}

.e3g-model-selector .model-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* Hueco del mismo tamaño que la miniatura para las subcategorías sin imagen:
   así la rejilla no se descuadra y la tarjeta sigue siendo utilizable. */
.e3g-model-selector .model-image-empty {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #f8f9fa;
}

.e3g-model-selector .model-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--europa-dark);
  text-align: center;
  line-height: 1.3;
}

@media (max-width: 992px) {
  .e3g-model-selector .series-badges {
    gap: 0.75rem;
  }

  .e3g-model-selector .series-badge {
    padding: 10px 20px;
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  .e3g-model-selector .models-title {
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }

  .e3g-model-selector .models-intro {
    margin: -1.25rem auto 2rem;
  }

  .e3g-model-selector .series-badge {
    padding: 12px 24px;
    font-size: 1rem;
  }

  /* En tablet NO se baja a dos columnas: a 768 px caben tres holgadas y
     `repeat(2, 1fr)` disparaba la tarjeta a casi el doble que en escritorio. */
  .e3g-model-selector .series-models {
    grid-template-columns: repeat(auto-fit, minmax(150px, 180px));
    gap: 1rem;
  }

  .e3g-model-selector .model-card {
    padding: 1rem;
  }

  .e3g-model-selector .model-name {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .e3g-model-selector .series-badges {
    gap: 0.5rem;
  }

  .e3g-model-selector .series-badge {
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  /* En móvil sí se llena el ancho: con dos tarjetas por fila no sobra nada que
     centrar, y estirarlas aprovecha mejor la pantalla. */
  .e3g-model-selector .series-models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0.75rem;
  }

  .e3g-model-selector .model-card {
    padding: 0.75rem;
  }

  .e3g-model-selector .model-name {
    font-size: 0.8rem;
  }
}