@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

.bc-calendar {
  --bc-team: #f6bd2b;
  --bc-dark: #142a4e;
  color: #141414;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
  line-height: 1.25;
}
.bc-calendar * { box-sizing: border-box; }
.bc-title, .bc-filters, .bc-schedule { max-width: 1080px; margin: 0 auto; padding: 24px; }
.bc-title small, .bc-kicker { color: var(--bc-dark); font-size: clamp(15px, 1.35vw, 20px); font-weight: 900; letter-spacing: .12em; }
.bc-title h1 { margin: 5px 0; font-family: 'Luckiest Guy', Impact, sans-serif; font-size: clamp(42px, 5vw, 62px); font-weight: 400; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.bc-title span, .bc-filters p { color: #625e57; }
.bc-hero { max-width: 1080px; margin: 0 auto; line-height: 0; background: #fff; }
.bc-hero img { display: block; width: 100%; height: auto; }
.bc-ad { margin: 14px auto; padding: 0 18px; text-align: center; }
.bc-ad button { padding: 0; border: 0; background: transparent; display: inline-block; max-width: 100%; cursor: default; line-height: 0; }
.bc-ad img { display: block; max-width: 100%; height: auto; margin: auto; }
.bc-ad-a img { width: 1080px; }
.bc-ad-b img { width: 800px; }
.bc-ad-c img { width: 750px; }

.bc-filters h2 { margin: 3px 0 7px; font-size: 28px; }
.bc-filter-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 2px solid #151515; border-radius: 12px; background: #fff; font-weight: 800; text-align: left; cursor: pointer; }
.bc-filter-trigger b { display: inline-flex; align-items: center; gap: 7px; }
.bc-filter-trigger b i { display: inline-block; font-style: normal; transition: transform .18s ease; }
.bc-filter-trigger[aria-expanded='true'] b i { transform: rotate(180deg); }
.bc-rivals { margin-top: 10px; padding: 12px; border: 2px solid #151515; border-radius: 12px; }
.bc-rivals[hidden] { display: none; }
.bc-rivals-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.bc-rivals-action { padding: 7px 10px; border: 1px solid #151515; border-radius: 7px; background: #fff; color: #151515; font-size: 12px; font-weight: 800; cursor: pointer; }
.bc-rivals-action:hover { background: #f4f1eb; }
.bc-rivals-options { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.bc-rivals-options > button { position: relative; min-height: 86px; padding: 7px 4px; border: 2px solid #dedad2; border-radius: 10px; background: #faf9f6; cursor: pointer; font-family: 'Luckiest Guy', Impact, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: .01em; }
.bc-rivals-options > button.is-selected { border: 4px solid var(--bc-team); background: #fff; }
.bc-rivals-options img { display: block; margin: auto; }
.bc-rivals-options i { position: absolute; top: 5px; right: 5px; font-family: Arial, Helvetica, sans-serif; font-style: normal; }
.bc-chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 12px; font-weight: 700; }
.bc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #bdb8ae; border-radius: 99px; background: #fff; color: #151515; font-family: 'Luckiest Guy', Impact, sans-serif; font-size: 14px; font-weight: 400; cursor: pointer; }
.bc-chip img { border-radius: 50%; }

.bc-calendar-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #e4e1da; padding-top: 22px; }
.bc-month { display: flex; align-items: center; gap: 12px; }
.bc-month h2 { min-width: 170px; margin: 0; text-align: center; font-size: 32px; }
.bc-month button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0 0 2px; border: 2px solid #181818; border-radius: 50%; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 25px; line-height: 1; cursor: pointer; }
.bc-month button:disabled { opacity: .3; cursor: not-allowed; }
.bc-view, .bc-venue { display: flex; border: 1px solid #bbb; border-radius: 10px; overflow: hidden; }
.bc-view button, .bc-venue button { padding: 10px 12px; border: 0; background: #fff; cursor: pointer; font-size: 13px; font-weight: 800; }
.bc-view .active, .bc-venue .active { background: var(--bc-dark); color: #fff; }

.bc-grid-wrap { margin-top: 20px; }
.bc-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid #d6d0c6; border-left: 1px solid #d6d0c6; }
.bc-weekday { padding: 8px; border-right: 1px solid #d6d0c6; border-bottom: 1px solid #d6d0c6; background: #f4f1eb; font-size: 12px; text-align: center; }
.bc-day { height: 178px; padding: 6px; overflow: hidden; border-right: 1px solid #d6d0c6; border-bottom: 1px solid #d6d0c6; background: #fff; }
.bc-empty-day { background: #faf8f4; }
.bc-game { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 145px; margin-top: 6px; padding: 5px; overflow: hidden; border-radius: 8px; text-align: center; }
.bc-game span { flex: 0 0 auto; font-size: 9px; font-weight: 900; }
.bc-game img { flex: 0 0 auto; width: 66px; height: 70px; max-width: 100%; object-fit: contain; }
.bc-game strong { display: block; max-width: 100%; overflow: hidden; font-family: 'Luckiest Guy', Impact, sans-serif; font-size: 15px; font-weight: 400; letter-spacing: .01em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.bc-game small { flex: 0 0 auto; font-size: 11px; font-weight: 800; }
.bc-home { background: var(--bc-team); color: #151515; }
.bc-away { background: #e5e8eb; color: #151515; }
.bc-list { margin-top: 18px; }
.bc-row { display: grid; grid-template-columns: 100px 70px 1fr 120px; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; }
.bc-row img { width: 60px; height: 66px; object-fit: contain; }
.bc-row div, .bc-row time { display: flex; flex-direction: column; }
.bc-row strong { font-family: 'Luckiest Guy', Impact, sans-serif; font-size: 17px; font-weight: 400; letter-spacing: .01em; }
.bc-row time { text-align: right; font-weight: 900; }
.bc-row small { font-size: 11px; opacity: .75; }
.bc-empty { text-align: center; padding: 35px; border: 2px dashed #bdb8ae; border-radius: 12px; }
.bc-ad button:focus-visible, .bc-calendar button:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

@media (max-width: 750px) {
  .bc-title, .bc-filters, .bc-schedule { padding: 16px 14px; }
  .bc-title small, .bc-kicker { font-size: 16px; }
  .bc-title h1 { font-size: 42px; }
  .bc-ad { padding: 0 10px; }
  .bc-ad-a picture { display: block; width: 100%; }
  .bc-ad-a img { width: 100%; height: auto; object-fit: contain; }
  .bc-ad-b img, .bc-ad-c img { width: 100%; }
  .bc-calendar-controls { flex-wrap: wrap; }
  .bc-month { order: 1; width: 100%; justify-content: space-between; }
  .bc-month h2 { font-size: 29px; }
  .bc-view { order: 2; }
  .bc-venue { order: 3; }
  .bc-grid-wrap { overflow-x: auto; margin-top: 18px; -webkit-overflow-scrolling: touch; }
  /* Más ancho por día: mantiene las tarjetas cercanas a un cuadrado y evita recortar nombres como Magallanes. */
  .bc-grid { display: grid; min-width: 910px; }
  .bc-day { height: 190px; }
  .bc-game { min-height: 157px; padding: 5px 6px; }
  .bc-game img { width: 72px; height: 76px; }
  .bc-game strong { font-size: 15px; text-overflow: clip; }
  .bc-rivals-options { grid-template-columns: repeat(2, 1fr); }
  .bc-row { grid-template-columns: 68px 60px minmax(0, 1fr) 72px; gap: 7px; padding: 7px; font-size: 12px; }
  .bc-row img { width: 56px; height: 62px; }
  .bc-row strong { font-size: 16px; }
  .bc-row time { font-size: 12px; }
  .bc-hero { width: 100%; }
  .bc-filters h2 { font-size: 24px; }
  .bc-chips > span { width: 100%; }
}

@media (max-width: 600px) {
  .bc-ad button { cursor: pointer; }
  .bc-hero img { width: 100%; }
  .bc-rivals-actions { justify-content: stretch; }
  .bc-rivals-action { flex: 1 1 auto; }
}