/* ═══════════════════════════════════════════════════════════════
   HORARIO DEL EVENTO
   Reproduce el cartel en HTML: misma cabecera (tarjeta azul petroleo
   + banda roja), mismos raíles laterales y mismas bandas de color por
   sesión, pero como tabla de verdad — se lee en el móvil, se puede
   seleccionar el texto y se imprime bien.

   El color de cada fila viene del dato (`color` en horario.json), no
   del CSS: así un cartel nuevo solo necesita cambiar el JSON.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800;900&display=swap');

:root {
  --fondo: #1a1f29;         /* azul casi negro del cartel */
  --teal: #1b6280;          /* tarjeta de cabecera, cabecera de tabla y raíl */
  --banda: #e01b35;         /* banda roja de fecha y sede */
  --hito: #10141b;          /* filas de organización, negro azulado */
  --tinta: #ffffff;
  --tinta-2: rgba(255,255,255,.88);
  --tinta-3: rgba(255,255,255,.62);
  --separador: rgba(255,255,255,.92);

  /* Colores de grupo, en RGB sueltos para poder graduarles el alfa */
  --c-magenta: 158, 52, 112;
  --c-oliva:   170, 174, 48;
  --c-rojo:    209, 26, 52;
  --c-verde:   19, 124, 98;
  --c-celeste: 31, 141, 195;
  --c-indigo:  63, 63, 150;
  --c-pausa:   224, 137, 155;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100%;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  padding: 0 18px 48px;
  background: var(--fondo);
}

.home-btn {
  display: inline-block; margin: 14px 0 10px; padding: 7px 14px;
  background: rgba(255,255,255,.08); color: var(--tinta); text-decoration: none;
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
}
.home-btn:hover { background: rgba(255,255,255,.16); }

.schedule-wrap { max-width: 1320px; margin: 0 auto; }
.sin-horario {
  margin-top: 40px; padding: 30px; text-align: center;
  background: rgba(255,255,255,.06); border-radius: 14px; font-size: 16px;
}

/* ═══════ Cabecera: tarjeta azul + banda roja ═══════
   La plantilla mete el título y la fecha en .head-main y la sede en
   .head-side. Con `display: contents` esos dos envoltorios desaparecen
   de la maquetación y sus hijos se colocan directamente en la rejilla,
   que es lo que permite montar el cartel sin tocar el HTML. */
.sched-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo  titulo titulo"
    "fecha fecha  sede";
  gap: 9px 0;
  margin-bottom: 18px;
}
.head-main, .head-side { display: contents; }

/* El logo va como pseudo-elemento: es decoración del cartel, no contenido. */
.sched-header::before {
  content: "";
  grid-area: logo;
  width: clamp(92px, 12vw, 168px);
  background: var(--teal) url('logo.png') no-repeat center / contain;
  background-origin: content-box;
  padding: 14px 10px 14px 22px;
  border-radius: 20px 0 0 20px;
}

.event-title {
  grid-area: titulo;
  background: var(--teal);
  border-radius: 0 20px 20px 0;
  padding: 22px 28px 22px 14px;
  display: flex; align-items: center;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(21px, 3.9vw, 54px);
  font-weight: 800; line-height: 1.04; letter-spacing: -.015em;
  text-transform: uppercase;
}
.tit-acento { color: #ff2f4d; }

.event-when, .event-sede {
  background: var(--banda);
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(15px, 2.4vw, 34px);
  font-weight: 800; letter-spacing: -.01em; text-transform: uppercase;
  padding: 12px 24px;
  display: flex; align-items: center;
}
.event-when { grid-area: fecha; border-radius: 8px 0 0 8px; }
.event-sede { grid-area: sede; border-radius: 0 8px 8px 0; justify-content: flex-end; color: var(--tinta); }

/* Logo del kartódromo, cuando el evento lo trae en vez de texto */
.sede-logo {
  grid-area: sede;
  width: clamp(120px, 16vw, 200px);
  aspect-ratio: 1000 / 561;
  background: var(--banda) no-repeat center / contain;
  border-radius: 0 8px 8px 0;
}
/* Subtítulo opcional: si el cartel no lo lleva, no debe ocupar sitio */
.event-sub {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(13px, 1.8vw, 20px); font-weight: 800;
  text-transform: uppercase; padding: 4px 2px; color: var(--tinta-2);
}
.event-sub:empty { display: none; }

/* ═══════ Bloques con su raíl lateral ═══════ */
.bloque {
  display: grid;
  grid-template-columns: clamp(40px, 5.4vw, 78px) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 6px;      /* casi pegados: en el cartel son una sola tabla */
}
.rail { border-radius: 18px; display: flex; justify-content: center; align-items: center; }
.rail-rojo    { background: var(--banda); }
.rail-teal    { background: var(--teal); }
.rail-neutro  { background: transparent; }
.rail-img { width: 100%; background: no-repeat center / contain; }
/* Rótulo en vertical, leyéndose de abajo hacia arriba como en el cartel */
.rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(13px, 1.6vw, 21px);
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta);
  padding: 18px 0;
}

/* ═══════ Tabla ═══════
   Columnas fijas por <colgroup>: cada bloque es una tabla distinta y sin
   esto no alinearían entre sí. */
.sched-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 2px; }
.col-hora  { width: 8%; }
.col-ses   { width: 24%; }
.col-grupo { width: 14%; }
.col-dur   { width: 12.5%; }
.col-part  { width: 41.5%; }

/* La cabecera de columnas solo se pinta una vez, en el primer bloque */
.bloque ~ .bloque thead { display: none; }

.sched-table thead th {
  background: var(--teal); color: var(--tinta);
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(10px, 1.15vw, 14px); font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase;
  padding: 12px 14px; text-align: left; white-space: nowrap;
}

.sched-table td {
  background: var(--hito);
  padding: 11px 14px; vertical-align: middle;
  font-size: clamp(11px, 1.12vw, 14.5px); color: var(--tinta);
}
/* Los filetes blancos verticales del cartel */
.sched-table th.c-hora, .sched-table td.c-hora,
.sched-table th.c-dur,  .sched-table td.c-dur,
.sched-table th.c-part, .sched-table td.c-part { border-left: 2px solid var(--separador); }

.c-hora { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-dur { white-space: nowrap; color: var(--tinta-2); }
.sched-table td.c-grupo { padding: 0; }
.c-part { color: var(--tinta-2); }
.ses-name { font-weight: 500; }
.c-ses-grande .ses-name {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(13px, 1.7vw, 21px); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em;
}

/* ═══════ Bandas de color por sesión ═══════
   La fila se pinta entera con el color de su grupo y se va apagando
   hacia la derecha, como en el cartel. El degradado va en el <tr> para
   que recorra la fila completa y no se repita celda a celda. */
.row-ses td { background: rgba(255,255,255,.05); }
tr[class*="rowc-"] td { background: transparent; }
tr[class*="rowc-"] {
  background-image: linear-gradient(90deg,
    rgba(var(--c), var(--a, .95)) 0%,
    rgba(var(--c), var(--a, .95)) 46%,
    rgba(var(--c), .26) 100%);
}
.rowc-magenta { --c: var(--c-magenta); }
.rowc-oliva   { --c: var(--c-oliva); }
.rowc-rojo    { --c: var(--c-rojo); }
.rowc-verde   { --c: var(--c-verde); }
.rowc-celeste { --c: var(--c-celeste); }
.rowc-indigo  { --c: var(--c-indigo); }
/* El bloque de Time Attack se va aclarando fila a fila en el cartel */
.rowc-magenta:nth-child(2) { --a: .88; }
.rowc-magenta:nth-child(3) { --a: .80; }
.rowc-magenta:nth-child(4) { --a: .72; }
.rowc-magenta:nth-child(5) { --a: .64; }
.rowc-magenta:nth-child(n+6) { --a: .56; }

/* Filas de organización (convocatoria, briefing, trofeos) */
.row-hito td { background: var(--hito); }
.row-hito .ses-name { font-weight: 600; }
.row-hito .c-dur, .row-hito .c-part { color: var(--tinta-2); }

/* Match race y similares */
.row-destacada td { background: rgba(255,255,255,.16); }
.row-destacada .ses-name { text-transform: uppercase; }

/* Pausa + paella */
.row-pausa td { background: rgba(var(--c-pausa), 1); color: #3a1520; }
.row-pausa .ses-name {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(14px, 2vw, 24px); font-weight: 800; text-transform: uppercase;
}
.row-pausa .c-part { color: #3a1520; font-weight: 700; text-align: right; }

/* Fin de evento */
.row-fin td { background: rgba(255,255,255,.05); color: var(--tinta-3); }
.row-fin .ses-name { text-transform: uppercase; font-weight: 600; letter-spacing: .06em; }

/* ═══════ Celda de grupo: bloque macizo de color, como en el cartel ═══════ */
tr[class*="rowc-"] .c-grupo { background: rgba(var(--c), 1); }
.chip {
  display: block; padding: 11px 14px; line-height: 1.2;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: clamp(10px, 1.12vw, 14px); font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
}

.swap { font-size: 1.2em; opacity: .9; }

.sched-foot {
  text-align: center; color: var(--tinta-3);
  font-size: 12.5px; padding: 16px 0 4px;
}

/* ═══════ Móvil: cada fila pasa a ficha ═══════ */
@media (max-width: 860px) {
  .sched-header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "logo  titulo"
      "fecha fecha"
      "sede  sede";
    gap: 6px 0;
  }
  .event-when { border-radius: 8px; }
  .event-sede { border-radius: 8px; justify-content: flex-start; }
  .sede-logo { border-radius: 8px; }

  /* Se conserva el raíl, más estrecho: es parte de la identidad del cartel */
  .bloque { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
  .rail { border-radius: 12px; }
  .rail span { font-size: 12px; padding: 10px 0; }

  .sched-table thead, .bloque ~ .bloque thead { display: none; }
  .sched-table, .sched-table tbody, .sched-table tr, .sched-table td { display: block; width: 100%; }
  .sched-table { table-layout: auto; }
  .sched-table tr { border-radius: 10px; margin-bottom: 8px; padding: 8px 10px; overflow: hidden; }
  .sched-table tr.row-ses { background: rgba(255,255,255,.07); }
  tr[class*="rowc-"] {
    background-image: linear-gradient(90deg,
      rgba(var(--c), var(--a, .95)) 0%, rgba(var(--c), .18) 100%);
  }
  .sched-table td, .sched-table td.c-hora, .sched-table td.c-dur, .sched-table td.c-part {
    background: transparent; border: 0; border-radius: 0; padding: 3px 0;
    display: flex; gap: 10px; align-items: baseline;
  }
  .sched-table td::before {
    content: attr(data-label); flex: 0 0 84px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: rgba(255,255,255,.62);
  }
  .sched-table td:empty { display: none; }
  .sched-table td.c-grupo { padding: 3px 0; }
  tr[class*="rowc-"] .c-grupo { background: transparent; }
  .chip { display: inline-block; border-radius: 5px; padding: 4px 10px; background: rgba(var(--c), 1); }
  .sched-table tr.row-hito { background: var(--hito); }
  .sched-table tr.row-pausa { background: rgba(var(--c-pausa), 1); }
  .row-pausa .c-part { text-align: left; }
  .sched-table tr.row-destacada { background: rgba(255,255,255,.18); }
  .sched-table tr.row-fin { background: rgba(255,255,255,.05); }
  .c-ses[rowspan] { display: flex; }
}

/* ═══════ Impresión ═══════ */
@media print {
  body { background: #fff; color: #111; padding: 0; }
  .home-btn, .sched-foot { display: none; }
  .event-title, .event-when, .event-sede { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sched-table td { color: #fff; }
  tr[class*="rowc-"], .row-hito td, .sched-table thead th,
  .sched-header::before, .event-title, .event-when, .event-sede, .rail {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}