/* =============================================================
   Copa Shaday — identidad propia sobre la base navy/gold institucional
   (Assets/css/public/home.css). Solo AGREGA variables y clases nuevas
   (prefijo cs-), nunca redefine --bg/--gold/etc. -- misma tecnica de
   "retarget" que Assets/css/libraries/design-system.css usa sobre
   theme-variables.css en el panel admin.
   ============================================================= */

:root {
  --cs-verde:      #16a34a;  /* verde cancha, acento deportivo */
  --cs-verde-soft: #22c55e;
  --cs-amarilla:   #f4c542;  /* tarjeta amarilla */
  --cs-roja:       #e5484d;  /* tarjeta roja */
  --cs-volt:       #baff29;  /* acento "boost": SOLO countdown, resultado jugado y badge Jugado -- nunca reemplaza al oro */
  --cs-display:    "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif; /* condensada/pesada, solo para titulos */
}

/* Tipografia de titulos propia de Copa Shaday: condensada/pesada en
   mayusculas, en vez del serif Fraunces que usa el resto del sitio
   institucional (esa se queda intacta en Views/home.php). Se aplica a
   TODOS los h1-h4 dentro de .cs-body (marcado en partials/_head.php) --
   cubre el H1 del Hero, los H2 de cada seccion, "Jornada X", "Grupo X" y
   el nombre de equipo en las tarjetas de Equipos, sin tocar cada uno por separado */
.cs-body h1, .cs-body h2, .cs-body h3, .cs-body h4 {
  font-family: var(--cs-display);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Fondo solido del nav desde el inicio (no solo tras hacer scroll), para las
   paginas que empiezan con una seccion clara (ej. calendario.php) -- si no,
   el texto claro del nav transparente quedaria invisible sobre el fondo
   claro hasta que el usuario haga scroll. Clase separada de ".is-scrolled"
   a proposito: home.js maneja esa clase segun scroll (la quita de entrada
   porque scrollY es 0 al cargar), asi que pisaria un ".is-scrolled" puesto
   por PHP en el primer render */
.nav.cs-nav-solido {
  background: rgba(11, 24, 48, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(213, 172, 102, 0.14);
}

/* El nav de Copa Shaday tiene 6 links (2 mas que el institucional: Posiciones
   y Bracket) -- se reduce un poco el espaciado para que quepan comodos desde
   el primer breakpoint donde .nav-links se hace visible (960px, home.css) */
.cs-body .nav-links { gap: 1.3rem; }
.cs-body .nav-link { font-size: .86rem; }

/* Marca "Copa Shaday" en el nav/footer: icono de trofeo en vez del sello CETPRO */
.cs-brand-mark {
  background: radial-gradient(circle at 34% 28%, #1c3a5e, #0b1830);
  font-size: 1.15rem;
}

/* =============================================================
   Hero
   ============================================================= */
/* Cinta de texto en movimiento, arriba del Hero (home.php unicamente). Fuera
   del flujo del nav (fixed) por eso el offset de margin-top; el padding-top
   del Hero se reduce un poco mas abajo para compensar el espacio que ocupa */
.cs-ticker {
  margin-top: clamp(64px, 8vw, 84px);
  overflow: hidden; white-space: nowrap;
  background: #05070a;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid rgba(186, 255, 41, 0.25);
  padding: .55rem 0;
}
.cs-ticker-track { display: inline-flex; animation: cs-ticker-scroll 22s linear infinite; }
.cs-ticker-content {
  font-family: var(--cs-display); font-size: .82rem; letter-spacing: .04em;
  color: var(--cream-3); padding-right: 1.2rem;
}
.cs-ticker-content b { color: var(--cs-volt); margin: 0 .7em; }
@keyframes cs-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cs-ticker-track { animation: none; } }

.cs-hero {
  position: relative;
  padding-top: clamp(4.5rem, 9vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  background:
    radial-gradient(1200px 480px at 15% -10%, rgba(22, 163, 74, 0.22), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(213, 172, 102, 0.16), transparent 60%),
    var(--bg);
  color: var(--cream);
  overflow: clip;
  text-align: center;
}
.cs-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cs-verde-soft);
  margin-bottom: 1.2rem;
}
.cs-hero-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-verde-soft);
}
.cs-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin-bottom: .9rem;
}
.cs-hero h1 em { color: var(--gold-soft); font-style: normal; }
.cs-hero-fechas {
  font-size: 1.05rem;
  color: var(--cream-2);
  margin-bottom: 2.2rem;
}
.cs-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 3rem; }

/* Countdown */
.cs-countdown {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.4rem;
  max-width: 640px; margin-inline: auto;
}
.cs-countdown-item {
  background: linear-gradient(165deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.3rem;
  min-width: 92px;
}
.cs-countdown-num {
  display: block;
  font-family: var(--cs-display); font-style: normal; font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--cs-volt);
  text-shadow: 0 0 16px rgba(186, 255, 41, 0.35);
  font-variant-numeric: tabular-nums;
}
.cs-countdown-label {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-3);
}
.cs-countdown-empty {
  font-size: 1.1rem; color: var(--cream-2); font-style: italic;
}
.cs-countdown-proximo {
  margin-top: 1.4rem; font-size: .92rem; color: var(--cream-3);
}
.cs-countdown-proximo strong { color: var(--cream); }

/* =============================================================
   Match cards (calendario)
   ============================================================= */
.cs-jornada-titulo {
  display: flex; align-items: center; gap: .8rem;
  font-size: .78rem; font-weight: 400; letter-spacing: .1em;
  color: var(--gold);
  margin: 2.6rem 0 1.1rem;
}
.cs-jornada-titulo::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cs-jornada-titulo:first-child { margin-top: 0; }

.cs-matches-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.cs-match-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(165deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  cursor: pointer;
  transition: border-color .35s, transform .35s var(--ease-soft);
}
.cs-match-card:hover {
  border-color: rgba(186, 255, 41, 0.45);
  box-shadow: 0 0 0 1px rgba(186, 255, 41, 0.12), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}
.cs-match-team { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cs-match-team.cs-team-right { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.cs-team-badge-sm {
  width: 40px; height: 40px; border-radius: 8px; flex: none;
  background: rgba(213, 172, 102, 0.1);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--gold-soft); font-weight: 700; font-size: .85rem;
}
.cs-team-badge-sm img { width: 100%; height: 100%; object-fit: contain; }
.cs-match-team-name {
  font-family: var(--cs-display); text-transform: uppercase; letter-spacing: -0.01em;
  font-size: .86rem; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-match-center { text-align: center; min-width: 90px; }
.cs-match-score { font-family: var(--cs-display); font-size: 1.6rem; color: var(--cs-volt); }
.cs-match-vs { font-size: .8rem; color: var(--cream-3); letter-spacing: .05em; }
.cs-match-meta { font-size: .68rem; color: var(--cream-3); margin-top: .3rem; white-space: nowrap; }

.cs-badge-estado {
  display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px; margin-top: .3rem;
}
.cs-badge-programado { background: rgba(213, 172, 102, 0.14); color: var(--gold-soft); }
.cs-badge-jugado { background: rgba(186, 255, 41, 0.14); color: var(--cs-volt); }
.cs-badge-suspendido { background: rgba(229, 72, 77, 0.16); color: var(--cs-roja); }

.cs-empty-state { text-align: center; color: var(--cream-3); padding: 3rem 1rem; font-size: .95rem; }
.section-light .cs-empty-state { color: var(--ink-mute); }

/* =============================================================
   Equipos (grid de escudos)
   ============================================================= */
.cs-teams-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem;
}
.cs-team-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem;
  padding: 1.6rem 1rem;
}
.cs-team-badge-lg {
  width: 84px; height: 84px; border-radius: 14px;
  background: radial-gradient(circle at 32% 28%, var(--bg-4), var(--bg-3));
  border: 1px solid rgba(213, 172, 102, 0.35);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--gold); font-family: var(--cs-display); font-size: 1.4rem;
}
.cs-team-badge-lg img { width: 100%; height: 100%; object-fit: contain; }
.cs-team-card h3 { font-size: 1rem; }

/* =============================================================
   Posiciones (tabla por grupo)
   ============================================================= */
.cs-grupo-titulo {
  font-size: 1.3rem;
  margin: 2.6rem 0 1rem;
}
.cs-grupo-titulo:first-child { margin-top: 0; }
.cs-standings-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-soft); }
.cs-standings-table {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-size: .88rem; background: var(--bg-3);
}
.cs-standings-table th, .cs-standings-table td {
  padding: .75rem .9rem; text-align: center; white-space: nowrap;
}
.cs-standings-table th {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); font-weight: 800; text-align: center;
  border-bottom: 1px solid var(--line);
}
.cs-standings-table th:nth-child(2), .cs-standings-table td:nth-child(2) { text-align: left; white-space: normal; }
.cs-standings-table td { color: var(--cream); border-bottom: 1px solid var(--line); }
.cs-standings-table tr:last-child td { border-bottom: none; }
.cs-standings-equipo { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.cs-standings-table td.cs-standings-pts { color: var(--gold-soft); font-weight: 800; }

/* =============================================================
   Bracket (eliminatorias)
   ============================================================= */
.cs-bracket-columns { display: flex; flex-direction: column; gap: 2.2rem; }
.cs-bracket-round-title {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.cs-bracket-round .cs-matches-grid { gap: .9rem; }
.cs-bracket-round-fecha {
  text-align: center; margin-top: 1rem; padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-3);
}

/* Lineas conectoras entre rondas (solo en el layout de columnas lado a lado,
   >=960px -- ver media query mas abajo). Como el admin arma cada partido de
   eliminatoria a mano (sin registrar de que llave especifica sale cada
   equipo, ver CopaShadayAdmin::setPartidos()), estas lineas conectan las
   RONDAS entre si -- no un partido puntual con su "padre" exacto -- para no
   sugerir un emparejamiento que el sistema no sabe con certeza */
@media (min-width: 960px) {
  .cs-match-card { position: relative; }
  .cs-bracket-round:not(:first-child) .cs-matches-grid { position: relative; }
  .cs-bracket-round:not(:first-child) .cs-matches-grid::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -1.1rem;
    width: 1px;
    background: rgba(213, 172, 102, 0.35);
  }
  .cs-bracket-round:not(:last-child) .cs-match-card::after {
    content: "";
    position: absolute;
    top: 50%; right: -1.1rem;
    width: 1.1rem; height: 1px;
    background: rgba(213, 172, 102, 0.35);
  }
  .cs-bracket-round:not(:first-child) .cs-match-card::before {
    content: "";
    position: absolute;
    top: 50%; left: -1.1rem;
    width: 1.1rem; height: 1px;
    background: rgba(213, 172, 102, 0.35);
  }
  /* Las columnas del bracket son bastante mas angostas que una fila de
     calendario a ancho completo -- sin esto, nombres como "IE San Martin"
     quedaban cortados en "IE S..." */
  .cs-bracket-round .cs-match-team-name {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: .78rem; line-height: 1.15;
  }
}

/* =============================================================
   Preview de secciones en el Hero/Home (calendario y equipos resumidos)
   ============================================================= */
.cs-preview-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .cs-teams-grid { grid-template-columns: repeat(3, 1fr); }
  .cs-match-card { grid-template-columns: 1fr auto 1fr; }
}
@media (min-width: 960px) {
  .cs-teams-grid { grid-template-columns: repeat(4, 1fr); }
  .cs-bracket-columns { flex-direction: row; align-items: flex-start; }
  .cs-bracket-round { flex: 1; min-width: 0; }
}

/* =============================================================
   Inscripcion de colegios (formulario publico)
   ============================================================= */
/* Honeypot: trampa anti-spam, invisible para una persona (calco de
   Assets/css/public/inscripcion.css, que esta pagina no carga) */
.hp-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

.cs-form-row { display: grid; grid-template-columns: 1fr; gap: 0 1.2rem; }
.cs-form-error {
  display: block; color: var(--cs-roja); font-size: .8rem; min-height: 1.1em; margin-top: .2rem;
}
.cs-form-jugadores-titulo { font-size: 1.1rem; margin: 1.6rem 0 1rem; }
.cs-form-jugador-row {
  display: grid; grid-template-columns: 1fr 90px auto; gap: .7rem; align-items: end; margin-bottom: .8rem;
}
.cs-form-jugador-row .field { margin-bottom: 0; }
.btn-quitar-jugador {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  border: 1px solid var(--line-soft); color: var(--ink-mute);
  display: grid; place-items: center;
}
.btn-quitar-jugador:hover { border-color: var(--cs-roja); color: var(--cs-roja); }
.cs-form-submit-wrap { margin-top: 1.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }

.cs-form-ok { text-align: center; padding: 3rem 1rem; }
.cs-form-ok-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.2rem;
  background: rgba(22, 163, 74, 0.14); color: var(--cs-verde);
  display: grid; place-items: center;
}
.cs-form-ok-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 2; }
.cs-form-ok h2 { margin-bottom: .6rem; }
.cs-form-ok p { color: var(--ink-mute); }

@media (min-width: 640px) {
  .cs-form-row { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   Modal de detalle de partido (Calendario/Bracket/Home preview).
   Modal propio en CSS/JS -- esta pagina publica no carga Bootstrap JS
   (a diferencia del panel admin), asi que no puede usar sus modales
   ============================================================= */
.cs-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5, 7, 10, 0.72);
  padding: 1.2rem;
  align-items: center; justify-content: center;
}
.cs-modal-overlay.is-open { display: flex; }
.cs-modal-box {
  position: relative;
  width: min(420px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: linear-gradient(165deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.6rem 1.6rem;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}
.cs-modal-close {
  position: absolute; top: .8rem; right: .8rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(245, 243, 236, 0.06); color: var(--cream-3);
  font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
}
.cs-modal-close:hover { color: var(--cream); background: rgba(245, 243, 236, 0.12); }

.cs-modal-jornada {
  text-align: center; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.cs-modal-equipos {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  text-align: center; margin-bottom: 1.6rem;
}
.cs-modal-equipo { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.cs-modal-escudo {
  width: 64px; height: 64px; border-radius: 12px;
  background: radial-gradient(circle at 32% 28%, var(--bg-4), var(--bg-3));
  border: 1px solid rgba(213, 172, 102, 0.35);
  display: grid; place-items: center; overflow: hidden;
  color: var(--gold); font-family: var(--cs-display); font-size: 1.1rem;
}
.cs-modal-escudo img { width: 100%; height: 100%; object-fit: contain; }
.cs-modal-equipo-nombre {
  font-family: var(--cs-display); text-transform: uppercase; letter-spacing: -0.01em;
  font-size: .84rem; color: var(--cream);
}
.cs-modal-centro { min-width: 60px; }
.cs-modal-marcador { font-family: var(--cs-display); font-size: 2rem; color: var(--cs-volt); }
.cs-modal-vs { font-size: .95rem; color: var(--cream-3); }

.cs-modal-datos { display: grid; gap: .9rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.cs-modal-dato { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.cs-modal-dato span:first-child { color: var(--cream-3); }
.cs-modal-dato span:last-child { color: var(--cream); font-weight: 700; text-align: right; }

/* ---- Pago de la inscripcion y autorizaciones (formulario publico) ---- */
.cs-form-pago {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.cs-form-pago-monto {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.cs-form-pago-datos {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
  line-height: 1.7;
}

.cs-form-pago-aviso {
  margin: 0 0 0.75rem;
  opacity: 0.8;
}

/* La autorizacion va por jugador dentro de su fila, y la del Director una sola
   vez para todo el formulario: comparten estilo para que se lean igual */
.cs-form-autorizacion {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cs-form-autorizacion label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.cs-form-autorizacion input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
  width: auto;
}

.cs-form-autorizacion-director {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1rem;
  margin: 1.25rem 0;
}