/* ============================================================
   IEbridge — novedades (/changelog).

   Rehecho el 2026-09-30 sobre extensionbooster.net/changelog
   (medido, no a ojo), con nuestros colores y nuestra fuente:
   una columna de 896 px y una fila por versión. A la izquierda,
   pegado, qué pieza y qué versión, la fecha y cuántos cambios;
   a la derecha, un cambio por línea con su insignia.

   «N cambios» lo escribe el generador (data-n + Intl.PluralRules)
   y la fecha también (Intl.DateTimeFormat): aquí no hay JS.
   ============================================================ */

.cl-wrap{width:min(calc(100% - 32px),896px);margin:0 auto;
  padding:calc(var(--header-h) + 72px) 0 96px}

.cl-head h1{margin:0 0 20px;font-size:clamp(36px,5vw,56px);font-weight:800;line-height:1.05;
  letter-spacing:-.027em;color:var(--slate-900)}
.cl-lead{max-width:786px;margin:0;font-size:18px;line-height:1.7;color:var(--slate-500)}

.cl-releases{margin-top:64px;border-top:1px solid var(--slate-200)}

/* ── Una versión ─────────────────────────────────────────── */
.cl-rel{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:40px;row-gap:8px;
  padding:32px 0;border-bottom:1px solid var(--slate-200);
  scroll-margin-top:calc(var(--header-h) + 16px)}

.cl-side{align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
.cl-side h2{margin:0;font-size:15px;font-weight:700;line-height:1.375;color:var(--slate-900)}
.cl-sub{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--slate-500)}
.cl-date{font-variant-numeric:tabular-nums}
.cl-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.cl-chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--pill);
  background:var(--slate-100);color:var(--slate-600);font-size:12px;font-weight:600;white-space:nowrap}
.cl-chip-auto{background:#dcfce7;color:#166534}
.cl-chip-pending{background:var(--amber-100);color:var(--amber-700)}

/* ── Los cambios ─────────────────────────────────────────── */
/* El primer cambio sube 12 px para quedar a la altura del título de la
   izquierda, como en la referencia: cada fila lleva su propio relleno. */
.cl-list{margin:-12px 0 0;padding:0;list-style:none}
.cl-list li{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:12px;
  padding:12px 0;border-bottom:1px solid var(--slate-200)}
.cl-list li:last-child{border-bottom:0}

/* Ancho fijo de columna: «VERBESSERT» y «POPRAWIONE» son las más largas. */
.cl-badge{justify-self:start;align-self:start;margin-top:2px;padding:3px 8px;border-radius:var(--pill);
  font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap}
.cl-badge-new{background:#dcfce7;color:#166534}
.cl-badge-imp{background:var(--blue-100);color:var(--blue-700)}
.cl-badge-fix{background:var(--slate-100);color:var(--slate-600)}
.cl-text{font-size:15px;line-height:1.625;color:var(--slate-700)}

@media(max-width:760px){
  .cl-wrap{padding-top:calc(var(--header-h) + 48px)}
  .cl-releases{margin-top:44px}
  .cl-rel{grid-template-columns:minmax(0,1fr);row-gap:20px;padding:28px 0}
  .cl-side{position:static}
  .cl-list{margin-top:0}
}
@media(max-width:480px){
  .cl-list li{grid-template-columns:minmax(0,1fr);row-gap:6px}
}