/* ===========================
   TOPBAR CALENDARIO (seasons + semanas) — PIXELS
   Laterales fijos, carril central elástico.
   El SCROLL horizontal vive en el WRAPPER (.weeks-strip-wrap)
   =========================== */

:root{
  --topbar-h: 48px;         /* alto mínimo de la barra */
  --gap: 8px;               /* separación entre chips */
  --chip-pad-y: 6px;
  --chip-pad-x: 12px;
  --chip-font: 12px;
  --arrow-img: 24px;        /* tamaño flechas */
  --season-h: 34px;         /* alto del dropdown */
  --scrollbar-h: 4px;       /* grosor del scrollbar horizontal */
  --scrollbar-gap: 1px;     /* separación mínima pills ↔ scrollbar */
}

.topbar-cal{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:10px;
  background:#151a1c;
  min-height:var(--topbar-h);
  overflow:visible !important;       /* permitir que el menú del dropdown salga de la barra */
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
  box-sizing:border-box;
}

/* Laterales fijos (no crecen) */
.topbar-cal .season-dd,
.topbar-cal .tb-arrow,
.topbar-cal .btn-hoy{
  flex:0 0 auto;
}

/* Carril central elástico (único que crece) */
.topbar-cal .weeks-strip-wrap{
  flex:1 1 auto;
}

/* Flechas */
.tb-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
  border-radius:10px;
  transition:transform .15s ease, background .2s ease;
}
.tb-arrow:hover{
  transform:scale(1.05);
  background:rgba(255,255,255,0.06);
}
.tb-arrow img{
  height:var(--arrow-img);
  display:block;
}

/* === CARRIL DE SEMANAS === */
/* El WRAPPER es el que scrollea */
.weeks-strip-wrap{
  position:relative;
  overflow:auto hidden;              /* scroll horizontal aquí */
  border-radius:8px;
  background:#0f1315;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
  scroll-snap-type:x proximity;      /* snap en el contenedor que scrollea */
  box-sizing:border-box;
  /* Scrollbar fino (Firefox) */
  scrollbar-width:thin;
  scrollbar-color:#3a4348 transparent;
}

/* Scrollbar fino (WebKit) */
.weeks-strip-wrap::-webkit-scrollbar{ height:var(--scrollbar-h); }
.weeks-strip-wrap::-webkit-scrollbar-thumb{
  background:#3a4348; border-radius:999px;
}
.weeks-strip-wrap::-webkit-scrollbar-track{ background:transparent; }

/* La fila solo distribuye, NO scrollea */
.weeks-strip{
  display:flex;
  align-items:center;
  gap:var(--gap);
  padding:6px 8px;
  /* reserva mínima para que el scrollbar no pise las pills */
  padding-bottom:calc(var(--scrollbar-h) + var(--scrollbar-gap));
  white-space:nowrap;
}

/* Chip semana (compacto, en px) */
.week-chip{
  flex:0 0 auto;
  scroll-snap-align:start;
  color:#d6e2ea;
  background:#1a2023;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:999px;
  padding:var(--chip-pad-y) var(--chip-pad-x);
  font-size:var(--chip-font);
  line-height:1;                         /* evita empujar el alto del carril */
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.week-chip:hover{
  transform:translateY(-1px);
  background:#20272b;
  border-color:rgba(255,255,255,0.14);
}
.week-chip.selected{
  background:#0b7c3c;
  border-color:#00e765;
  box-shadow:0 0 0 2px rgba(0,231,101,0.25), 0 4px 16px rgba(0,231,101,0.18);
  color:#fff;
  font-weight:600;
}

/* Botón Hoy (px) */
.btn-hoy{
  background:#0b7c3c;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:5px 10px;
  font-size:12px;
  cursor:pointer;
  transition:filter .2s ease, transform .12s ease;
}
.btn-hoy:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}

/* ===========================
   Dropdown de temporada (pill oscuro) — en px
   =========================== */

/* contenedor del dropdown: que no recorte y tenga stacking propio */
#topbar-calendario .season-dd{
  min-width:110px;
  position:relative;
  overflow:visible !important;
}

/* Contenedor pill */
#topbar-calendario .season-dd .Select-control{
  background:#1a2023;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:999px;
  height:var(--season-h);
  box-shadow:none;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
  color:#fff !important;                               /* valor seleccionado en blanco */
}

/* Valor/label/placeholder → blanco siempre */
#topbar-calendario .season-dd .Select--single > .Select-control .Select-value,
#topbar-calendario .season-dd .Select--single > .Select-control .Select-value .Select-value-label,
#topbar-calendario .season-dd .Select-placeholder{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;             /* WebKit */
  opacity:1 !important;
  font-size:12px;
  letter-spacing:.2px;
  line-height:calc(var(--season-h) - 2px);
  padding-left:6px;
}

/* Evitar herencias raras */
#topbar-calendario .season-dd .Select-control *{ color:inherit; }

/* Input (si aparece) */
#topbar-calendario .season-dd .Select-input{ height:calc(var(--season-h) - 2px); }
#topbar-calendario .season-dd .Select-input > input{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* Flecha blanca */
#topbar-calendario .season-dd .Select-arrow{
  border-color:#fff transparent transparent !important;
}

/* Hover/focus con halo verde */
#topbar-calendario .season-dd .Select-control:hover{
  background:#20272b;
  border-color:rgba(255,255,255,0.14);
}
#topbar-calendario .season-dd .Select.is-focused > .Select-control{
  border-color:#00e765 !important;
  box-shadow:0 0 0 2px rgba(0,231,101,0.25) !important;
}

/* Menú desplegable: que salga por encima de la barra */
#topbar-calendario .season-dd .Select-menu-outer{
  background:#0f1315;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  margin-top:6px;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  z-index:99999 !important;                            /* ↑ z-index alto */
}

/* Opciones */
#topbar-calendario .season-dd .Select-option{
  color:#fff !important;
  padding:8px 12px;
  font-size:12px;
}
#topbar-calendario .season-dd .Select-option.is-focused{
  background:#20272b;
  color:#fff !important;
}
#topbar-calendario .season-dd .Select-option.is-selected{
  background:#0b7c3c;
  color:#fff !important;
}

/* Sin botón de limpiar */
#topbar-calendario .season-dd .Select-clear-zone{ display:none; }

/* Separación en la topbar */
.topbar-cal .season-dd{ margin-right:6px; }

/* Overrides por ID del control (aseguran BLANCO también por ID) */
#season-select .Select-value,
#season-select .Select-value-label,
#season-select .Select-placeholder{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
#season-select .Select-menu-outer,
#season-select .Select-menu{
  background:#0f1315 !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}
#season-select .Select-option,
#season-select .Select-option *,
#season-select .VirtualizedSelectOption,
#season-select .VirtualizedSelectFocusedOption{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
#season-select .Select-option.is-focused,
#season-select .VirtualizedSelectFocusedOption{
  background:#20272b !important;
  color:#fff !important;
}
#season-select .Select-option.is-selected{
  background:#0b7c3c !important;
  color:#fff !important;
}
#season-select .Select-noresults,
#season-select .Select-option.is-disabled{
  color:#fff !important;
  opacity:0.7 !important;
}

/* ===========================
   TOPBAR DE MESES (misma filosofía, todo en px)
   =========================== */

.months-strip-wrap{
  position:relative;
  flex:1 1 auto;
  overflow:auto hidden;              /* scroll horizontal en el wrapper */
  border-radius:8px;
  background:#0f1315;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
  scroll-snap-type:x proximity;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:#3a4348 transparent;
}

.months-strip-wrap::-webkit-scrollbar{ height:var(--scrollbar-h); }
.months-strip-wrap::-webkit-scrollbar-thumb{ background:#3a4348; border-radius:999px; }
.months-strip-wrap::-webkit-scrollbar-track{ background:transparent; }

.months-strip{
  display:flex;
  align-items:center;
  gap:var(--gap);
  padding:6px 8px;
  padding-bottom:calc(var(--scrollbar-h) + var(--scrollbar-gap)); /* poco margen */
  white-space:nowrap;
}

.month-chip{
  flex:0 0 auto;
  scroll-snap-align:start;
  color:#d6e2ea;
  background:#1a2023;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:999px;
  padding:var(--chip-pad-y) var(--chip-pad-x);
  font-size:var(--chip-font);
  line-height:1;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.month-chip:hover{
  transform:translateY(-1px);
  background:#20272b;
  border-color:rgba(255,255,255,0.14);
}
.month-chip.selected{
  background:#0b7c3c;
  border-color:#00e765;
  box-shadow:0 0 0 2px rgba(0,231,101,0.25), 0 4px 16px rgba(0,231,101,0.18);
  color:#fff;
  font-weight:600;
}

/* Ajuste “mobile” (sigue siendo en px) */
@media (max-width:480px){
  .week-chip, .month-chip{ padding:5px 9px; font-size:11.5px; }
  .tb-arrow img{ height:22px !important; }
}