/**
 * Ketin 2.0 — Timeline · kem2-timeline.css · v1.0.0 · 2026-07-20
 * Defaults derivados del patrón .vine-list/.vine-item del design
 * system estático (círculo hueco 23px, línea fina, título serif,
 * línea cortada en el último punto). SIN !important: Design gana
 * siempre. Identidades = carga inicial editable (ZIHT propio + PTF
 * dorado/crema del prototipo).
 */

/* ---------- Variables por identidad ---------- */
.kem2-timeline{
  --kem2-tl-ink: #12131c;
  --kem2-tl-gray: #40424f;
  --kem2-tl-accent: #4800fe;      /* ZIHT brand-600 */
  --kem2-tl-dotbg: #f3f0ff;       /* ZIHT: fondo hueco claro */
  --kem2-tl-completed: #1e6b34;
  --kem2-tl-current: #4800fe;
  --kem2-tl-pending: #b9bcc9;
}
.kem2-timeline.kem-ptf{
  --kem2-tl-accent: #a9781f;      /* PTF gold */
  --kem2-tl-dotbg: #faf6ec;       /* ptf-cream */
  --kem2-tl-gray: #3c4a3e;
  --kem2-tl-current: #a9781f;
}

/* ---------- Lista ---------- */
.kem2-tl-list{ position: relative; }

/* ===================== VERTICAL — RECTA ===================== */
.kem2-tl-or-vertical.kem2-tl-vl-straight .kem2-tl-list{
  padding-left: calc(var(--kem2-tl-sidew, 0px) + var(--kem2-tl-dotsize, 23px) / 2);
}
.kem2-tl-or-vertical.kem2-tl-vl-straight.kem2-tl-hasside .kem2-tl-list{
  padding-left: calc(var(--kem2-tl-sidew, 60px) + var(--kem2-tl-dotsize, 23px) / 2);
}
.kem2-tl-or-vertical.kem2-tl-vl-straight .kem2-tl-list::before{
  content: '';
  position: absolute;
  left: calc(-1 * var(--kem2-tl-linew, 1px) / 2);
  top: 6px;
  bottom: 6px;
  width: var(--kem2-tl-linew, 1px);
  border-left: var(--kem2-tl-linew, 1px) var(--kem2-tl-linestyle, solid) var(--kem2-tl-line, #c7d3bd);
}
.kem2-tl-lineend-continue.kem2-tl-or-vertical.kem2-tl-vl-straight .kem2-tl-list::after{
  content: '';
  position: absolute;
  left: calc(-1 * var(--kem2-tl-linew, 1px) / 2);
  bottom: calc(-1 * var(--kem2-tl-endlen, 40px));
  height: var(--kem2-tl-endlen, 40px);
  width: 0;
  border-left: var(--kem2-tl-linew, 1px) var(--kem2-tl-endstyle, dotted) var(--kem2-tl-line, #c7d3bd);
}

.kem2-tl-or-vertical.kem2-tl-vl-straight .kem2-tl-item{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-bottom: var(--kem2-tl-igap, 40px);
}
.kem2-tl-or-vertical.kem2-tl-vl-straight .kem2-tl-item:last-child{ padding-bottom: 0; }
.kem2-tl-or-vertical.kem2-tl-vl-straight .kem2-tl-date{
  position: absolute;
  left: calc(-1 * (var(--kem2-tl-sidew, 0px) + var(--kem2-tl-dotsize, 23px) / 2) - 12px);
  top: 2px;
  width: var(--kem2-tl-sidew, 60px);
  text-align: right;
  font-size: 12.5px;
  color: var(--kem2-tl-gray);
}
.kem2-tl-or-vertical.kem2-tl-vl-straight .kem2-tl-dot{
  position: absolute;
  left: calc(-1 * (var(--kem2-tl-sidew, 0px) + var(--kem2-tl-dotsize, 23px) / 2) - var(--kem2-tl-dotsize, 23px) / 2);
  top: 2px;
}
.kem2-tl-or-vertical.kem2-tl-vl-straight .kem2-tl-body{ padding-left: var(--kem2-tl-mgap, 25px); }

/* ===================== VERTICAL — ZIGZAG ===================== */
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-list{ position: relative; }
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-list::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: var(--kem2-tl-linew, 1px);
  transform: translateX(-50%);
  border-left: var(--kem2-tl-linew, 1px) var(--kem2-tl-linestyle, solid) var(--kem2-tl-line, #c7d3bd);
}
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item{
  position: relative;
  width: calc(50% - var(--kem2-tl-mgap, 25px));
  padding-bottom: var(--kem2-tl-igap, 40px);
}
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item:last-child{ padding-bottom: 0; }
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item:nth-child(odd),
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item.kem2-tl-side-left{
  margin-left: 0;
  text-align: right;
}
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item:nth-child(even),
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item.kem2-tl-side-right{
  margin-left: calc(50% + var(--kem2-tl-mgap, 25px));
  text-align: left;
}
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-dot{
  position: absolute;
  top: 2px;
}
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item:nth-child(odd) .kem2-tl-dot,
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item.kem2-tl-side-left .kem2-tl-dot{
  right: calc(-1 * var(--kem2-tl-mgap, 25px) - var(--kem2-tl-dotsize, 23px) / 2);
}
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item:nth-child(even) .kem2-tl-dot,
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item.kem2-tl-side-right .kem2-tl-dot{
  left: calc(-1 * var(--kem2-tl-mgap, 25px) - var(--kem2-tl-dotsize, 23px) / 2);
}
.kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-date{ display: block; font-size: 12.5px; color: var(--kem2-tl-gray); margin-bottom: 4px; }

/* ===================== HORIZONTAL ===================== */
.kem2-tl-or-horizontal .kem2-tl-list{
  display: flex;
  overflow-x: auto;
  padding-top: calc(var(--kem2-tl-dotsize, 23px) / 2 + 6px);
}
.kem2-tl-or-horizontal .kem2-tl-list::before{
  content: '';
  position: absolute;
  left: calc(var(--kem2-tl-hw, 220px) / 2);
  right: calc(var(--kem2-tl-hw, 220px) / 2);
  top: calc(var(--kem2-tl-dotsize, 23px) / 2);
  height: var(--kem2-tl-linew, 1px);
  border-top: var(--kem2-tl-linew, 1px) var(--kem2-tl-linestyle, solid) var(--kem2-tl-line, #c7d3bd);
}
.kem2-tl-or-horizontal .kem2-tl-item{
  position: relative;
  flex: 0 0 var(--kem2-tl-hw, 220px);
  width: var(--kem2-tl-hw, 220px);
  padding: 0 calc(var(--kem2-tl-mgap, 25px) / 2);
  text-align: center;
}
.kem2-tl-or-horizontal .kem2-tl-dot{
  position: absolute;
  left: 50%;
  top: calc(-1 * (var(--kem2-tl-dotsize, 23px) / 2 + 6px));
  transform: translateX(-50%);
}
.kem2-tl-or-horizontal .kem2-tl-date{ display: block; font-size: 12.5px; color: var(--kem2-tl-gray); margin-bottom: 4px; }
.kem2-tl-or-horizontal .kem2-tl-body{ margin-top: var(--kem2-tl-mgap, 25px); }
.kem2-tl-or-horizontal .kem2-tl-footer{ justify-content: center; }
.kem2-tl-or-horizontal .kem2-tl-labels,
.kem2-tl-or-horizontal .kem2-tl-buttons{ justify-content: center; }

/* ===================== MARCADOR (compartido) ===================== */
.kem2-tl-dot{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kem2-tl-dotsize, 23px);
  height: var(--kem2-tl-dotsize, 23px);
  border-radius: 50%;
  background: var(--kem2-tl-dotbg);
  border: var(--kem2-tl-dotborder, 1px) solid var(--kem2-tl-accent);
  box-sizing: border-box;
  flex: 0 0 auto;
}
.kem2-tl-mode-filled .kem2-tl-dot{ background: var(--kem2-tl-accent); }
.kem2-tl-mode-number .kem2-tl-num::before{ content: var(--kem2-tl-npre, '') counter(kem2tl, decimal) var(--kem2-tl-nsuf, ''); }
.kem2-tl-mode-number.kem2-tl-num-dlz .kem2-tl-num::before{ content: var(--kem2-tl-npre, '') counter(kem2tl, decimal-leading-zero) var(--kem2-tl-nsuf, ''); }
.kem2-tl-mode-number.kem2-tl-num-uroman .kem2-tl-num::before{ content: var(--kem2-tl-npre, '') counter(kem2tl, upper-roman) var(--kem2-tl-nsuf, ''); }
.kem2-tl-mode-number.kem2-tl-num-ualpha .kem2-tl-num::before{ content: var(--kem2-tl-npre, '') counter(kem2tl, upper-alpha) var(--kem2-tl-nsuf, ''); }
.kem2-tl-list{ counter-reset: kem2tl var(--kem2-tl-start, 0); }
.kem2-tl-item{ counter-increment: kem2tl; }
.kem2-tl-num{ font-size: 11px; font-weight: 700; color: var(--kem2-tl-accent); }
.kem2-tl-mode-filled .kem2-tl-num{ color: #fff; }
.kem2-tl-num, .kem2-tl-icon, .kem2-tl-mtext{ display: none; }
.kem2-tl-mode-number .kem2-tl-num,
.kem2-tl-mode-icon .kem2-tl-icon,
.kem2-tl-mode-text .kem2-tl-mtext{ display: inline-block; }
.kem2-tl-icon{ font-family: 'ETmodules'; font-style: normal; font-size: 12px; color: var(--kem2-tl-accent); }
.kem2-tl-mtext{ font-size: 10px; font-weight: 700; color: var(--kem2-tl-accent); }

/* ---------- Estados ---------- */
.kem2-tl-states .kem2-tl-item.kem2-tl-state-completed .kem2-tl-dot{ border-color: var(--kem2-tl-completed); background: var(--kem2-tl-completed); }
.kem2-tl-states .kem2-tl-item.kem2-tl-state-completed .kem2-tl-num{ color: #fff; }
.kem2-tl-states .kem2-tl-item.kem2-tl-state-current .kem2-tl-dot{ border-color: var(--kem2-tl-current); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kem2-tl-current) 25%, transparent); }
.kem2-tl-states .kem2-tl-item.kem2-tl-state-pending .kem2-tl-dot{ border-color: var(--kem2-tl-pending); }
.kem2-tl-states .kem2-tl-item.kem2-tl-state-pending .kem2-tl-num{ color: var(--kem2-tl-pending); }

/* ---------- Densidad ---------- */
.kem2-tl-density-compacta.kem2-tl-or-vertical.kem2-tl-vl-straight{ --kem2-tl-igap: 22px; }
.kem2-tl-density-compacta .kem2-tl-title{ font-size: 16px; }
.kem2-tl-density-compacta .kem2-tl-text{ font-size: 14px; }

/* ---------- Cuerpo ---------- */
.kem2-tl-title{
  font-family: var(--kem2-tl-serif, 'Source Serif 4', Georgia, serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--kem2-tl-ink);
  margin: 0 0 8px;
}
.kem-ptf .kem2-tl-title{ font-family: 'Cormorant Garamond', Georgia, serif; }
.kem2-tl-text{ color: var(--kem2-tl-gray); font-size: 15px; line-height: 1.6; margin: 0; }
.kem2-tl-text p{ margin: 0 0 8px; }
.kem2-tl-text p:last-child{ margin-bottom: 0; }

/* ---------- Imagen ---------- */
.kem2-tl-imgwrap{ display: inline-block; margin-bottom: 8px; }
.kem2-tl-img{
  width: var(--kem2-tl-imgsize, 44px);
  height: var(--kem2-tl-imgsize, 44px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ---------- Footer: labels + botones ---------- */
.kem2-tl-footer{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: space-between; }
.kem2-tl-labels, .kem2-tl-buttons{ display: flex; flex-wrap: wrap; gap: 8px; }
.kem2-tl-label{ display: inline-block; font-size: 12px; color: var(--kem2-tl-gray); }
.kem2-tl-label-1{ background: var(--kem2-tl-l1-bg, #eceef4); border: var(--kem2-tl-l1-bw,1px) var(--kem2-tl-l1-bs,solid) var(--kem2-tl-l1-bc,transparent); border-radius: var(--kem2-tl-l1-br,30px); padding: var(--kem2-tl-l1-pv,4px) var(--kem2-tl-l1-ph,12px); }
.kem2-tl-label-2{ background: var(--kem2-tl-l2-bg, #eceef4); border: var(--kem2-tl-l2-bw,1px) var(--kem2-tl-l2-bs,solid) var(--kem2-tl-l2-bc,transparent); border-radius: var(--kem2-tl-l2-br,30px); padding: var(--kem2-tl-l2-pv,4px) var(--kem2-tl-l2-ph,12px); }
.kem2-tl-label-3{ background: var(--kem2-tl-l3-bg, #eceef4); border: var(--kem2-tl-l3-bw,1px) var(--kem2-tl-l3-bs,solid) var(--kem2-tl-l3-bc,transparent); border-radius: var(--kem2-tl-l3-br,30px); padding: var(--kem2-tl-l3-pv,4px) var(--kem2-tl-l3-ph,12px); }
.kem2-tl-btn{ display: inline-block; font-size: 13px; font-weight: 600; text-decoration: none; color: #fff; }
.kem2-tl-btn-1{ background: var(--kem2-tl-b1-bg, var(--kem2-tl-accent)); border: var(--kem2-tl-b1-bw,1px) var(--kem2-tl-b1-bs,solid) var(--kem2-tl-b1-bc,transparent); border-radius: var(--kem2-tl-b1-br,4px); padding: var(--kem2-tl-b1-pv,8px) var(--kem2-tl-b1-ph,18px); }
.kem2-tl-btn-2{ background: var(--kem2-tl-b2-bg, var(--kem2-tl-accent)); border: var(--kem2-tl-b2-bw,1px) var(--kem2-tl-b2-bs,solid) var(--kem2-tl-b2-bc,transparent); border-radius: var(--kem2-tl-b2-br,4px); padding: var(--kem2-tl-b2-pv,8px) var(--kem2-tl-b2-ph,18px); }
.kem2-tl-btn-3{ background: var(--kem2-tl-b3-bg, var(--kem2-tl-accent)); border: var(--kem2-tl-b3-bw,1px) var(--kem2-tl-b3-bs,solid) var(--kem2-tl-b3-bc,transparent); border-radius: var(--kem2-tl-b3-br,4px); padding: var(--kem2-tl-b3-pv,8px) var(--kem2-tl-b3-ph,18px); }

/* ---------- Responsive: el sistema decide el mejor comportamiento ----------
 * Zigzag y horizontal colapsan a vertical recta con línea a la izquierda. */
@media (max-width: 760px){
  .kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-list::before{ left: 11px; transform: none; }
  .kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item,
  .kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item:nth-child(odd),
  .kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item:nth-child(even){
    width: auto;
    margin-left: 28px;
    text-align: left;
  }
  .kem2-tl-or-vertical.kem2-tl-vl-zigzag .kem2-tl-item .kem2-tl-dot{
    left: -28px;
    right: auto;
  }

  .kem2-tl-or-horizontal .kem2-tl-list{
    display: block;
    overflow: visible;
    padding-top: 0;
    padding-left: calc(var(--kem2-tl-dotsize, 23px) / 2);
  }
  .kem2-tl-or-horizontal .kem2-tl-list::before{
    left: calc(var(--kem2-tl-dotsize, 23px) / 2 - var(--kem2-tl-linew, 1px) / 2);
    right: auto;
    top: 6px;
    bottom: 6px;
    height: auto;
    width: var(--kem2-tl-linew, 1px);
    border-top: none;
    border-left: var(--kem2-tl-linew, 1px) var(--kem2-tl-linestyle, solid) var(--kem2-tl-line, #c7d3bd);
  }
  .kem2-tl-or-horizontal .kem2-tl-item{
    flex: none;
    width: auto;
    text-align: left;
    padding: 0 0 var(--kem2-tl-igap, 40px) calc(var(--kem2-tl-mgap, 25px));
    margin-left: 0;
  }
  .kem2-tl-or-horizontal .kem2-tl-item:last-child{ padding-bottom: 0; }
  .kem2-tl-or-horizontal .kem2-tl-dot{ left: calc(-1 * var(--kem2-tl-mgap, 25px)); top: 2px; transform: none; }
  .kem2-tl-or-horizontal .kem2-tl-body{ margin-top: 0; }
  .kem2-tl-or-horizontal .kem2-tl-footer,
  .kem2-tl-or-horizontal .kem2-tl-labels,
  .kem2-tl-or-horizontal .kem2-tl-buttons{ justify-content: flex-start; }
}