/* carreras.css
   Estilos para las páginas de listado de carreras (carreras/2026/mes/provincia).
   No define paleta ni tipografías propias: reutiliza las variables y la
   tarjeta ".legal" ya definidas en styles.css (mismo borde, mismo fondo
   "papel", mismo separador punteado) para que estas páginas se vean como
   una extensión natural del resto del sitio. Cárgalo SIEMPRE después de
   styles.css. */

/* El wordmark del header, aquí como enlace a Inicio */
a.wordmark {
  text-decoration: none;
  color: var(--ink);
}

/* La tarjeta reutiliza la clase .legal; esto son solo los añadidos
   específicos del listado de carreras dentro de ella. */

.breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
}
.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
  color: var(--bib-orange-dark);
}

.carreras-lista {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.carrera {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.carrera:last-child {
  border-bottom: none;
}

.carrera-nombre {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.carrera-nombre a {
  color: var(--bib-orange-dark);
  text-underline-offset: 2px;
}
.carrera-nombre a:hover {
  color: var(--ink);
}

.distancia-badge {
  display: inline-block;
  background: #e7e4dc;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
}

.sin-carreras {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- páginas índice (/carreras/ y /carreras/<anio>/<mes>/) ---------- */

.indice .intro {
  margin: 0 0 22px;
}

.indice .ca-grid { margin-top: 4px; }

.ca-bloque .num {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
}

.lista-meses {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
.lista-meses li {
  padding: 10px 0;
  margin: 0 !important;
  border-bottom: 1px solid var(--line);
}
.lista-meses li:last-child { border-bottom: none; }
.lista-meses a {
  font-weight: 600;
  font-size: 15.5px;
}
.lista-meses .num {
  font-size: 13px;
  color: var(--muted);
  margin-left: 6px;
}
.lista-meses .etiqueta {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fdeee4;
  color: var(--bib-orange-dark);
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: 1px;
}

.nav-meses {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 2px dashed #b9ae95;
  font-size: 14px;
  font-weight: 600;
}
.nav-meses a { color: var(--bib-orange-dark); text-underline-offset: 2px; }

.cta-suscripcion {
  margin-top: 30px;
  padding: 22px 20px;
  background: #fffdf8;
  border: 2px solid var(--ink);
  border-radius: 3px;
  text-align: center;
}
.cta-suscripcion p {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--ink);
}
.cta-suscripcion .submit-btn {
  display: inline-block;
  width: auto;
  margin-top: 0;
  padding: 12px 28px;
  color: #fff;
  text-decoration: none;
}

/* ---------- medias maratones (/carreras/medias-maratones/) ---------- */

.medias .carrera-fecha {
  margin: 0 0 3px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.medias .carrera-nombre .enlace-provincia {
  color: var(--ink);
  font-weight: 500;
}

.estado {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
}
.estado-confirmada {
  background: #e3efe8;
  color: var(--success);
}
.estado-pendiente {
  background: transparent;
  color: var(--muted);
  border: 1px dashed #b9ae95;
  padding: 3px 9px;
}

.otras-provincias {
  margin: 26px 0 0;
  font-size: 14px !important;
}

.medias .sin-carreras a { color: var(--bib-orange-dark); }

/* ---------- pop-up de suscripción (popup-newsletter.js) ---------- */

.popup-newsletter {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}
.popup-newsletter::backdrop {
  background: rgba(28, 28, 28, 0.55);
}
html:has(.popup-newsletter[open]) { overflow: hidden; }

.popup-caja {
  position: relative;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  background: #efe9db;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 26px 20px 14px;
  box-shadow: 6px 6px 0 rgba(28, 28, 28, 0.18);
}

.popup-cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: none;
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.popup-cerrar:hover { background: #e3dac6; }
.popup-cerrar:focus-visible { outline: 3px solid var(--bib-orange); outline-offset: 1px; }

.popup-titulo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  line-height: 1.05;
  text-align: center;
  margin: 4px 30px 8px;
}

.popup-subtitulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--bib-orange-dark);
  text-align: center;
  margin: 0 30px 8px;
}

.popup-lede {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  margin: 0 auto 26px;
  max-width: 360px;
}

.popup-caja .bib { padding: 30px 22px 22px; }

.popup-no-gracias {
  display: block;
  margin: 12px auto 0;
  padding: 6px 10px;
  background: none;
  border: none;
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.popup-no-gracias:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .popup-newsletter[open] { animation: popup-entrada 0.2s ease-out; }
  @keyframes popup-entrada {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}