/* /programas/. Solo tokens y piezas del sitio; sin colores de partido. Sin JS todo se apila por
   categoría; con JS (clase comparador--js) las columnas van lado a lado. */

.etiqueta {
  display: inline-block;
  padding: 0 var(--e-2);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-casilla);
  font-size: var(--t-nota);
  font-weight: 600;
  line-height: 1.5;
}

/* Qué documento tiene cada partido */
.documentos { padding-block-end: var(--e-6); }
.documentos__lista { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--e-6); }
.doc { min-width: 0; padding-block: var(--e-3); border-block-start: 1px solid var(--linea); }
.doc__titulo { margin: 0 0 var(--e-1); font-size: var(--t-base); line-height: 1.3; font-weight: 400; }
.doc__sigla { font-weight: 700; }
.doc p { margin: 0 0 var(--e-1); }
.doc__enlace a { display: inline-flex; align-items: center; min-height: var(--objetivo); }

/* Comparador */
.comparador { padding-block-start: var(--e-6); }
.comparador > p { max-width: var(--medida); }
.indice ul { display: flex; flex-wrap: wrap; column-gap: var(--e-4); }
.indice a { display: inline-flex; align-items: center; min-height: var(--objetivo); }

.mandos { max-width: 20rem; margin-block: var(--e-4); }

.barra {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  margin-inline: calc(var(--margen) * -1);
  padding: var(--e-2) var(--margen);
  background: var(--fondo);
  border-block-end: 1px solid var(--linea-fuerte);
}
.barra__selectores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.barra__campo { min-width: 0; }
.barra__campo--3, .barra__campo--4 { display: none; }
.barra .selector label { margin: 0; }

.categoria {
  padding-block-start: var(--e-6);
  scroll-margin-block-start: calc(var(--alto-barra, 0px) + var(--e-3));
}

/* Sin JS: una celda detrás de otra. */
.fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.celda { min-width: 0; }
.celda__titulo {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--e-3);
  padding-block-end: var(--e-2);
  border-block-end: 1px solid var(--linea-fuerte);
  font-size: var(--t-base);
  line-height: 1.2;
}
.celda__sigla { font-weight: 700; }
.celda__nombre { color: var(--texto-suave); font-size: var(--t-nota); font-weight: 400; }
.celda__vacia { margin: 0; color: var(--texto-suave); }

.props > li + li { margin-block-start: var(--e-4); padding-block-start: var(--e-4); border-block-start: 1px solid var(--linea); }
.prop { min-width: 0; }
.prop__texto { margin: 0 0 var(--e-2); }
.prop__tipo { margin: 0; color: var(--texto-suave); font-size: var(--t-nota); line-height: 1.4; }
.prop__etiqueta { color: var(--texto); font-weight: 600; }
.prop__fuente summary {
  padding-block: 0.75rem;
  color: var(--acento);
  font-size: var(--t-nota);
  font-weight: 600;
  cursor: pointer;
}
.prop__cita {
  margin: 0 0 var(--e-2);
  padding-inline-start: var(--e-3);
  border-inline-start: 3px solid var(--linea-fuerte);
  font-size: var(--t-nota);
  line-height: 1.45;
}
.prop__enlace { margin: 0; font-size: var(--t-nota); }
.prop__enlace a { display: inline-flex; align-items: center; min-height: var(--objetivo); overflow-wrap: anywhere; }
.prop__medio { display: block; color: var(--texto-suave); }

/* Con JS: columnas iguales, tantas como partidos visibles. El tope da unos 65 caracteres por línea
   de texto real: con 2 partidos en 1280 px no se estiran. */
.comparador--js .fila {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 30rem);
  gap: var(--e-3);
}
.comparador--js .celda[data-ranura="1"] { order: 1; }
.comparador--js .celda[data-ranura="2"] { order: 2; }
.comparador--js .celda[data-ranura="3"] { order: 3; }
.comparador--js .celda[data-ranura="4"] { order: 4; }

@media (min-width: 40em) {
  .barra__selectores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .barra__campo--3 { display: block; }
}
@media (max-width: 39.999em) {
  .comparador--js .celda[data-ranura="3"], .comparador--js .celda[data-ranura="4"] { display: none; }
}

@media (min-width: 48em) {
  .documentos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62.5em) {
  .barra__selectores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .barra__campo--4 { display: block; }
  .documentos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comparador--js .fila { gap: var(--e-5); }
}
@media (max-width: 62.499em) {
  .comparador--js .celda[data-ranura="4"] { display: none; }
}

@media print {
  .barra, .mandos { display: none; }
}