/* ================================================================
   schedule-page.css  —  UPC editorial design
   ================================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */

/* ── Main wrapper ───────────────────────────────────────────── */
.sch-main {
  padding: 2rem 0 5rem;
}

/* ── Filter bar ─────────────────────────────────────────────── */
.sch-filter-bar {
  position: sticky;
  top: 64px;
  z-index: 200;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
  backdrop-filter: blur(8px);
}

/* Search */
.sch-search-wrap {
  position: relative;
  margin-bottom: .85rem;
}
.sch-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: .85rem;
  pointer-events: none;
}
.sch-search-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 10px;
  color: var(--text-primary);
  font-size: .9rem;
  padding: .65rem 1rem .65rem 2.6rem;
  outline: none;
  transition: border-color .2s;
}
.sch-search-input:focus {
  border-color: color-mix(in srgb,var(--accent-primary) 35%,transparent);
}
.sch-search-input::placeholder { color: var(--text-tertiary); }

/* Category filter select */
.page-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='color-mix(in srgb,var(--accent-primary) 50%,transparent)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .85rem center;
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 8px;
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .45rem 2.4rem .45rem .9rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  min-width: 160px;
}
.page-filter-select:hover,
.page-filter-select:focus {
  border-color: color-mix(in srgb,var(--accent-primary) 30%,transparent);
  color: var(--text-primary);
  outline: none;
}
.page-filter-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}



/* Filter row */
.sch-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

/* Phase buttons */
.sch-phase-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.sch-phase-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.sch-phase-btn:hover {
  border-color: color-mix(in srgb,var(--accent-primary) 20%,transparent);
  color: var(--text-primary);
}
.sch-phase-btn.active {
  background: color-mix(in srgb,var(--accent-primary) 10%,transparent);
  border-color: color-mix(in srgb,var(--accent-primary) 40%,transparent);
  color: var(--accent-primary);
}
.sch-phase-btn i { font-size: .7rem; }

/* Action buttons */
.sch-action-btns {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
}
.sch-action-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.sch-action-btn:hover {
  border-color: var(--border-secondary);
  color: var(--text-primary);
}
.sch-action-btn--now {
  background: color-mix(in srgb,var(--accent-primary) 8%,transparent);
  border-color: color-mix(in srgb,var(--accent-primary) 30%,transparent);
  color: var(--accent-primary);
}
.sch-action-btn--now:hover {
  background: color-mix(in srgb,var(--accent-primary) 14%,transparent);
  border-color: color-mix(in srgb,var(--accent-primary) 50%,transparent);
}

/* "Mis partidos" toggle */
.sch-action-btn--mine.active {
  background: color-mix(in srgb,var(--accent-secondary) 12%,transparent);
  border-color: color-mix(in srgb,var(--accent-secondary) 45%,transparent);
  color: var(--accent-secondary);
}

/* Cards/cells belonging to the logged-in player's team */
.sch-match-card--mine {
  border-color: color-mix(in srgb,var(--accent-secondary) 40%,transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent-secondary) 15%,transparent), 0 12px 32px rgba(0,0,0,.4);
}
.sch-badge--mine {
  background: color-mix(in srgb,var(--accent-secondary) 12%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-secondary) 30%,transparent);
  color: var(--accent-secondary);
}
.sch-tbl-card--mine {
  outline: 1px solid color-mix(in srgb,var(--accent-secondary) 40%,transparent);
  outline-offset: -1px;
  border-radius: 6px;
}
.sch-tbl-mine {
  color: var(--accent-secondary);
  font-size: .68rem;
}

/* View toggle */
.sch-view-toggle {
  display: flex;
  gap: 2px;
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 8px;
  overflow: hidden;
}
.sch-view-btn {
  padding: .45rem .75rem;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: .8rem;
  cursor: pointer;
  transition: all .2s;
}
.sch-view-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.sch-view-btn.active { color: var(--accent-primary); background: color-mix(in srgb,var(--accent-primary) 8%,transparent); }

@media (max-width: 768px) {
  #tableViewBtn { display: none; }
}

/* Active filter chips */
.sch-active-filters {
  display: none;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
}
.sch-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  background: color-mix(in srgb,var(--accent-primary) 8%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 25%,transparent);
  border-radius: 6px;
  color: var(--accent-primary);
  font-size: .72rem;
  font-weight: 600;
}
.sch-chip button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  opacity: .6;
  padding: 0 0 0 .2rem;
  transition: opacity .15s;
}
.sch-chip button:hover { opacity: 1; }

/* ── Empty state ────────────────────────────────────────────── */
.sch-empty {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 520px;
  margin: 0 auto;
}
.sch-empty-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: color-mix(in srgb,var(--accent-primary) 6%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 12%,transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: color-mix(in srgb,var(--accent-primary) 50%,transparent);
}
.sch-empty-icon svg { width: 2rem; height: 2rem; }
.sch-empty-title {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 2rem;
  color: var(--text-primary);
  letter-spacing: .04em;
  margin-bottom: .5rem;
}
.sch-empty-desc {
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.6;
}
.sch-reset-btn {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.4rem;
  background: color-mix(in srgb,var(--accent-primary) 8%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 30%,transparent);
  border-radius: 8px;
  color: var(--accent-primary);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.sch-reset-btn:hover { background: color-mix(in srgb,var(--accent-primary) 14%,transparent); }

/* ── Date group ─────────────────────────────────────────────── */
.sch-date-group { margin-bottom: 3rem; }

.sch-date-hdr {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border-primary);
}
.sch-date-day {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: .06em;
  color: color-mix(in srgb,var(--accent-primary) 70%,transparent);
  text-transform: uppercase;
}
.sch-date-num {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: .02em;
}
.sch-date-mon {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Time slot (list view) ───────────────────────────────────── */
.sch-time-slot { margin-bottom: 2rem; }

.sch-time-label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.sch-time-label i {
  color: color-mix(in srgb,var(--accent-primary) 50%,transparent);
  font-size: .75rem;
}

/* ── Cards grid ─────────────────────────────────────────────── */
.sch-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) { .sch-cards-grid { gap: 1.25rem; } }

/* ── Match card ─────────────────────────────────────────────── */
.sch-match-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.sch-match-card:hover {
  border-color: color-mix(in srgb,var(--accent-primary) 30%,transparent);
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0,0,0,.5), 0 0 32px color-mix(in srgb,var(--accent-primary) 6%,transparent);
}

/* Card header */
.sch-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
  border-bottom: 2px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
  flex-wrap: wrap;
}

.sch-card-court {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.sch-court-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb,var(--accent-primary) 50%,transparent);
  flex-shrink: 0;
}

.sch-card-badges {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}

/* Badges */
.sch-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.sch-badge--live {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  color: #22c55e;
}
.sch-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: en-pista-pulse 1.2s ease-in-out infinite;
}
.sch-badge--done {
  background: color-mix(in srgb,var(--accent-primary) 8%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 20%,transparent);
  color: color-mix(in srgb,var(--accent-primary) 70%,transparent);
}
.sch-badge--group {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}
.sch-badge--phase {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}
.sch-badge--phase.phase-f { background: color-mix(in srgb,var(--accent-secondary) 12%,transparent); border: 1px solid color-mix(in srgb,var(--accent-secondary) 30%,transparent); color: var(--accent-secondary); }
.sch-badge--phase.phase-s { background: color-mix(in srgb,var(--accent-primary) 12%,transparent); border: 1px solid color-mix(in srgb,var(--accent-primary) 30%,transparent); color: var(--accent-primary); }
.sch-badge--phase.phase-q { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3); color: #a78bfa; }

/* Card body */
.sch-match-body { padding: .9rem 1rem 1rem; }

.sch-team-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: space-between;
  padding: .35rem 0;
  border-radius: 7px;
  transition: background .2s;
}
.sch-team-row--win {
  background: color-mix(in srgb,var(--accent-primary) 4%,transparent);
}

.sch-team-names { flex: 1; min-width: 0; }

.sch-player-link {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  white-space: normal;
  word-break: break-word;
  display: block;
  line-height: 1.3;
  transition: color .2s;
}
.sch-player-link:hover { color: var(--accent-primary); }
.sch-player-link--win { color: var(--accent-primary) !important; font-weight: 700; }
.sch-sep { color: var(--text-tertiary); margin: 0 .15rem; }

.sch-score {
  font-family: 'Bebas Neue', cursive;
  font-size: 1.15rem;
  letter-spacing: .05em;
  color: var(--text-tertiary);
  flex-shrink: 0;
  min-width: 2.5rem;
  text-align: right;
}
.sch-score--win { color: var(--accent-primary); }

.sch-vs {
  text-align: center;
  margin: .15rem 0;
}
.sch-vs span {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════
   TABLE VIEW
   ════════════════════════════════════════════════════════════ */
.sch-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 14px;
  background: var(--bg-secondary);
}

/* Table header row */
.sch-tbl-head {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
}
.sch-tbl-time-col {
  flex: 0 0 5rem;
  padding: .75rem .75rem;
  font-size: .7rem;
  color: transparent;
  border-right: 1px solid var(--border-primary);
}
.sch-tbl-court-col {
  flex: 1;
  padding: .75rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .4rem;
  border-right: 1px solid var(--border-primary);
}
.sch-tbl-court-col:last-child { border-right: none; }

/* Table time row */
.sch-tbl-row {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  min-height: 7rem;
}
.sch-tbl-row:last-child { border-bottom: none; }

.sch-tbl-time {
  flex: 0 0 5rem;
  padding: .75rem .75rem;
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: color-mix(in srgb,var(--accent-primary) 60%,transparent);
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: flex-start;
  padding-top: 1rem;
}

.sch-tbl-cell {
  flex: 1;
  padding: .6rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: color-mix(in srgb, var(--bg-secondary) 40%, transparent);
  transition: background .2s;
}
.sch-tbl-cell:last-child { border-right: none; }
.sch-tbl-cell:hover { background: color-mix(in srgb, var(--bg-secondary) 60%, transparent); }

/* Table match card */
.sch-tbl-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-secondary);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}

.sch-tbl-card-hdr {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
  padding: .45rem .6rem;
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
}
.sch-tbl-badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 4px;
  padding: .15rem .4rem;
}
.sch-tbl-phase {
  font-size: .65rem;
  font-weight: 800;
  padding: .15rem .35rem;
  border-radius: 4px;
}
.sch-tbl-phase.phase-f { background: color-mix(in srgb,var(--accent-secondary) 12%,transparent); color: var(--accent-secondary); border: 1px solid color-mix(in srgb,var(--accent-secondary) 30%,transparent); }
.sch-tbl-phase.phase-s { background: color-mix(in srgb,var(--accent-primary) 12%,transparent); color: var(--accent-primary); border: 1px solid color-mix(in srgb,var(--accent-primary) 30%,transparent); }
.sch-tbl-phase.phase-q { background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.sch-tbl-live { display: inline-flex; align-items: center; }

.sch-tbl-players {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1;
  padding: .5rem .6rem .6rem;
}
.sch-tbl-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.sch-tbl-player {
  flex: 1;
  min-width: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.35;
  transition: color .2s;
}
a.sch-tbl-player:hover { color: var(--accent-primary); }
.sch-tbl-player.win { color: var(--accent-primary) !important; }

.sch-tbl-score {
  font-family: 'Bebas Neue', cursive;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--text-tertiary);
  flex-shrink: 0;
  text-align: right;
}
.sch-tbl-score.win { color: var(--accent-primary); }

.sch-tbl-vs {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin: .15rem 0;
}

.sch-tbl-free {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 100%;
  min-height: 4rem;
  color: var(--text-disabled);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sch-tbl-free i { font-size: .7rem; }

.sch-tbl-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-tertiary);
  font-size: .85rem;
}