/**
 * Ketin 2.0 — Activity List · kem2-activity-list.css · v1.0.1 · 2026-07-25
 * Default derivado del prototipo .article/.num de definitional-activities.html.
 * SIN !important: los controles de Design (important => all de la base)
 * ganan siempre a estos defaults. Identidades solo como carga inicial.
 *
 * Changelog 1.0.1: faltaba font-family en el título — el prototipo
 * original (.kem-article h3 en kem-modules.css) usa el serif del
 * design system, pero nunca se copió acá. Se agrega variable local
 * --kem2-al-serif (Source Serif 4 / Newsreader en PTF) y se aplica a
 * .kem2-al-title. Mismo patrón encontrado en Newsletter y Texto.
 */

/* ---------- Contenedor (padre) ---------- */
.kem2-activity-list{
  counter-reset: kem2act var(--kem2-al-start, 0);
  --kem2-al-accent: #4800fe;          /* ZIHT brand-600 */
  --kem2-al-line: #e8e9f0;            /* line-soft */
  --kem2-al-line-strong: #dbdde6;     /* line */
  --kem2-al-ink: #12131c;
  --kem2-al-gray: #40424f;
  --kem2-al-serif: 'Source Serif 4', Georgia, serif;
}
.kem2-activity-list.kem-ptf{
  --kem2-al-accent: #a9781f;          /* PTF gold */
  --kem2-al-serif: 'Newsreader', Georgia, serif;
}

/* Dos columnas (escritorio) */
.kem2-activity-list.kem2-al-cols-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--kem2-al-colgap, 48px);
}
@media (max-width: 980px){
  .kem2-activity-list.kem2-al-cols-2{ grid-template-columns: 1fr; }
}

/* ---------- Ítem (hijo) ---------- */
.kem2-activity-item{
  display: grid;
  grid-template-columns: var(--kem2-al-numw, 72px) 1fr;
  gap: var(--kem2-al-mgap, 22px);
  padding: 30px 0;
  counter-increment: kem2act;
}
.kem2-al-density-compacta .kem2-activity-item{ padding: 18px 0; }
.kem2-al-mode-none .kem2-activity-item{ grid-template-columns: 1fr; }
.kem2-al-mode-none .kem2-al-marker{ display: none; }

/* Separadores */
.kem2-al-sep .kem2-activity-item{
  border-top: var(--kem2-al-sw, 1px) var(--kem2-al-sstyle, solid) var(--kem2-al-sc, var(--kem2-al-line));
}
.kem2-al-sep.kem2-al-sep-first .kem2-activity-item:first-child,
.kem2-al-sep.kem2-al-sep-first .kem2-activity-item:first-of-type{
  border-top-color: var(--kem2-al-sfc, var(--kem2-al-line-strong));
}

/* ---------- Marcador ---------- */
.kem2-al-marker{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--kem2-al-accent);
  padding-top: 3px;
  line-height: 1.4;
}
/* Número automático (CSS counter): reordenar hijos renumera solo. */
.kem2-al-num::before{ content: var(--kem2-al-npre, '') counter(kem2act, decimal-leading-zero) var(--kem2-al-nsuf, ''); }
.kem2-al-num-dec    .kem2-al-num::before{ content: var(--kem2-al-npre, '') counter(kem2act, decimal) var(--kem2-al-nsuf, ''); }
.kem2-al-num-uroman .kem2-al-num::before{ content: var(--kem2-al-npre, '') counter(kem2act, upper-roman) var(--kem2-al-nsuf, ''); }
.kem2-al-num-lroman .kem2-al-num::before{ content: var(--kem2-al-npre, '') counter(kem2act, lower-roman) var(--kem2-al-nsuf, ''); }
.kem2-al-num-ualpha .kem2-al-num::before{ content: var(--kem2-al-npre, '') counter(kem2act, upper-alpha) var(--kem2-al-nsuf, ''); }
.kem2-al-num-lalpha .kem2-al-num::before{ content: var(--kem2-al-npre, '') counter(kem2act, lower-alpha) var(--kem2-al-nsuf, ''); }

/* Qué elemento del marcador se muestra según el modo del padre */
.kem2-al-icon, .kem2-al-mtext{ display: none; }
.kem2-al-mode-icon .kem2-al-num, .kem2-al-mode-text .kem2-al-num{ display: none; }
.kem2-al-mode-icon .kem2-al-icon{ display: inline-block; font-size: 20px; }
.kem2-al-mode-text .kem2-al-mtext{ display: inline-block; }
.kem2-al-icon{
  font-family: 'ETmodules';
  font-style: normal;
  font-weight: 400;
  speak: never;
}

/* ---------- Cuerpo ---------- */
.kem2-al-title{
  font-family: var(--kem2-al-serif);
  font-size: 18px;
  margin: 0 0 9px;
  color: var(--kem2-al-ink);
}
.kem2-al-text{ color: var(--kem2-al-gray); font-size: 15px; line-height: 1.65; }
.kem2-al-text p{ margin: 0 0 10px; }
.kem2-al-text p:last-child{ margin-bottom: 0; }

/* ---------- Footer: labels izquierda · botones derecha ---------- */
.kem2-al-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.kem2-al-labels, .kem2-al-buttons{ display: flex; flex-wrap: wrap; gap: 8px; }
.kem2-al-buttons{ margin-left: auto; }

.kem2-al-label{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--kem2-al-gray);
}
.kem2-al-label-1{ background: var(--kem2-al-l1-bg, #eceef4); border: var(--kem2-al-l1-bw,1px) var(--kem2-al-l1-bs,solid) var(--kem2-al-l1-bc,transparent); border-radius: var(--kem2-al-l1-br,30px); padding: var(--kem2-al-l1-pv,4px) var(--kem2-al-l1-ph,12px); }
.kem2-al-label-2{ background: var(--kem2-al-l2-bg, #eceef4); border: var(--kem2-al-l2-bw,1px) var(--kem2-al-l2-bs,solid) var(--kem2-al-l2-bc,transparent); border-radius: var(--kem2-al-l2-br,30px); padding: var(--kem2-al-l2-pv,4px) var(--kem2-al-l2-ph,12px); }
.kem2-al-label-3{ background: var(--kem2-al-l3-bg, #eceef4); border: var(--kem2-al-l3-bw,1px) var(--kem2-al-l3-bs,solid) var(--kem2-al-l3-bc,transparent); border-radius: var(--kem2-al-l3-br,30px); padding: var(--kem2-al-l3-pv,4px) var(--kem2-al-l3-ph,12px); }

.kem2-al-btn{
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  transition: opacity .15s ease;
}
.kem2-al-btn:hover{ opacity: .85; }
.kem2-al-btn-1{ background: var(--kem2-al-b1-bg, var(--kem2-al-accent)); border: var(--kem2-al-b1-bw,1px) var(--kem2-al-b1-bs,solid) var(--kem2-al-b1-bc,transparent); border-radius: var(--kem2-al-b1-br,4px); padding: var(--kem2-al-b1-pv,8px) var(--kem2-al-b1-ph,18px); }
.kem2-al-btn-2{ background: var(--kem2-al-b2-bg, var(--kem2-al-accent)); border: var(--kem2-al-b2-bw,1px) var(--kem2-al-b2-bs,solid) var(--kem2-al-b2-bc,transparent); border-radius: var(--kem2-al-b2-br,4px); padding: var(--kem2-al-b2-pv,8px) var(--kem2-al-b2-ph,18px); }
.kem2-al-btn-3{ background: var(--kem2-al-b3-bg, var(--kem2-al-accent)); border: var(--kem2-al-b3-bw,1px) var(--kem2-al-b3-bs,solid) var(--kem2-al-b3-bc,transparent); border-radius: var(--kem2-al-b3-br,4px); padding: var(--kem2-al-b3-pv,8px) var(--kem2-al-b3-ph,18px); }

/* ---------- Responsive del marcador ---------- */
@media (max-width: 640px){
  .kem2-al-mobile-stacked .kem2-activity-item{ grid-template-columns: 1fr; gap: 8px; }
  .kem2-al-mobile-narrow  .kem2-activity-item{ grid-template-columns: 48px 1fr; gap: 14px; }
  .kem2-al-footer{ flex-direction: column; align-items: flex-start; }
  .kem2-al-buttons{ margin-left: 0; }
}

/* ---------- Animación de entrada (solo si el JS marcó el contenedor) ----------
 * Degradación total: sin JS nunca se aplica opacity 0. */
.kem2-al-anim.kem2-al-anim-ready .kem2-activity-item{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.kem2-al-anim.kem2-al-anim-ready .kem2-activity-item.kem2-al-in{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .kem2-al-anim.kem2-al-anim-ready .kem2-activity-item{
    opacity: 1;
    transform: none;
    transition: none;
  }
}