/* ============================================================
   css/pages/calendario.css — estilos exclusivos de calendario.php
   (cargado por head.php cuando la página define $page_css='calendario')
   Reutiliza .card, .card-bar y .results-list de rincon.css; aquí solo van
   la cabecera, el índice de jornadas, la rejilla y los ajustes de fila.
   ============================================================ */

/* ---------- Cabecera ---------- */
.cal-head {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.cal-head h1 {
  font-family: var(--score); font-size: 30px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1;
}
.cal-head__sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* ---------- Índice de jornadas (anclas) ---------- */
.cal-index {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--sp-5);
}
.cal-index__pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 32px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-input);
  background: var(--surface); color: var(--muted);
  font-family: var(--score); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.cal-index__pill:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.cal-index__pill.is-last { background: var(--ink); color: #fff; border-color: var(--ink); }
.cal-index__pill.is-next {
  background: var(--accent); color: var(--court-a); border-color: var(--accent);
  box-shadow: var(--glow);
}

/* ---------- Rejilla de tarjetas de jornada ---------- */
.cal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4); align-items: start;
}
.cal-card {
  overflow: hidden;
  /* el ancla debe quedar bajo el header sticky + tira de escudos */
  scroll-margin-top: 130px;
}
.cal-card--next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); }
.cal-card--last { border-color: var(--ink); }

/* Barra de la tarjeta: título a la izquierda, badge + enlace a la derecha */
.cal-card__bar { gap: var(--sp-2); }
.cal-card__bar h3 { margin-right: auto; }
.cal-card__link {
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  white-space: nowrap;
}
.cal-card__link:hover { color: #fff; text-decoration: none; }

/* Badges de estado de jornada */
.cal-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap;
}
.cal-badge--next { background: var(--accent); color: var(--court-a); }
.cal-badge--last { background: rgba(255,255,255,.14); color: var(--muted-dark); }

/* ---------- Filas de partido (sobre .results-list) ---------- */
/* La fila es un grid (span.row de rincon.css); dentro, tres enlaces:
   equipo local · marcador→jornada · equipo visitante. */
.cal-list li > span.row { padding: 7px var(--sp-3); gap: var(--sp-1); }
.cal-list a { color: var(--ink); }
.cal-list a:hover { text-decoration: none; }
.cal-list .team-tag:hover { color: var(--accent-deep); }
.cal-list .cal-score:hover { color: var(--ink); }
.cal-list .team-code { font-size: 11.5px; }
.cal-score { font-size: 14px; min-width: 52px; text-align: center; justify-content: center; }

/* Partido pendiente: el centro muestra fecha/hora, sin la píldora del marcador */
.cal-list li.is-pending .cal-score {
  background: transparent; padding: 2px 4px; color: var(--muted);
}
.cal-when { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.cal-when__d { font-family: var(--score); font-weight: 700; font-size: 13px; color: var(--ink); }
.cal-when__t { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-vs { font-family: var(--score); font-weight: 600; font-size: 13px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .cal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cal-grid { grid-template-columns: 1fr; }
  .cal-head h1 { font-size: 25px; }
  .cal-card { scroll-margin-top: 116px; }
}