/* Estilos del sitio público. Mobile-first — ver docs/DISENO.md. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  transition: background-color 0.15s ease, color 0.15s ease;
}

main {
  flex: 1 0 auto;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

/* line-height propio (no el 1.5 heredado de body): la fuente display es
   condensada/grande y con el interlineado de párrafo dejaba un espacio en
   blanco grande entre el título y lo que sigue, aparte del margin-bottom
   (ej. entre el nombre del evento y la ubicación en .event-card). */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 12px;
}

/* Acento de título de sección: corte diagonal a 12° (manual de marca · 02,
   elemento gráfico "corte diagonal · fotos y banners"), reutilizado aquí
   como marca antes del h1 de cada sección principal (Campeonatos,
   Calendario, Mapa, Eventos pasados). El SVG trae el bloque en Asfalto
   fijo, así que se swapea por la versión "negativo" (bloque en Tiza) en
   modo oscuro — mismo mecanismo que el logo del navbar. */
.page-header h1,
.calendar-page>h1 {
  display: flex;
  align-items: center;
  gap: 0.35em;
}

.page-header h1::before,
.calendar-page>h1::before {
  content: "";
  flex: none;
  height: 0.8em;
  aspect-ratio: 365 / 240;
  background-image: url("../img/elementos-graficos/raceday-corte-diagonal-color.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

:root[data-theme="dark"] .page-header h1::before,
:root[data-theme="dark"] .calendar-page>h1::before {
  background-image: url("../img/elementos-graficos/raceday-corte-diagonal-negativo.svg");
}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) .page-header h1::before,
  :root:not([data-theme="light"]) .calendar-page>h1::before {
    background-image: url("../img/elementos-graficos/raceday-corte-diagonal-negativo.svg");
  }
}

/* ---- Navbar ---- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
}

.navbar__brand {
  display: flex;
}

.navbar__brand img {
  display: block;
}

.navbar__brand .logo--dark {
  display: none;
}

:root[data-theme="dark"] .navbar__brand .logo--light {
  display: none;
}

:root[data-theme="dark"] .navbar__brand .logo--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navbar__brand .logo--light {
    display: none;
  }

  :root:not([data-theme="light"]) .navbar__brand .logo--dark {
    display: block;
  }
}

/* Utilidad genérica para elegir asset según el tema (mismo mecanismo que
   el logo de arriba, generalizado): útil para <img> de color fijo que no
   se pueden adaptar con CSS solo (ej. los pictogramas SVG de disciplina). */
.theme-swap--dark {
  display: none;
}

:root[data-theme="dark"] .theme-swap--light {
  display: none;
}

:root[data-theme="dark"] .theme-swap--dark {
  display: inline-block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-swap--light {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-swap--dark {
    display: inline-block;
  }
}

/* Botón hamburguesa: solo mobile, abre el menú lateral (.navbar__links). */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle__icon {
  width: 22px;
  height: 22px;
}

/* Fondo oscuro detrás del menú lateral abierto — clic afuera lo cierra. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21, 23, 28, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 90;
}

.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Botón de tema: flotante sobre el contenido (no en la navbar), se
   esconde con el scroll — ver el script en base.html. */
.theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(21, 23, 28, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.theme-toggle.is-hidden {
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
}

.theme-toggle__icon {
  width: 18px;
  height: 18px;
}

.theme-toggle__icon--moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle__icon--moon {
    display: block;
  }
}

/* Mobile: menú lateral (drawer) que entra desde la derecha, sobre un
   fondo oscuro (.nav-backdrop). En desktop se vuelve una fila de links
   normal dentro de la navbar (media query más abajo). */
.navbar__links {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(280px, 80vw);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 32px 24px;
  background: var(--surface);
  border-left: 2px solid var(--border);
  font-weight: 600;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 100;
}

.navbar__links.is-open {
  transform: translateX(0);
}

.navbar__links a {
  text-decoration: none;
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  font-size: 18px;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .nav-backdrop {
    display: none;
  }

  .navbar__links {
    position: static;
    height: auto;
    width: auto;
    flex-direction: row;
    gap: 20px;
    padding: 0;
    background: none;
    border: none;
    transform: none;
    transition: none;
    z-index: auto;
  }

  .navbar__links a {
    font-size: inherit;
  }
}

/* Filtro por región (ver _region_nav_filter.html):
   - "inline": en la página, a continuación del filtro de disciplina (ver
     home.html y past_events.html), visible tanto en mobile como en desktop. */
.nav-region-filter__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-cemento);
}

.nav-region-filter__label-text {
  flex: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-region-filter__select {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding: 0 10px;
  border-radius: var(--radius-button);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
}

.nav-region-filter--menu {
  display: none;
}

.nav-region-filter--inline {
  display: flex;
  padding: 5px 20px 12px;
}

@media (min-width: 768px) {
  .nav-region-filter--inline .nav-region-filter__select {
    flex: none;
    min-height: 36px;
    font-size: 13px;
  }
}

/* ---- Botones ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: 0 20px;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-naranja);
  color: var(--color-asfalto);
}

.btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* ---- Hero ---- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-asfalto);
  color: var(--color-tiza);
  padding: 28px 20px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__flag {
  position: absolute;
  inset: 0;
  background: var(--color-naranja);
  clip-path: polygon(0 92%, 100% 78%, 100% 100%, 0 100%);
}

.hero__content {
  position: relative;
  max-width: 640px;
}

.hero__content h1 {
  font-size: clamp(28px, 6vw, 44px);
}

.hero__content p {
  color: var(--color-tiza);
  opacity: 0.85;
  margin: 0;
}

/* ---- Filtro de disciplina ---- */

.discipline-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  overflow-x: auto;
}

.discipline-filter__label {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-cemento);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}

/* Chico a propósito (no sigue --touch-target-min): son filtros secundarios,
   uno junto a otro en una fila que puede scrollear horizontal — no deben
   competir en tamaño con las acciones principales de la página. */
.discipline-filter__pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-button);
  border: 2px solid var(--border);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.discipline-filter__pill.is-active {
  background: var(--text);
  color: var(--bg);
}

/* ---- Listado de eventos ---- */

.events-list {
  padding: 8px 20px 40px;
}

.event-count {
  color: var(--color-cemento);
  font-weight: 400;
}

.event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.empty-state {
  color: var(--color-cemento);
}

/* ---- Tarjeta de evento ---- */

.event-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-button);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(21, 23, 28, 0.12);
}

/* Dos columnas: disciplina(s) a la izquierda, categoría (tipo de carrera)
   a la derecha. El estado del evento (suspendido/reprogramado/etc) y el
   badge "HOY" ya no van en el header — ver .event-card__info > .badge y
   .event-card__date-col respectivamente. */
.event-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-asfalto);
}

.event-card__header-left,
.event-card__header-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* En modo oscuro, Asfalto (header) y --surface (cuerpo de la tarjeta,
   #1f222a) quedan casi del mismo tono — sin este borde el header pierde
   su separación visual del resto de la tarjeta. En modo claro no hace
   falta: el header ya contrasta fuerte contra el cuerpo blanco. */
:root[data-theme="dark"] .event-card__header {
  border-bottom: 1px solid var(--color-cemento);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .event-card__header {
    border-bottom: 1px solid var(--color-cemento);
  }
}

/* Etiquetas de disciplina/categoría. */
.discipline-tag,
.category-tag,
.women-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Poco relleno horizontal: en móvil, "Femenino" + "Social Ride" (el caso
     más ancho) tienen que caber en una sola línea. */
  padding: 4px 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Variante "fondo blanco" del manual de marca (sistema gráfico, sección
   3): chip con borde, usa los tokens --surface/--text/--border así que
   se adapta con el tema — antes era Asfalto fijo y en modo oscuro se
   confundía con el fondo de la página (--bg también queda Asfalto). El
   ícono (dos <img>, ver events_extras.py) sigue al mismo tema. */
.discipline-tag,
.women-tag {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius-button);
}

/* Chip de categoría: no está en el manual (es propio del proyecto), de
   fondo fijo Naranja — se mantiene igual en ambos temas y con su forma
   original (pill), sin relación con el cambio de arriba. */
.category-tag {
  background: var(--color-naranja);
  color: var(--color-asfalto);
  border-radius: 999px;
}

.discipline-tag__icon,
.category-tag__icon,
.women-tag__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Chip de distancia — cuadrado (no pill), al costado del chip de
   disciplina en el header de la tarjeta. El fondo del header es Asfalto
   fijo en ambos temas (ver .event-card__header), así que el chip usa
   colores fijos en vez de los tokens semánticos. */
.distance-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-tiza);
  background: rgba(245, 242, 235, 0.12);
  border: 1px solid var(--color-cemento);
  border-radius: 4px;
}

/* Fila de distancias del evento, en el cuerpo de la tarjeta (fondo claro)
   — no confundir con el chip de distancia "grande" del header, que usa
   colores fijos para el fondo Asfalto (ver .distance-chip). La categoría
   va en el header (ver .event-card__header-right), no acá. */
.event-card__category-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.distance-chip--small {
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-cemento);
  background: transparent;
  border-color: var(--color-cemento);
}

/* Base compartida — display:inline-flex + align-items:center es lo que
   centra el texto verticalmente: sin esto, cuando el badge convive con
   chips más altos (.discipline-tag, etc.) en un contenedor flex, el
   contenedor lo estira (align-items:stretch por defecto) y el texto
   queda pegado arriba en vez de centrado en esa altura extra. */
.badge {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  border-radius: 4px;
}

.badge--live {
  background: var(--color-amarillo);
  color: var(--color-asfalto);
  padding: 4px 8px;
}

/* Cancelado: el estado más "final" — chip sólido. */
.badge--cancelado {
  background: var(--color-cemento);
  color: var(--color-tiza);
  padding: 4px 8px;
}

/* Suspendido: pausado, no necesariamente definitivo — mismo tono que
   Cancelado pero en outline, para diferenciar el matiz. */
.badge--suspendido {
  background: transparent;
  border: 1.5px solid var(--color-cemento);
  color: var(--color-cemento);
  padding: 2.5px 8px;
}

/* Reprogramado: informativo, el evento sigue en pie — outline en Naranja. */
.badge--reprogramado {
  background: transparent;
  border: 1.5px solid var(--color-naranja);
  color: var(--color-naranja);
  padding: 2.5px 8px;
}

/* Cancelado/Suspendido atenúan la tarjeta — Reprogramado no, el evento
   sigue en pie. */
.event-card--muted .event-card__info h3 {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Chip de región + estado (suspendido/cancelado) en una misma fila, el
   estado al costado de la región. */
.event-card__tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.event-card__tag-row .region-tag--small {
  margin-top: 0;
}

/* Borde amarillo cuando el evento es hoy — mismo tono que .badge--live,
   para que el destaque de la tarjeta y el badge "HOY" se lean como una
   sola señal. */
.event-card--today {
  border: 2px solid var(--color-amarillo);
}

.event-card__body {
  display: flex;
  gap: 16px;
  padding: 16px;
}

/* Columna de fecha: agrupa el cuadro de día/mes con el badge "HOY" debajo,
   cuando corresponde (evento programado para hoy). */
.event-card__date-col {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.date-block {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-asfalto);
  border-radius: var(--radius-button);
  color: var(--color-tiza);
}

.date-block__day {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}

.date-block__month {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-naranja);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Eventos de más de un día (carreras de etapas): mismo cuadro que una
   fecha individual (día grande + mes chico), pero el día muestra
   "10-12" — se achica un poco y se ajusta el tracking para que el rango
   entero quepa en el mismo ancho de 56px sin desbordar. */
.date-block__day--compact {
  font-size: 16px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Cuando el rango cruza de mes ("NOV-DIC") el texto es más largo que un
   mes solo — se achica para que siga entrando en los 56px del cuadro. */
.date-block__month--compact {
  font-size: 9px;
  letter-spacing: 0.02em;
}

.event-card__info h3 {
  font-size: 18px;
  margin: 0 0 6px;
}


.event-card__meta {
  color: var(--color-cemento);
  font-size: 14px;
  margin: 0;
}

.pin-icon {
  width: 14px;
  height: 14px;
  flex: none;
  vertical-align: -2px;
}

/* Fila campeonato: el link (ícono trofeo + nombre) y, aparte, el número
   de fecha (F1, F2…) como elemento separado — el trofeo va con el nombre,
   no con el número. */
.event-card__championship {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* Cada campeonato = link + número de fecha, juntos; entre campeonatos hay
   más aire en el detalle. */
.event-card__championship-item {
  display: inline-flex;
  align-items: center;
  /* Nombre (12px, Barlow) y número (13px, Barlow Condensed) tienen distinto
     tamaño y fuente: centrarlos por caja los deja desfasados. Se alinean por
     la línea base del texto (la última del link, que tiene el ícono antes
     del texto); el centrado de arriba queda de respaldo. */
  align-items: last baseline;
  gap: 8px;
}

.event-detail .event-card__championship {
  column-gap: 20px;
  row-gap: 10px;
}

/* Link al campeonato — chip de disciplina/categoría son fondo fijo,
   este es un link real (navega al resumen de fechas), por eso va sin
   relleno, solo texto+ícono en Naranja. */
.championship-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-naranja);
  text-decoration: none;
}

.championship-link:hover {
  text-decoration: underline;
}

.championship-link__icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.event-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 16px 16px;
}

/* ---- Región ---- */

/* Chip de región: la región se muestra aparte de localidad/comuna (ver
   Event.location_line_display()), con un pictograma propio — un badge con
   el número romano de la región (o "RM"), según la división política de
   Chile — más el nombre abreviado ("(IV) R. Coquimbo"). Mismo patrón de
   tokens que .discipline-tag (se adapta con el tema). */
.region-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius-button);
}

/* El pictograma en sí: numeral fijo Asfalto/Tiza (no sigue el tema, igual
   que .date-block) para que siga siendo legible como "sello" propio dentro
   del chip, sea cual sea el tema activo. */
.region-tag__numeral {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 12px;
  color: var(--color-tiza);
  background: var(--color-asfalto);
  border-radius: 4px;
}

/* Igual que .category-tag--small: versión chica para la tarjeta y el
   calendario, donde la región es información secundaria. */
.region-tag--small {
  align-self: flex-start;
  /* dentro de .calendar-item__body (flex column) no debe estirarse al ancho del contenedor */
  padding: 2px 8px 2px 2px;
  font-size: 10px;
  font-weight: 500;
  gap: 4px;
  margin-top: 6px;
}

.region-tag--small .region-tag__numeral {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  border-radius: 3px;
}

/* ---- Detalle de evento ---- */

.event-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.event-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.event-detail__meta {
  color: var(--color-cemento);
  font-weight: 600;
}

.event-detail__links {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn--icon {
  padding: 0 16px;
  gap: 8px;
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.event-detail__status-notice {
  padding: 12px 16px;
  border-radius: var(--radius-button);
  font-weight: 600;
}

.event-detail__status-notice--muted {
  background: var(--color-cemento);
  color: var(--color-tiza);
}

.event-detail__status-notice--info {
  background: transparent;
  border: 1.5px solid var(--color-naranja);
  color: var(--color-naranja);
}

.event-detail__description {
  margin: 16px 0;
}

/* Los @usuario de la descripción (filtro linkify_instagram): mismo naranja
   que .championship-link, para distinguirlos del texto corrido. */
.event-detail__description a {
  color: var(--color-naranja);
  text-decoration: none;
}

.event-detail__description a:hover {
  text-decoration: underline;
}

.event-detail__description-label {
  margin: 0 0 8px;
  font-weight: 700;
}

.event-detail__distances {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}

.event-detail__distances-hint {
  margin: -20px 0 24px;
  font-size: 12px;
  color: var(--color-cemento);
}

.event-detail__distances th,
.event-detail__distances td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--color-cemento);
}

.event-detail__distances th {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--color-cemento);
}

.event-detail__distances-row--gpx td:first-child {
  border-left: 3px solid transparent;
  padding-left: 8px;
}

.event-detail__distances-row--gpx {
  cursor: pointer;
}

.event-detail__distances-row--gpx.is-selected td {
  font-weight: 700;
}

.event-detail__distances-row--gpx:hover td:first-child,
.event-detail__distances-row--gpx.is-selected td:first-child,
.event-detail__distances-row--gpx.is-active td:first-child {
  border-left-color: var(--color-naranja);
}

.distance-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* Colores en el mismo orden que TRACK_COLORS en apps/events/views.py */
.distance-color-dot--0 {
  background-color: #e8623c;
}

.distance-color-dot--1 {
  background-color: #2f6f4f;
}

.distance-color-dot--2 {
  background-color: #2f5fa8;
}

.distance-color-dot--3 {
  background-color: #8a4fa8;
}

.distance-color-dot--4 {
  background-color: #a88a2f;
}

.gpx-download-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-naranja);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.gpx-download-link__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Listado de fechas de un campeonato: reutiliza .calendar-list/.calendar-item
   (mismo componente del calendario) dentro de la página de detalle. */
.event-detail .calendar-list {
  margin: 24px 0;
}

.event-detail__deadline {
  color: var(--color-cemento);
  font-size: 14px;
  margin-top: 8px;
}

.event-detail__updated {
  color: var(--color-cemento);
  font-size: 13px;
  margin-top: 8px;
}

.event-detail__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid var(--color-cemento);
  border-bottom: 1px solid var(--color-cemento);
}

.event-detail__stats dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-cemento);
}

.event-detail__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
}

.gpx-map {
  margin: 24px 0;
  border-radius: var(--radius-button);
  overflow: hidden;
  /* Leaflet usa z-index internos de hasta 1000 en sus controles/panes —
     sin esto, "escapan" del contenedor y quedan por encima del menú
     lateral (z-index 100) y su backdrop cuando están abiertos. */
  isolation: isolate;
}

.event-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

/* Botones de la vista de detalle: un poco más compactos que el .btn base
   (que usa el alto táctil completo). */
.event-detail .btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.event-detail .btn--icon {
  gap: 5px;
}

.event-detail .btn__icon {
  width: 14px;
  height: 14px;
}

/* ---- Calendario ---- */

.calendar-page {
  padding: 24px 20px 48px;
}

.calendar-subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.calendar-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.calendar-filters__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-cemento);
}

/* En mobile, disciplina arriba y región debajo */
.calendar-filters__label--discipline {
  order: 1;
}

.calendar-filters__label--region {
  order: 2;
}

.calendar-filters__label-text {
  flex: none;
  min-width: 80px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calendar-filters__select {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding: 0 10px;
  border-radius: var(--radius-button);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .calendar-filters {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
  }

  .calendar-filters__label {
    flex: none;
  }

  .calendar-filters__label--region {
    order: 1;
  }

  .calendar-filters__label--discipline {
    order: 2;
  }

  .calendar-filters__label-text {
    min-width: auto;
  }

  .calendar-filters__select {
    flex: none;
    min-height: 36px;
    font-size: 13px;
  }
}

/* Lista compacta agrupada por mes — a diferencia de .event-grid (home),
   cada fila es un link entero clickeable, sin tarjeta ni categoría: solo
   lo justo para ubicar el evento y entrar al detalle. */
.calendar-month {
  margin-bottom: 28px;
}

.calendar-month__label {
  font-size: 15px;
  font-style: normal;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-cemento);
  margin: 0 0 10px;
  padding: 0 2px;
}

.calendar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-target-min);
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  text-decoration: none;
  color: var(--text);
}

/* Columna de pictogramas a la derecha de la fila: región arriba (ver
   .calendar-item__region-badge) y disciplina(s) abajo (ver
   .calendar-item__disciplines), cada uno en su esquina — por eso ocupa todo
   el alto de .calendar-item (align-self: stretch) en vez de centrarse como
   el resto de los elementos de la fila. */
.calendar-item__corner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
}

/* Pictograma de región: mismo "sello" que .region-tag__numeral, pero suelto
   en la esquina superior derecha de la fila en vez de ir en línea junto al
   texto — la región ya se lee concatenada en .calendar-item__location. */
.calendar-item__region-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 10px;
  color: var(--color-tiza);
  background: var(--color-asfalto);
  border-radius: 3px;
}

/* Pictograma(s) de disciplina: empujado a la esquina inferior derecha
   (margin-top: auto dentro de .calendar-item__corner) sin importar si hay
   badge de región arriba o no. */
.calendar-item__disciplines {
  display: flex;
  gap: 4px;
  margin-top: auto;
}

.calendar-item:hover {
  border-color: var(--color-naranja);
}

.calendar-item__date {
  flex: none;
  width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.calendar-item__day {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  white-space: nowrap;
}

.calendar-item__weekday {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-cemento);
}

.calendar-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.25;
}

.calendar-item__title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-item__location {
  font-size: 13px;
  color: var(--color-cemento);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-item__icon {
  flex: none;
  width: 22px;
  height: 22px;
}

/* Número de fecha de campeonato dentro de una fila de .calendar-item
   (calendario y detalle de campeonato) — compacto (F1, F2…) porque el
   título ya trae el nombre del campeonato y el número de fecha. */
.round-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  color: var(--color-naranja);
}

.round-badge__icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ---- Mapa de eventos ---- */

.page-header {
  padding: 24px 20px 0;
}

/* ---- Contacto ---- */

.contact-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 20px 40px;
}

.contact-page__icon {
  margin-right: 8px;
}

/* ---- Páginas de texto (quiénes somos, disclaimer) ---- */

.text-page {
  max-width: 720px;
  padding: 16px 20px 40px;
  line-height: 1.6;
}

.text-page h2 {
  margin: 28px 0 8px;
  font-size: 20px;
}

.text-page p,
.text-page ul {
  margin: 0 0 12px;
}

.text-page a {
  color: var(--color-naranja);
}

.text-page__updated {
  font-size: 13px;
  color: var(--color-cemento);
}

.events-map {
  margin: 16px 20px 12px;
  border-radius: var(--radius-button);
  overflow: hidden;
  /* Mismo motivo que .gpx-map: aísla los z-index internos de Leaflet. */
  isolation: isolate;
}

.events-map-legend {
  margin: 0 20px 40px;
  padding: 0;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}

.events-map-legend p {
  margin: 0;
}

.events-map-legend p+p {
  margin-top: 6px;
}

/* Cifras en la fuente display de la marca (como dorsales/contadores). */
.events-map-legend strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.15em;
}

.events-map-legend__missing {
  /* Atenuado con opacidad (no Cemento fijo) para no perder contraste en modo oscuro. */
  opacity: 0.75;
}

/* ---- Campeonatos ---- */

.championship-list-page {
  padding: 16px 20px 40px;
}

.championship-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.championship-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--touch-target-min);
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  text-decoration: none;
  color: var(--text);
}

.championship-item:hover {
  border-color: var(--color-naranja);
}

.championship-item__title {
  font-weight: 700;
}

.championship-item__dates {
  font-size: 13px;
  color: var(--color-cemento);
}

/* ---- Footer ---- */

.site-footer {
  background: var(--color-asfalto);
  color: var(--color-cemento);
  display: flex;
  flex-direction: column;
}

.site-footer__row {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

.site-footer__row--flag {
  padding: 8px 0;
}

.site-footer__row--brand {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.site-footer__social {
  display: flex;
  color: var(--color-cemento);
  transition: color 0.15s ease;
}

.site-footer__social:hover {
  color: #fff;
}

.site-footer__row--links {
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 14px;
}

.site-footer__row--links a {
  color: var(--color-cemento);
  text-decoration: none;
}

.site-footer__row--links a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__row--copy {
  justify-content: center;
}

/* Bandera a cuadros: franja separadora del sistema gráfico (manual 02),
   a todo el ancho, sin borde. El SVG es un tile de 2×2 cuadros
   inclinados (raceday-bandera-cuadros.svg) que se repite horizontalmente;
   el tile está construido para calzar sin costuras pese a la inclinación. */
.site-footer__flag {
  width: 100%;
  height: 32px;
  background-image: url("../img/elementos-graficos/raceday-bandera-cuadros.svg");
  background-repeat: repeat-x;
  background-size: 32px 32px;
}

.site-footer__row--copy p {
  margin: 0;
  font-size: 14px;
}

/* ---- Breakpoints ---- */

@media (min-width: 768px) {
  .event-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .event-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ---- Calendario: vista cuadrícula ---- */

.view-toggle {
  display: inline-flex;
  margin-bottom: 20px;
  border: 2px solid var(--border);
  border-radius: var(--radius-button);
  overflow: hidden;
}

.view-toggle__option {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: 0 18px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

.view-toggle__option.is-active {
  background: var(--color-naranja);
  color: var(--color-asfalto);
}

/* Cada semana es un grid de 7 columnas independiente. Los anchos salen de
   variables: sáb/dom y los días con carreras crecen ~2.4x (vía :has sobre la
   celda de esa columna); los días sin carreras se comprimen. Las celdas de
   día ocupan toda la altura de la semana y los eventos son barras en filas
   ("lanes") encima, que abarcan las columnas de los días que cubren. */
.month-grid__week {
  --c1: 1fr;
  --c2: 1fr;
  --c3: 1fr;
  --c4: 1fr;
  --c5: 1fr;
  --c6: 2.4fr;
  --c7: 2.4fr;
  display: grid;
  /* min-content: una columna nunca baja del ancho de su etiqueta "LUN 26" */
  grid-template-columns:
    minmax(min-content, var(--c1)) minmax(min-content, var(--c2))
    minmax(min-content, var(--c3)) minmax(min-content, var(--c4))
    minmax(min-content, var(--c5)) minmax(min-content, var(--c6))
    minmax(min-content, var(--c7));
  grid-template-rows: 28px;
  column-gap: 3px;
  margin-top: 3px;
}

.month-grid__week:has(.month-cell.col-1.is-wide) { --c1: 2.4fr; }
.month-grid__week:has(.month-cell.col-2.is-wide) { --c2: 2.4fr; }
.month-grid__week:has(.month-cell.col-3.is-wide) { --c3: 2.4fr; }
.month-grid__week:has(.month-cell.col-4.is-wide) { --c4: 2.4fr; }
.month-grid__week:has(.month-cell.col-5.is-wide) { --c5: 2.4fr; }

/* Semana sin ninguna carrera: se reduce también en alto (mantiene el ancho
   de sáb/dom, pero sin el espacio para eventos). */
.month-grid__week.is-empty {
  grid-template-rows: 26px;
}

.col-1 { grid-column-start: 1; }
.col-2 { grid-column-start: 2; }
.col-3 { grid-column-start: 3; }
.col-4 { grid-column-start: 4; }
.col-5 { grid-column-start: 5; }
.col-6 { grid-column-start: 6; }
.col-7 { grid-column-start: 7; }

.span-1 { grid-column-end: span 1; }
.span-2 { grid-column-end: span 2; }
.span-3 { grid-column-end: span 3; }
.span-4 { grid-column-end: span 4; }
.span-5 { grid-column-end: span 5; }
.span-6 { grid-column-end: span 6; }
.span-7 { grid-column-end: span 7; }

.lane-1 { grid-row-start: 2; }
.lane-2 { grid-row-start: 3; }
.lane-3 { grid-row-start: 4; }
.lane-4 { grid-row-start: 5; }
.lane-5 { grid-row-start: 6; }
.lane-6 { grid-row-start: 7; }
.lane-7 { grid-row-start: 8; }
.lane-8 { grid-row-start: 9; }

.month-cell {
  /* abarca la fila de la fecha y todas las filas de eventos de la semana */
  grid-row: 1 / span 10;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 56px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
}

.month-cell.is-wide {
  min-height: 90px;
  padding: 2px 6px 6px;
}

.month-cell.is-weekend {
  border-width: 2px;
  border-color: var(--color-cemento);
}

.month-grid__week.is-empty .month-cell,
.month-grid__week.is-empty .month-cell.is-wide {
  min-height: 0;
  padding: 4px 6px;
}

.month-cell.is-outside {
  background: transparent;
  border-color: transparent;
}

.month-cell.is-today {
  outline: 2px solid var(--color-naranja);
  outline-offset: -2px;
}

.month-cell__day {
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: var(--color-cemento);
}

/* Fin de semana o día con evento (sea de un día o multidía): nombre naranja
   y número grande en el color de texto */
.month-cell.is-weekend .month-cell__day,
.month-cell.has-events .month-cell__day {
  font-size: 18px;
  color: var(--text);
}

.month-grid__week.is-empty .month-cell.is-weekend .month-cell__day {
  font-size: 14px;
}

.month-cell__dow {
  margin-right: 2px;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.06em;
}

.month-cell.is-weekend .month-cell__dow,
.month-cell.has-events .month-cell__dow {
  color: var(--color-naranja);
}

/* Barra de evento: una sola, a lo ancho de todos los días que cubre.
   Se pinta sobre las celdas (viene después en el DOM). */
.month-cell__event {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  align-self: start;
  min-width: 0;
  margin: 0 4px 3px;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--color-naranja);
  color: var(--color-asfalto);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
}

/* La barra sigue en la semana anterior/siguiente: borde recto de ese lado */
.month-cell__event.is-cont-left {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.month-cell__event.is-cont-right {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.month-cell__event:hover {
  background: var(--color-asfalto);
  color: var(--color-tiza);
}

.month-cell__title {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .month-cell {
    min-height: 72px;
  }

  .month-cell.is-wide {
    min-height: 120px;
  }

  .month-cell__event {
    font-size: 12px;
  }
}

/* Móvil: los días angostos (sin carrera propia) llevan una etiqueta compacta;
   las columnas se ajustan a ella (min-content), así no se corta ni se parte
   en dos líneas. */
@media (max-width: 767px) {
  .month-grid__week .month-cell:not(.is-wide) {
    padding: 4px 2px;
  }

  .month-grid__week .month-cell:not(.is-wide) .month-cell__day {
    font-size: 11px;
  }

  .month-grid__week .month-cell:not(.is-wide) .month-cell__dow {
    margin-right: 1px;
    font-size: 8px;
    letter-spacing: 0;
  }
}