/* widgets/base.css — reglas COMUNES de los widgets de bsport para cualquier plantilla.
   Puente de variables (bloque 1) VERIFICADO con un widget real (Yoga Brú, 12-oct-2026).
   El resto de reglas por clase es del borrador del 9-oct; ver widgets/REFERENCIA.md.

   Uso en la web:
     <link rel="stylesheet" href="widgets/base.css">
     <link rel="stylesheet" href="widgets/<plantilla>.css">      (sol | raiz | bosque | marea)
     <div class="bsport-scope tpl-<plantilla>"> …widget… </div>

   Aquí NO hay colores ni fuentes sueltas: todo sale de las variables --w-*,
   que define la hoja de la plantilla y se sobrescriben con la marca del estudio. */

/* 1) PUENTE DE VARIABLES — lo que de verdad cambia el widget (verificado 12-oct-2026 con el widget real de Yoga Brú).
   bsport pinta todo con reglas "[id*=bsport-widget] .cleanslate .bs-… { … !important }" que usan variables.
   Esas variables las inyecta el propio widget en dos sitios, y hay que ganarles con más especificidad:
     · .bs-setup-variable { --color-*, --fontFamily, --border-* }            → lo pisamos con .bsport-scope .bs-setup-variable
     · #bs-setup-derived-variable { --h1…h6-fontFamily, --body1/2-, --button-… } → lo pisamos con .bsport-scope #bs-setup-derived-variable
   Ojo: --color-grey-main es el TEXTO secundario (no el color de las líneas). */
.bsport-scope,
.bsport-scope .bs-setup-variable{
  --color-primary-main:var(--w-accent);
  --color-primary-dark:var(--w-accent-hover);
  --color-primary-light:var(--w-soft);
  --color-primary-contrastText:var(--w-accent-ink);
  --color-secondary-main:var(--w-ink-weak);
  --color-secondary-dark:var(--w-ink);
  --color-secondary-light:var(--w-soft);
  --color-secondary-contrastText:var(--w-surface);
  --color-background-paper:var(--w-surface);
  --color-secondary-background-paper:var(--w-surface);
  --color-grey-main:var(--w-ink-weak);
  --color-grey-dark:var(--w-ink);
  --fontFamily:var(--w-font-body);
  --border-color:var(--w-line);
  --bs-color-text-default:var(--w-ink);
  --bs-color-text-weak:var(--w-ink-weak);
  --bs-color-border-weak:var(--w-line);
  --border-radius-1:var(--w-r-small);
}
.bsport-scope #bs-setup-derived-variable{
  --h1-fontFamily:var(--w-font-title);--h2-fontFamily:var(--w-font-title);--h3-fontFamily:var(--w-font-title);
  --h4-fontFamily:var(--w-font-title);--h5-fontFamily:var(--w-font-title);--h6-fontFamily:var(--w-font-title);
  --subtitle1-fontFamily:var(--w-font-body);--subtitle2-fontFamily:var(--w-font-body);
  --body1-fontFamily:var(--w-font-body);--body2-fontFamily:var(--w-font-body);
  --button-fontFamily:var(--w-font-body);--caption-fontFamily:var(--w-font-body);--overline-fontFamily:var(--w-font-body);
}
/* Las reglas por clase de abajo NO ganan a los !important de bsport en todo: el ajuste principal son las variables de arriba. */

.bsport-scope{
  min-width:0; max-width:100%;           /* dentro de rejillas/flex de la plantilla: nunca ensancha la página */
  contain:inline-size;                   /* el widget no aporta ancho propio (sus filtros/fechas en línea son muy anchos): ocupa el de su contenedor */
  min-height:420px;                      /* reserva altura: sin saltos al cargar */
  font-family:var(--w-font-body);
  color:var(--w-ink);
  -webkit-font-smoothing:antialiased;
}

/* 2) Botones (reservar, comprar, suscribirse, lista de espera) */
.bsport-scope .bs-book-button-card,
.bsport-scope .bs-fabrique-button-root-contained{
  background:var(--w-btn-bg);
  color:var(--w-btn-fg);
  border:1px solid var(--w-btn-border,transparent);
  border-radius:var(--w-r-btn);
  font:var(--w-btn-font);
  letter-spacing:var(--w-btn-tracking,0);
  text-transform:var(--w-btn-case,none);
  min-height:44px;                       /* táctil cómodo en móvil */
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.bsport-scope .bs-book-button-card:hover,
.bsport-scope .bs-fabrique-button-root-contained:hover{
  background:var(--w-btn-bg-hover);
  color:var(--w-btn-fg-hover);
}
.bsport-scope .bs-book-button-card--booked:hover{background:var(--w-ink);color:var(--w-bg)}
.bsport-scope .bs-book-button-card--disabled,
.bsport-scope .bs-book-button-card--disabled:hover{
  background:transparent;color:var(--w-ink-weak);border:1px solid var(--w-line);
}
.bsport-scope .bs-fabrique-button-root-outlined{
  background:transparent;color:var(--w-ink);
  border:1px solid var(--w-ink);border-radius:var(--w-r-btn);
  font:var(--w-btn-font);letter-spacing:var(--w-btn-tracking,0);text-transform:var(--w-btn-case,none);
}
.bsport-scope .bs-fabrique-button-root-text{color:var(--w-ink);font:var(--w-btn-font)}

/* 3) Tarjetas: clases, bonos, cuotas, modales */
.bsport-scope .bs-card-offer,
.bsport-scope .bs-offer-list-item,
.bsport-scope .bs-week-card,
.bsport-scope .bs-activity,
.bsport-scope .bs-pack-card,
.bsport-scope .bs-pass-card,
.bsport-scope .bs-paymentpack-card,
.bsport-scope .bs-contract-card,
.bsport-scope .bs-generic-card,
.bsport-scope .bs-fabrique-card-root,
.bsport-scope .bs-consumer-booking-card,
.bsport-scope .bs-consumer-pass-card{
  background:var(--w-surface);
  border:1px solid var(--w-line);
  border-radius:var(--w-r-card);
  box-shadow:var(--w-shadow,none);
}
.bsport-scope .bs-fabrique-modal-dialog{
  border-radius:var(--w-r-card);
  background:var(--w-surface);
}

/* 4) Títulos con la tipografía de la plantilla */
.bsport-scope .bs-activity__top__content__title,
.bsport-scope .bs-contract-card__title,
.bsport-scope .bs-fabrique-title,
.bsport-scope .bs-typography-title-lg,
.bsport-scope .bs-typography-display-lg,
.bsport-scope .bs-typography-display-md{
  font-family:var(--w-font-title);
  font-weight:var(--w-title-weight,400);
  letter-spacing:var(--w-title-tracking,0);
}

/* 5) Etiquetas / badges (nivel, "completo", "lista de espera") */
.bsport-scope .bs-fabrique-badge-root-main{
  background:var(--w-badge-bg);
  color:var(--w-badge-fg);
  border-radius:var(--w-r-pill);
}
.bsport-scope .bs-fabrique-badge-root-grey{background:var(--w-soft);color:var(--w-ink-weak);border-radius:var(--w-r-pill)}
.bsport-scope .bs-fabrique-badge-root-warning{border-radius:var(--w-r-pill)}

/* 6) Filtros, selects y campos de formulario (login, cupón, newsletter) */
.bsport-scope .bs-marketplace-filters,
.bsport-scope .bs-search,
.bsport-scope .bs-select{
  border-radius:var(--w-r-field);
  border-color:var(--w-line);
  font-family:var(--w-font-body);
}
.bsport-scope .bs-text-field-outlined,
.bsport-scope .bs-fabrique-textfield__wrapper{
  border-radius:var(--w-r-field);
  border-color:var(--w-line);
  font-family:var(--w-font-body);
}

/* 6b) Login, autenticación, alertas y mensajes */
.bsport-scope .bs-login-container,
.bsport-scope .bs-reset-password-container,
.bsport-scope .bs-change-password-form,
.bsport-scope .bs-alert,
.bsport-scope .bs-status-message-with-icon{
  background:var(--w-surface);
  border:1px solid var(--w-line);
  border-radius:var(--w-r-card);
  font-family:var(--w-font-body);
}
.bsport-scope .bs-text-field-outlined input,
.bsport-scope .bs-fabrique-textfield__wrapper input{
  border:1px solid var(--w-line);border-radius:var(--w-r-field);
  background:var(--w-bg);color:var(--w-ink);font:inherit;padding:12px 16px;
}
.bsport-scope .bs-text-field-helper-text{color:var(--w-ink-weak)}

/* 6c) Cesta, reserva y confirmación */
.bsport-scope .bs-basket_summary--container,
.bsport-scope .bs-booker-module-offer-summary-card,
.bsport-scope .bs-booker-module-buyable-items,
.bsport-scope .bs-payment-combo-buyable-item,
.bsport-scope .bs-payment-pack-buyable-item,
.bsport-scope .bs-contract-buyable-item,
.bsport-scope .bs-product-item,
.bsport-scope .bs-contract-checkout,
.bsport-scope .bs-contract-payment,
.bsport-scope .bs-marketplace-spot-selector,
.bsport-scope .bs-consumer-booking-details-card{
  background:var(--w-surface);
  border:1px solid var(--w-line);
  border-radius:var(--w-r-card);
}
.bsport-scope .bs-basket_summary--divider,
.bsport-scope .bs-booker-module-offer-summary-item-divider{border-color:var(--w-line);background:var(--w-line)}
.bsport-scope .bs-basket_summary__total_price--text,
.bsport-scope .bs-contract-buyable-item_title,
.bsport-scope .bs-newsletter-form__root__text__title{
  font-family:var(--w-font-title);font-weight:var(--w-title-weight,400);
}
.bsport-scope .bs-billing-interval,
.bsport-scope .bs-typography-color-primary{color:var(--w-ink)}

/* 6d) Newsletter / captación */
.bsport-scope .bs-newsletter-form__root{
  background:var(--w-soft);border-radius:var(--w-r-card);font-family:var(--w-font-body);
}

/* 7) Móvil: nada de scroll horizontal */
@media (max-width:480px){
  .bsport-scope{min-height:360px}
  .bsport-scope .bs-activity{max-width:100%;width:100%}
}