@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────────────────
   Ficha de oferta agrupada POR SEDE (x-product-descriptionFlying-group).
   Complementa a internalcircos.css, que es la que trae el sistema de
   tarjetas, steppers, resumen y botones de las ofertas agrupadas: aquí solo
   van los bloques propios del paso "Elige tu sede".
   Los var(--token, valor) llevan respaldo por si esta hoja se cargara sola.
   ───────────────────────────────────────────────────────────────────────── */
.container__main_product_offerGroup {
  /* Paso 1: grilla de sedes */
  /* Una sola columna a propósito: el widget vive en una columna estrecha
     (~380px en escritorio) y a dos columnas los nombres de sede se parten. */
  /* El check solo aparece en la sede elegida: marca la selección sin mover
     el resto de la tarjeta (por eso ocupa su espacio con visibility). */
  /* Paso 2: entradas de la sede elegida (sin acordeón: ya hay una sola sede) */
  /* Agregar al carrito, solo ícono -----------------------------------------
     Reparto 25/75 con "Comprar". Se hace con flex-grow 1 y 3 en vez de anchos
     de 25% y 75%: los porcentajes no descuentan el gap de la fila y la suma se
     pasaría del ancho disponible. Con los pesos, el gap se reparte solo y la
     proporción se respeta a cualquier ancho de columna.

     La altura NO se toca: tiene que seguir alineado con "Comprar", que va al
     lado. Bajarle el alto lo dejaría flotando y rompería la fila.

     Va en esta hoja y no en internalcircos porque las dos fichas agrupadas
     comparten el marcado, pero internalflying.css solo se carga cuando
     $is_sede_group es true: así circos conserva su botón con texto. */
}
.container__main_product_offerGroup .sede-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.container__main_product_offerGroup .sede-card {
  align-items: center;
  background: var(--white, #FFFFFF);
  border: 1.5px solid var(--line, #E7E2DC);
  border-radius: var(--radius-sm, 9px);
  display: flex;
  gap: 10px;
  padding: 12px;
  text-align: left;
  transition: 0.15s;
  width: 100%;
}
.container__main_product_offerGroup .sede-card:hover:not(:disabled) {
  border-color: var(--orange, #FA6702);
}
.container__main_product_offerGroup .sede-card.selected {
  background: var(--orange-tint, #FFF0E4);
  border-color: var(--orange, #FA6702);
  box-shadow: inset 0 0 0 1px var(--orange, #FA6702);
}
.container__main_product_offerGroup .sede-card.sold-out {
  cursor: not-allowed;
  opacity: 0.55;
}
.container__main_product_offerGroup .sede-icon {
  align-items: center;
  background: var(--orange-tint, #FFF0E4);
  border-radius: 50%;
  color: var(--orange-dark, #DE5800);
  display: flex;
  flex: none;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.container__main_product_offerGroup .sede-icon svg {
  display: block;
  height: 17px;
  width: 17px;
}
.container__main_product_offerGroup .sede-info {
  flex: 1;
  min-width: 0;
}
.container__main_product_offerGroup .sede-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.container__main_product_offerGroup .sede-price {
  color: var(--ink-soft, #6E6862);
  font-size: 12.5px;
}
.container__main_product_offerGroup .sede-check {
  align-items: center;
  color: var(--orange, #FA6702);
  display: flex;
  flex: none;
  height: 18px;
  visibility: hidden;
  width: 18px;
}
.container__main_product_offerGroup .sede-check svg {
  display: block;
  height: 100%;
  width: 100%;
}
.container__main_product_offerGroup .sede-card.selected .sede-check {
  visibility: visible;
}
.container__main_product_offerGroup .sede-empty {
  color: var(--ink-soft, #6E6862);
  font-size: 12.5px;
  margin: 0;
}
.container__main_product_offerGroup .ticket-list {
  border: 1.5px solid var(--line, #E7E2DC);
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
}
.container__main_product_offerGroup .ticket-list .ticket-row {
  background: var(--white, #FFFFFF);
}
.container__main_product_offerGroup .ticket-list .ticket-row.sold-out {
  background: var(--bg, #F5F5F5);
  opacity: 0.7;
}
.container__main_product_offerGroup .ticket-soldout {
  color: var(--ink-soft, #6E6862);
  flex: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.container__main_product_offerGroup .tickets-empty {
  border: 1.5px dashed var(--line-strong, #D8D1C8);
  border-radius: var(--radius-md, 14px);
  background: var(--bg, #F5F5F5);
  color: var(--ink-soft, #6E6862);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  padding: 14px 16px;
}
.container__main_product_offerGroup .summary-actions .btn_circos.btn-icon {
  flex: 1 1 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.container__main_product_offerGroup .summary-actions #buyBtn {
  flex: 3 1 0;
}
.container__main_product_offerGroup .summary-actions .btn_circos.btn-icon svg {
  width: 22px;
  height: 22px;
}

/* La misma fila, ya dentro de la barra fija de móvil ------------------------
   En ≤768px, internal.js MUEVE #div_hijo desde la columna derecha hacia
   #div_footer (moverDivHijo). O sea que la tarjeta deja de estar dentro de
   .container__main_product_offerGroup y las reglas de arriba dejan de
   alcanzarla: hay que repetir el reparto con el selector de la barra.

   El .btn-icon del selector no es decorativo: esa clase solo existe en la ficha
   de sedes, así que aunque #div_footer lo compartan las dos fichas agrupadas,
   esto no puede tocar la de circos. */
@media (max-width: 768px) {
  .sidebar__mobile #div_footer .summary-actions .btn_circos.btn-icon {
    flex: 1 1 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar__mobile #div_footer .summary-actions #buyBtn {
    flex: 3 1 0;
  }
  /* Ícono un punto más chico que en escritorio: la barra es más baja */
  .sidebar__mobile #div_footer .summary-actions .btn_circos.btn-icon svg {
    width: 18px;
    height: 18px;
  }
}