/* Línea de tiempo de /blog/cuanto-tarda-aprobar-oposicion-estado/ (y
   reutilizable en futuras actualizaciones anuales de esa página): una
   lista vertical de hitos reales de una convocatoria, con la fecha, el
   título y cuánto tardó en llegar desde el hito anterior. */

.cronologia {
  position: relative;
  margin: 20px 0;
  padding-left: 28px;
  border-left: 2px solid var(--age-border);
}

.cronologia-item {
  position: relative;
  padding-bottom: 22px;
}
.cronologia-item:last-child {
  padding-bottom: 0;
}

.cronologia-punto {
  position: absolute;
  left: -35px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--age-primary);
  border: 3px solid var(--age-card);
  box-shadow: 0 0 0 2px var(--age-primary);
}

/* Paso que solo aplica a una de las oposiciones (p. ej. el curso
   selectivo, exclusivo de GACE): mismo formato, con el punto y un borde
   izquierdo en un tono distinto para que se note que es una bifurcación,
   no un paso común a todas. */
.cronologia-item--gace {
  border-left: 2px solid var(--age-primary);
  margin-left: -18px;
  padding-left: 16px;
}
.cronologia-item--gace .cronologia-punto {
  background: var(--age-card);
  border: 3px solid var(--age-primary);
  box-shadow: none;
}

.cronologia-fecha {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--age-primary-dark, var(--age-ink));
  margin-bottom: 4px;
}

.cronologia-titulo {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
}

.cronologia-desc {
  font-size: 13.5px;
  color: var(--age-ink-soft);
  line-height: 1.55;
  margin: 0;
}

.cronologia-duracion {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--age-ink-soft);
  background: var(--age-bg, transparent);
  border: 1px dashed var(--age-border);
  border-radius: 999px;
  padding: 2px 10px;
}