/* Páginas de un campeonato en la web pública (cabecera, Partidos, Tabla, Elegir campeonato).
   Complementa la línea gráfica de la web (banner con foto, franja oscura, pastillas de la Agenda,
   degradado oscuro, tarjetas con pie rojo): solo agrega lo que la navegación necesita.
   Clases "cp-" para no afectar otras páginas. La tarjeta de partido tiene su propio archivo: partido-card.css */

:root { --cp-rojo: #d60000; }

/* ---------- cabecera: banner compacto con el campeonato (contexto) y la sección (H1) ---------- */
.cp-hero { position: relative; }
.cp-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, .75) 100%); }
.cp-hero-contenido { position: relative; padding-top: 1.5rem; padding-bottom: 1.25rem; }
.cp-hero-campeonato { display: flex; align-items: center; gap: .75rem; }
.cp-hero-nombre {
  flex: 1; min-width: 0;
  font-family: 'Bahnschrift', 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase;
  color: #ff3b3b; text-decoration: none;
  /* nombres largos: dos líneas como máximo (el nombre completo va en el title) */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.cp-hero-nombre:hover { color: #fff; }
.cp-cambiar { flex-shrink: 0; font-size: .72rem; }
.cp-hero-titulo { font-size: 2rem; line-height: 1.05; margin: .4rem 0 0; letter-spacing: .01em; }

/* secciones: una sola fila; en el celular se desliza con el dedo */
.cp-pestanas-barra { padding: .6rem 0; }
.cp-pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cp-pestanas::-webkit-scrollbar { display: none; }
.cp-pestanas .nav-link { white-space: nowrap; }
/* en el celular, un degradado al borde avisa que hay más secciones deslizando */
@media (max-width: 767.98px) {
  .cp-pestanas { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 2rem; }
}
@media (min-width: 768px) {
  .cp-hero-contenido { padding-top: 2.5rem; padding-bottom: 2rem; }
  .cp-hero-nombre { font-size: 1.25rem; }
  .cp-hero-titulo { font-size: 2.75rem; }
  .cp-pestanas { justify-content: safe center; }
}

/* foco visible en todas las pastillas y botones de navegación */
.agenda-filtros .nav-link:focus-visible, .cp-flecha:focus-visible, .cp-jornada-boton:focus-visible, .cp-cambiar:focus-visible {
  outline: 3px solid #ffc107; outline-offset: 2px; box-shadow: none;
}

/* ---------- torneo / fase ---------- */
.cp-filtros { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.cp-filtro { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cp-filtro-titulo { flex-shrink: 0; width: 3.6rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .6); }
.cp-filtro-opciones { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.cp-filtro-opciones::-webkit-scrollbar { display: none; }
.cp-filtro-opciones .nav-link { white-space: nowrap; padding: .3rem .85rem; }
.cp-filtros-claro .cp-filtro-titulo { color: #6c757d; }
.cp-filtros-claro .nav-link { border-color: #ced4da; color: #3c3c3b; }
.cp-filtros-claro .nav-link:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.cp-filtros-claro .nav-link.active { color: #fff; border-color: var(--bs-primary); }

/* ---------- panel de la jornada (Partidos) ---------- */
.cp-panel {
  background: rgba(10, 10, 10, .45); border: 1px solid rgba(255, 255, 255, .08); border-radius: .9rem;
  padding: 1rem; margin-bottom: 1rem; color: #fff;
}
.cp-jornada { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.cp-jornada-actual { flex: 1; min-width: 0; max-width: 26rem; text-align: center; }
.cp-jornada-boton {
  background: none; border: 0; color: #fff; padding: .1rem .5rem; border-radius: .5rem;
  font-size: 1.6rem; font-weight: 700; line-height: 1.1;
}
.cp-jornada-boton:hover { color: #ff3b3b; }
.cp-jornada-boton::after { vertical-align: .2em; margin-left: .4em; }
.cp-jornada-dias { font-size: .85rem; color: rgba(255, 255, 255, .7); margin-top: .15rem; }
.cp-jornada-avance { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .78rem; color: rgba(255, 255, 255, .7); margin-top: .35rem; }
.cp-progreso { display: inline-block; width: 4.5rem; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.cp-progreso > span { display: block; height: 100%; background: var(--cp-rojo); }
.cp-jornada-menu { max-height: 60vh; overflow-y: auto; min-width: 15rem; }
.cp-jornada-menu .dropdown-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cp-jornada-menu .dropdown-item small { color: rgba(255, 255, 255, .65); white-space: nowrap; }
.cp-jornada-menu .dropdown-item.active { background: var(--cp-rojo); }
.cp-jornada-menu .dropdown-item.active small { color: #fff; }
.cp-flecha { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.cp-flecha.disabled { opacity: .25; }
.cp-jornada-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 575.98px) {
  .cp-panel { padding: .8rem; }
  .cp-jornada { gap: .4rem; }
  .cp-jornada-boton { font-size: 1.4rem; }
}

/* ---------- partidos por día ---------- */
.cp-dia {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; color: #ff3b3b;
  border-bottom: 1px solid rgba(255, 255, 255, .15); padding-bottom: .4rem; margin: 1.25rem .5rem .25rem;
}
.cp-dia small { font-size: .8rem; color: rgba(255, 255, 255, .6); font-weight: 600; }

/* mientras carga otra jornada o torneo: se atenúa y aparece un indicador */
.cp-partidos { position: relative; }
.cp-partidos > * { transition: opacity .15s ease; }
.cp-partidos.cp-cargando { pointer-events: none; }
.cp-partidos.cp-cargando > * { opacity: .3; }
.cp-partidos.cp-cargando::before {
  content: ''; position: absolute; top: 3rem; left: 50%; width: 2.5rem; height: 2.5rem; margin-left: -1.25rem; z-index: 2;
  border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: cp-girar .7s linear infinite;
}
@keyframes cp-girar { to { transform: rotate(360deg); } }

.cp-vacio { text-align: center; color: #fff; padding: 3rem 1rem; }
.cp-vacio i { font-size: 2.5rem; color: rgba(255, 255, 255, .5); display: block; margin-bottom: .75rem; }
.cp-vacio p:last-child { color: rgba(255, 255, 255, .6); }

/* ---------- tabla de posiciones ---------- */
.cp-tabla .cp-equipo { max-width: 0; width: 100%; white-space: nowrap; } /* nombre en una línea; si no entra, "…" */
.cp-tabla .cp-pts { width: 30px; height: 30px; font-weight: 700; }
.cp-tabla tr.cp-seguido td { background: #fff8e1; }
.cp-forma { display: inline-flex; gap: 3px; }
.cp-forma span { width: 20px; height: 20px; border-radius: 50%; font-size: .62rem; font-weight: 700; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cp-forma-g { background: #198754; }
.cp-forma-e { background: #6c757d; }
.cp-forma-p { background: var(--cp-rojo); }
@media (min-width: 768px) {
  .cp-tabla th:not(:nth-child(2)), .cp-tabla td:not(:nth-child(2)) { min-width: 3rem; }
}

/* ---------- partido en una fila (página del campeonato: próximos y últimos resultados) ---------- */
.cp-partido .min-w-0 { min-width: 0; }
.cp-partido-cuando { width: 4.6rem; flex-shrink: 0; }
.cp-hora { display: block; font-size: 1.05rem; color: #212529; }
.cp-goles { min-width: 1.6rem; text-align: center; font-size: 1.1rem; font-weight: 600; }
.cp-pierde { opacity: .6; }
.cp-partido.cp-seguido { background: #fff8e1; }

/* ---------- elegir campeonato ---------- */
.cp-buscar { position: relative; max-width: 520px; }
.cp-buscar i { position: absolute; left: 16px; top: 10px; color: #6c757d; }
.cp-buscar input { padding-left: 42px; }